Webmastersite.net

Search    Register    Log In   

Details

Mobile Width Fixes
By
Dec 20, 2018 am31 12:03 AM

On a phone, your worst enemy is user input that happens to be slightly longer than you expect. The pages you check look fine, but then along comes the submitter who has a really long URL for their listing and suddenly the display of that URL on the listing details page is causing a horizontal scroll on people's phones. Today I've addressed that problem by adding the following lines to the base.css/bootstrapbase.css to be applied only on small screens:

.detailedinfo { display: inline-block; word-break: break-word; }
.urlarea .thumbshot { float: none; }

That forces long URLs shown on the details page to wrap onto multiple lines even though they have no spaces -- hopefully that inline-block doesn't have unintended sideeffects on other elements, I didn't see any. And the other line makes the URL start below the thumbshot instead of next to it, so it has more space to fill out.

Relatedly, I found that listings with very long titles (even with spaces) were causing their categories to become potentially wider than the screen. This proved a much more frustrating problem. It's easy to solve if you remove the tables and use a div only layout, but I can't assume that everyone will want to do that so I had to wrestle with the oddities of table layout CSS. In the end, based on a stackoverflow suggestion, I came up with this nonsensical voodoo that somehow works:

td.link
{
max-width: 0; /* I know it makes no sense, but it works, and removing it breaks */
}

.panel-title
{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

The .link panels continue to have a greater than zero width in defiance of all logic. Notably, if i apply the CSS to .panel instead of .link then logic does semi-apply to all other panels except the .link ones and they shrink to at least near nothing. Presumably it's something about being a <td> element that makes logic not apply at all. Thus if you happen to be using a tableless div layout with class="link" I almost created a problem for you, but remembered just in time to change .link to td.link so that it only applies in tables. Confirmed behavioral consistency between Chrome and Firefox.

I noticed that when the detail/comments/rate/etc options in the listing bit wrap, the glyphs can get wrapped onto a different line than the link they're associated with. That's not ideal, so I changed the space after the glyphs to a non-breaking space... which should've worked but it didn't. The only solution that works is putting the text and glyph both inside a nowrap span, so that's what I've done.

Finally, in portrait mode on my phone the details info table and the similar listings table within it are just too wide. I've made them stack vertically on very small screen widths now so the field label is above the content instead of to the left of it.

I've rolled these CSS fixes into the latest release of both 10.2 and 10.3.





Tags ,
Views 103 views. Averaging 103 views per day.
Similar Listings
Mobile Columns Per Row
Mobile, meetup, twitter
10.3.31 = Fixes + More Speed
Fixes and Calendar Work
File browser, page speed and fixes

Sorry, you don't have permission to post. Log in, or register if you haven't yet.

Please login or register.