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
show the code being used to create that layout if you want an accurate answer
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 );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?
m_label is a Label (sorry, first post was incorrect, it’s a Label and a Slider), m_slider is a Slider.
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.)
hi. thx - i’ve tried all combinations of justify & align and just can’t seem to get it to centre
Use the alignSelf property on the slider:
flex.items.add( FlexItem( m_level ).withFlex( 1 ).withMaxWidth( 75 ).withAlignSelf(FlexItem::AlignSelf::center) );
Hi, I’ve tried that and I just get a black background.
Can you show us your layout code?
