Maintaining “text-overflow:ellipsis” with SharePoint Web Part Zones

Summary: Use “table-layout:fixed

Today, I stumbled across an issue whereby the title of an item within a web part didn’t maintain it’s ellipsis. Instead, the web part zone container was expanded to the full width of the title inside, therefore, overflowing onto other aspects of the page.

It’s worth noting here that the solution is responsive, so adding a max-width, or fixed width wasn’t an option.

Text-Overflow - Error

A quick look in the developer tools I found that the responsive column was being maintained, but the web part was bleeding out.

Text-Overflow - Foundation Width

I noticed that the “.ms-webpart-zone” container set set to “display:table”. As a result, the table’s width was being dictated by the content within.

Text-Overflow - SP Table

Now, initially, I changed the “.ms-webpart-zone” to display block, which worked fantastically. However, a little side effect of this resulted in not being able to add web parts in edit mode (Just a small issue…)

What worked was ensuring that “.ms-webpart-zone” maintained some form of table attribute. By adding “table-layout:fixed” ensured that SharePoint’s default styling of “table” was maintained and not overwritten with “block” and that the table width wasn’t dictated by the content within it.

Text-Overflow - working

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s