search

leekelleher / umbraco-contentment

Contentment for Umbraco - a state of happiness and satisfaction
https://marketplace.umbraco.com/package/umbraco.community.contentment
Mozilla Public License 2.0
155 stars 70 forks source link

Data List - Item Picker overlay - item label doesn't wrap #119

Closed bjarnef closed 3 years ago

bjarnef commented 3 years ago

What is the current behaviour?

When using a custom data source and a longer text it seems to overflow:

image

What is the expected behaviour?

It would be great to wrap the text on next line to keep it inside the parent <button> element.

Please tell us about your set-up:

Anything else?

leekelleher commented 3 years ago

@bjarnef Well spotted! 👀

I've had a look at this to see what I can do. Turns out that it's Umbraco explicitly setting the CSS for the item to have white-space: nowrap;.

https://github.com/umbraco/Umbraco-CMS/blob/release-8.13.1/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-actions.less#L31

I could fix this for Contentment, but really it's Umbraco setting the text to overflow.

If you need an immediate workaround, here's some custom CSS to add in...

.contentment .umb-action-link {
    white-space: normal;
}
bjarnef commented 3 years ago

Yeah, it should probably be fixed in Umbraco. Not sure if there's a specific reason white-space: nowrap; is set?

image

Alternatively it could use text-overflow.

.umb-actions .menu-label {
    display: inline-block;
    vertical-align: middle;
    padding-left: 15px;
    text-overflow: ellipsis;
    overflow: hidden;
}

image

leekelleher commented 3 years ago

I'm going to close this one off, as it's an Umbraco CSS issue. In the meantime, a custom CSS workaround can be used.