Do repeat regions work with bootstrap columns?

#1

I noticed that within a repeating region, the col sizes don’t size the same from the App Connect panel. i get more columns of repeat data per row than I wanted. Do you just format within the code to get nice looking columns with image/data within them? For ex, I wanted to have a column contain everything which is going to be repeated, then use the app connect panel to determine how many columns I wanted per row .

Thanks,
Rick

#2

Of course you can repeat columns.

#3

I’m trying to have 4 columns per row so set my col-3 , yet i see 6 . Whatever I change the col property to, i still get about 5-6 columns displayed. That’s what I’m tryting to figure out. How to control the number of columns from the data being displayed. I’m not using a table since my columns have both image and data.

Rick

#4

Well you control the columns width depending on the screen size selected in Wappler.
So you setup different size for different screen sizes by clicking any of the device icons (top center).

#5

Yes I have been using the col property setting in the appconnect panel and based on screen size, I’m pretty familiar making that work for different devices. this is the first time I’m using the same with repeating region. It just seems that the code vs appconnect doesn’t seem connected for what’s inside the repeat region. I’m sure I’m doing something dumb but trying to figure it out.

Rick

#6

Well what is set in the app connect panel for columns size and what is set in the code?

#7

ok, i got it work but it’s weird. When you add a repeat region using appconnect, you connect to your query and appconnect shows up as a repeat region. Under attributes, there are no controls for col size etc. If you insert a class=“col-x” into the repeat line, that works . In appconnect, the repeat item has been turned into a column and the sizing controls operate like any other column which is what I wanted. I don’t know if that’s how you intended wappler to work but it does. Also, when you add a repeat region , you have to manually move the end div to include everything you want to be included in the repeat region. I would have thought I could do that graphically in the appconnect panel. No sweat, but just giving you feedback.

heres the code:

Thanks,
Rick

#9 
<div class="container">
  <div class="row">
    <div dmx-repeat:repeat2="serverconnect1.data.queryallweddings" class="col-3">
      <div dmx-text="" >
        <a><img  dmx-bind:src="&quot;images/&quot;+front_photo_location"></a>
      </div>
    </div>
  </div>
</div>
#10

You should not need to go into the code to do this at all.

What you do is make sure you are in the design view, make sure the device in the design view is set to the particular device you want to adjust, and change the properties in the panel, then switch to the next view and adjust the col size property for that next, and so on until you get the desired layout you want.

#11

yes it does work that way once the col property is inserted into the repeat line as above with (col-3)
When you add a repeater in appconnect, it does not act like a column and does not have a col property. However, if you manually add it the first time, it now appears in the appconnect panel as a col and you have all the properties available. I think this might be a bug…

Rick

#12

Select the row and add repeat-children to it. Then you will see the col- properties.