Test environment: How do you recommend in dealing with misalignment due to varied product name?

[taneis]

|

[Paulie_D]

I think a JS equalheight script is required here pending browser acceptance/support of flexbox.

Or perhaps FitText.js

[TheDoc]

This might not be the best markup, but the JS should give you a pretty solid idea of what to do: http://codepen.io/ggilmore/pen/247c888338937568d4642d8eb857f74a

In case Codepen ever goes down:

var largestHeight = 0;

$(‘.box’).each( function() {
var box = $(this);

var boxHeight = box.height();

if( boxHeight > largestHeight ) {
largestHeight = boxHeight;
}
});

$(‘.box’).height(largestHeight);

[taneis]

|

[Paulie_D]

I think you have implemented the script incorrectly.

Rather than adding it in between script tags before each li you should create a separate Js file and link it in the bottom of the page like you have so many others.

[Paulie_D]

>Limit line to 2 lengths max, allow for that height for all items, and cut off any text that goes onto a third line.

Ugh! That’s a horrible idea.

[Paulie_D]

If each word is an essential part of the description (as it is here) then yes, I think it’s a bad/horrible idea.

I think that having to change your content because of design issues is a bad idea in general.

[taneis]

|

[jurotek]

The problem lies in design. There are classes in html which are not defined in css therefore if we miss to repeat some values in inline style on repetitive classes we are bound to have problems. If the class prodbox would be defined in css and given needed height the whole problem would go away.

[Paulie_D]

I don’t see an insult….just an opinion/viewpoint on an idea. Perhaps I expressed it forcefully but that is just a reflection of the amount of the dislike.

>Then I take it you don’t agree with grid layouts that use set heights at all.

Actually, I don’t agree with them.

>I can actually think of dozens and dozens of instances where content needs to be limited in display length in one part of a site, shown in full on another.

I don’t know that this is the case here, perhaps it is.

However, if your **required** content won’t fit into the element that is designed to hold it without limiting it then the design is wrong (IMO).

I might have a div which is intended to hold product specifications regardless of how many individual specs there are, that being the case, I don’t want to restrict/limit the height, I want all of them to show.

[Paulie_D]

>If the class prodbox would be defined in css and given needed height the whole problem would go away.

We can’t do that, the height of the internal elements varies and might exceed the height of the element. A fixed height is precisely what (I feel) we should be avoiding. It’s inflexible and i don’t see that as an advantage.

[taneis]

|

[jurotek]

Right. Height on elements should really never be used. I am aware of that. The height of the element should be defined by it’s content. But there are times I don’t see nothing wrong with breaking the rule here and there.

[taneis]

|

[Paulie_D]

The equal height JS as a completly separate file should work; my guess is that there is a conflict somewhere.

[Author]

Posts