Repeat buttons in group, with non-repeat button after

Wappler General How To
#1

So… I’m trying to filter a table using a button group. Most of the buttons come from a repeat, I want to add a single button after the repeat, but n the same button group that allows the user to select all records. Functionally it works fine. But I’m struggling to get this:

image
to look more like this:
image

i.e with the buttons aligned properly, same width etc. I’ve tried every permutation I can think of in terms of classes, divs and location of the repeat but this is the best I can come up with so far. The issue always being the non-repeat button doesn’t fall inside the d-flex of the button group, therefore formatting is applied differently.

Code is below, does any one have any thoughts on how to achieve this?

<div class="btn-group d-flex">
      <div class="btn-group d-flex" Session="group" aria-label="Status Filter" is="dmx-repeat" dmx-bind:repeat="getPlans.data.queryPlanSelect" id="btnRepeatFlag">
             <button type="button" class="btn btn-outline-info" dmx-on:click="varPlan.setValue(plan_id)" dmx-class:active="varPlan.value == plan_id">{{plan_name}}</button>
      </div>
             <button type="button" class="btn btn-outline-info" dmx-on:click="varPlan.setValue()" dmx-class:active="varPlan.value == null">All</button>
</div>

Thanks!

#2

Instead of using repeat children on the button group to repeat the button inside it, use simple repeat region for the button and move the static button inside the same button group.
Also don’t nest two button groups like that as that’s not correct.

#3

Do you mean like this?

 <div class="btn-group d-flex">
          <div dmx-repeat:repeat1="getPlans.data.queryPlanSelect">
                    <button type="button" class="btn btn-outline-info" dmx-on:click="varPlan.setValue(plan_id)" dmx-class:active="varPlan.value == plan_id">{{plan_name}}</button>
          </div>
                    <button type="button" class="btn btn-outline-info" dmx-on:click="varPlan.setValue()" dmx-class:active="varPlan.value == null">All</button>
 </div>

The result is the same, though I may hav misunderstood!
image

#4

No, I mean to repeat the button, not a div wrapping it… Apply the repeat to the button and remove this div currently wrapping it.

#5

Ok…like this…

  <div class="btn-group d-flex">
     <button type="button" class="btn btn-outline-info" dmx-on:click="varPlan.setValue(plan_id)" dmx-class:active="varPlan.value == plan_id"  dmx-repeat:repeat1="getPlans.data.queryPlanSelect">{{plan_name}}</button>
     <button type="button" class="btn btn-outline-info" dmx-on:click="varPlan.setValue()" dmx-class:active="varPlan.value == null">All</button>
   </div>

That works. Many thanks!!

1 Like