Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Flexbox in Lighthouse Studio

v9.5.3 uses Flexbox in Must-Haves and Unacceptables. If there is anything like mouseovers, bold text, etc., the whole layout is totally messed up. There are no blanks between the words. Formats like <sub></sub> don't work anymore. This behaviour is really annoying. Wouldn't it be better to test such new features thouroughly before implementing them into the software?
asked Mar 13, 2018 by ingo (340 points)

1 Answer

0 votes
Hi there,

Unfortunately you're right and we aren't perfect testers. We do spend a significant amount of time before releasing testing new features, improvements, and bug fixes but especially in a software application that allows the level of customization that Lighthouse Studio does, we usually find ourselves unable to think of every possible use case that our customers do. So I apologize for the inconvenience you're experiencing with that and hope you know that testing/QA is an area where we've recently added more manpower and time in the hopes of mitigating as much frustration on your end as possible.

When a containing div is given the display property flex, it will now control the alignment property of all of it's children elements. one of the biggest benefits of using flex in this case is that it lets us control vertical text alignment without using a table element.  So I believe what's happening in this case is by introducing HTML tags like <sub> or <b>, etc. the flex container sees more children than you expect it to.

<div style="display: flex;">
    text goes in here
</div>


In this case the flexed div only has content, so it see's one child and everything is fine.

<div style="display: flex;">
    text go <sub>es</sub> in here
</div>


In this case, the flex container sees the start of the content with the word text and then encounters the opening <sub> tag which signifies a new element. To the flex container, that means a new child. After the closing </sub> tag it knows the second child is finished but there is still more there so the flex container starts processing the third child.  Having found three children, the flex container does it's job and lines them up on a single axis, which in this case is exactly the opposite of what you're trying to accomplish. Enter the frustration.

The best way to solve the problem is to make sure that the flex container only knows about one child.  By wrapping the text in a <span></span> we can do that.  

<div style="display: flex;">
    <span>text go<sub>es</sub> in here<span>
</div> 


This way, the flex container will only process one child and I believe the behavior should be as you intended originally.  As a general HTML practice, we don't want to let raw text be on the "outside" of anything. So when inserting tags like <b> or <i> or <sub> into the middle of text it's best practice always wrap what we intend the browser to interpret as one consistent block  of text in some kind of element, usually a <div> or a <span>.

If you or anyone else is interested, here's a good resource to learn some more about flexbox-- https://css-tricks.com/snippets/css/a-guide-to-flexbox/. As a development team, we feel like it brings a lot of power and possibility to power users like yourself who are brave enough to venture into the world of customization.
answered Mar 13, 2018 by Lance Adamson Bronze Sawtooth Software, Inc. (1,775 points)
Hi Lance,
Thank you for your answer. I understand that overall it is a good idea to use flex. But in the case of Must-Haves and Unacceptables and with many attributes and levels to change I went for another solution:

<style type="text/css">
.acbc_rules .option_cell label {
    display: inline;
}
</style>

Do you think this is a problem in this case? I've tested it with different browsers and it looked fine everywhere.
For your case I think it's a great solution!  You may start to run into trouble if the text of those responses gets quite long and your want to preserve specific alignment with the radio button or if you want to do thinks like use images and text at the same time and still have them center align. But I certainly don't see an "problems" doing it that way either.
...