Click on blank space to the left of the section label collapses/expands the section

[avernet]

We wouldn't want this to happen, for consistency with what we are doing for labels, per #2578.

+1 from customer

[avernet]

Trying this out, since the header is clearly marked as an "area", unlike controls' labels, my thinking is that it is better to handle clicks on the whole area, rather than just around the text of the label.

[avernet]

Some customers style section headers in such a way that they doesn't have the default background and border, and it is in those cases that is doesn't make much sense to collapse or expand sections when users click on the then blank space to the right of labels. Because of this, we resolved that it does make sense to do this change.

[avernet]

Test form

[avernet]

Currently, for control labels, we use float: left for the help icon and display: table for the text of the label. The downside of float: left is that we can't then rely on the browser to properly vertically align the help icon with the text, and need to rely on setting a manually adjusted margin-top so the help icon appears more or less aligned on the middle of the text. (We can't use padding or line-height since the icon comes from a background image.)

To avoid this problem, for the section, we're trying to use display: inline-block for both the help icon and the text of the label, white-space: nowrap to force both boxes to always be in on the same line. The downside of this technique is that the box is sized first as if it wasn't not forced to be on the same line, and then put on the same line. As a result, the box with the text can overflow on the right, which can avoid by always adding a padding of the width of the help icon. But this isn't ideal, as the padding will also apply when there is no help icon.

I prefer this latter technique, but we can't use it for the control labels, since we need a way to make what follows the label show on a new line, and we can't do this if the text of the label is in display: inline-block.

So my current thinking is that we're better off always using the float/table technique, for consistency.

[avernet]

Made some progress on this, but while implementing the float/table technique with sections, I've stumbled upon this issue. Hopefully, answers will shed some light on this.

[avernet]

The issue with the float/table mentioned in my previous comment is taken care of, and now everything is working as expected on Chrome, both in Form Builder and at runtime. Next, we need to test and make this work on:

• Firefox, where there are issues with the positioning of short labels.
• IE8+ for Form Runner
• IE11 for Form Builder
• iOS for Form Runner

[avernet]

I don't seem to manage to get around the Firefox issue mentioned , and have posted a question on Stack Overflow about it. Let's see if the answers or comments shed some light on the issue.

[avernet]

Resolution: we are not using the same CSS to position the help/text for section titles and control labels:

• For control labels, we are keeping what we had: the help is positioned with float:left and text with display: table. The latter satisfies the following two constraints: (1) the text of the label, which is inside a <label> element, only takes as much horizontal space as needed, so a click on that empty space to the rights has no effect, and (2) what follows the label is on a new line.
• For section titles, unlike control labels, it is a click on the container of the text (the span.fr-section-label) that expands or collapses the section, so the container must only take as much horizontal space as needed. For this reason, the container must have have a display: inline-something. The natural solution would be to use display: inline-block on the container, float: left on the help icon, and display: inline-block on the title of the section. This works with Chrome and IE8+, but not with Firefox. So instead, we are using a display: inline-table on the container, and display: table-cell on the title text, which works as well with Firefox.

[avernet]

With the technique described above, on IE8, we're getting too much space between the help icon and the label in section titles with a help, but I take it to be an acceptable cosmetic issue on IE8, which we might be able to drop soon per #2651.