Flex layout question


#1

Hi, wondering if someone could shed some light on flexbox layout.
In the following grab, there are 2 items, a button and a slider, and these are laid out in a column direction.

The slider is fixed here at a max width of 75 and the whole column is 150. I can’t seem to get a setting where the slider is centred in the column, it always appears on the left. Any ideas? thx


#2

show the code being used to create that layout if you want an accurate answer


#3

thanks

auto bounds = getLocalBounds();

FlexBox flex;

flex.items.add( FlexItem( m_label ).withHeight( 30 ) );
flex.items.add( FlexItem( m_level ).withFlex( 1 ).withMaxWidth( 75 ) );
flex.flexDirection = FlexBox::Direction::column;
flex.performLayout( bounds );

#4

it’s not a solution, but add this to FlexBox::performLayout()

DBG ("placed: " + comp->getName() + ": " + item.currentBounds.getSmallestIntegerContainer().toString());

put it after the comp->setBounds() in if(auto comp = item.associatedComponent) { }

regarding your code, what is m_label and what is m_level? where’s the button in that list of things being laid out with flexbox?


#5

m_label is a Label (sorry, first post was incorrect, it’s a Label and a Slider), m_slider is a Slider.


#6

I believe you’re just missing a justifyContent declaration: https://docs.juce.com/master/classFlexBox.html#afa615fca8a66bca45dc4b7ecdb75c3fd

(or maybe alignItems, I always forget which one is on-axis and which one is off.)


#7

hi. thx - i’ve tried all combinations of justify & align and just can’t seem to get it to centre


#8

Use the alignSelf property on the slider:

flex.items.add( FlexItem( m_level ).withFlex( 1 ).withMaxWidth( 75 ).withAlignSelf(FlexItem::AlignSelf::center) );


#9

Hi, I’ve tried that and I just get a black background.


#10

Can you show us your layout code?