Wrap long labels onto multiple lines to prevent text being cut off

[calbasi]

Overview

In long labels, a width of 17% hides part of the content... Just changing whitespace wrapping back to normal allows them to show the whole label.

Before

After

[civicrm-builder]

Can one of the admins verify this patch?

[civibot]

(Standard links)

• If this is your first pull-request for CiviCRM, please browse CONTRIBUTING.md for information about the development and testing processes.
• If you are reviewing this pull-request, you may wish to consult the test sites and the Review Standards (long template, short template).

[colemanw]

@calbasi could you post a screenshot? I wonder about having the text wrap instead.

@civicrm-builder add to whitelist.

[calbasi]

Sure! Here you are... 2 screenshots, one before and the second after my change.

Please, take a closest look at the first grey label... Using actual styles, part of their text is not shown, because text color is white, like background color outside the grey label...

[calbasi]

About text wrap, the problem could be the "estrange" html used, where background-color is set in the parent container, what has no text...

Here the html output:

<div class="label"><label>  Which Saudi Reps Level are you applying for
     <span class="crm-marker" title="This field is required.">*</span>
</label></div>

[colemanw]

I suspect the problem is a css rule setting white-space: nowrap. Try inspecting the element's css styling to see.

[calbasi]

I think it's not an overflow issue... Maybe I'm not explaining properly the issue (I beg your perdon, my English is not the best :-p ).
Ok, I'm attaching a new screenshot that show as overflow content text of child SPAN element is visible if selected, or just if text color and background would have different colors, and not bot white).
The problem is that background color don't apply to child SPAN tag, where text is, but the parent DIV, which has a fixed width (17%).
Here my screenshot, while I'm selecting "not visible" text with the mouse:

[colemanw]

Right but if white-space wasn't set to nowrap then I think the line should break and the label would be 2 lines tall. IMO that's the right fix.

[calbasi]

You are partially right: it's a white-space issue. But the solution is using white-space: normal, like this:

.crm-container .crm-section .label label{
  white-space: normal;
}

The output then is this:

What about it? If it's fine for you I can change PR with this code.

[colemanw]

Sounds like I'm entirely right, I said that white-space should not be set to nowrap, and indeed setting it to normal fixes the problem :)

[colemanw]

@calbasi I'm happy with this change if you are. Last thing to do is to clean up the commits in this PR, e.g. squash them into one commit with a helpful description, like "Wrap long labels onto multiple lines to prevent text being cut off". Do you know how do do that with git?

[calbasi]

Hi @colemanw ,
I'm sorry, you are right with your suggestion :-) I read too quickly your reply :-)
Never mind, I've tried to squash the 2 commits, using your commit message :-) Please, review it.
Thanks in advance