Home › Forums › CSS › Test environment: How do you recommend in dealing with misalignment due to varied product name?
- This topic is empty.
-
AuthorPosts
-
July 16, 2013 at 11:39 am #46431taneisParticipant
|
July 16, 2013 at 11:42 am #143120Paulie_DMemberI think a JS equalheight script is required here pending browser acceptance/support of flexbox.
Or perhaps FitText.js
July 16, 2013 at 11:56 am #143124TheDocMemberThis 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);
July 16, 2013 at 1:39 pm #143161taneisParticipant|
July 16, 2013 at 1:46 pm #143164Paulie_DMemberI 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.
July 16, 2013 at 2:34 pm #143173Paulie_DMember>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.
July 16, 2013 at 2:50 pm #143176Paulie_DMemberIf 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.
July 16, 2013 at 3:12 pm #143178taneisParticipant|
July 16, 2013 at 3:40 pm #143190jurotekParticipantThe 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.
July 16, 2013 at 3:45 pm #143191Paulie_DMemberI 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.
July 16, 2013 at 3:47 pm #143192Paulie_DMember>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.
July 16, 2013 at 3:49 pm #143193taneisParticipant|
July 16, 2013 at 3:52 pm #143195jurotekParticipantRight. 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.
July 16, 2013 at 4:29 pm #143218taneisParticipant|
July 16, 2013 at 4:34 pm #143221Paulie_DMemberThe equal height JS as a completly separate file should work; my guess is that there is a conflict somewhere.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.