Ryan Mertzic:
What is the tailwind class to position one group below a parent group?
Lindsay Clark:
@coreteam anyone wish to help Ryan out?
Andrew Dam:
@Ryan Mertzic Can you explain a bit more on what you’re looking to do?
There’s a couple of different ways to position elements vertically (such as giving a parent element flex-col). If you mean different BF fields, you can usually use a mix of boostrap and a clearfix.
Ryan Mertzic:
Ryan Mertzic:
This is three groups. I need the features on the right below the html header on the left.
Ryan Mertzic:
Andrew Dam:
@Ryan Mertzic So this is a bit of a unique scenario. It looks like you’re using the Master Detail example, and in the styleClassesBody of the Page Info, you can see there is flex applied to the body. This causes all of the groups to be positioned beside each other rather than stacked.
There’s 3 ways that come to mind to handle this scenario:
- You can add
flex-wrapto the styleClassesBody of the page info. I tested this and it created a bit of a gap between the header and the rest of the page, but your results may vary. I solved this by giving the other groups negative top margin to compensate. - You can give the header group the class
absolutewhich makes it ignore the positioning of other elements. You will have to give some top margin to the other groups to compensate for the header. - You can move your header to a Slot in BF, which separates it from the page body. This is probably the ideal solution but without knowing the details of your app, I’m not sure if it can be easily implemented.
Ryan Mertzic:
Great! solution 1 worked for me. I avoided solution 3 because because the header appeared in my card windows the last time I tried it. Not sure how to suppress that.
Andrew Dam:
Glad to hear it worked! Regarding suppressing the header, I presume you could give it conditional visibility using v-if, but maybe that’s an experiment for another time.