News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

CSS for search results breaking layout

Started by spiros, March 13, 2019, 07:37:34 AM

Previous topic - Next topic

spiros

I am trying to get the table below the Result Summary to wrap any text rather than extending on the right.

The results in the image are from the search differential.

SychO

the problem is the blockquote element, it's forcing the td's width
this is why I hate tables
Checkout My Themes:
-

Potato  •  Ackerman  •  SunRise  •  NightBreeze

spiros

Oh thanks, I suspected as much, any ideas how to edit that?

drewactual

personally, I'd assign that table (if you gotta use a table, and it wold be a major overhaul to lose it) a class so you can control it better in CSS. 

as it is I'd try to use (inline) :

for the table:

style="width: 98%; max-width:99%"


and inline for the cell:

style="min-height:50px;height:auto"


if you go with the response above, and IF you assign a CSS class to the table, you can use:

td.(whateveryouclassthetable) .blockquote {your css}

and again control it with exterior css.  if you don't use the .blockquote INSIDE the .tableclassyouassign rule you'll also jack with the block quote's in the forum.

SychO

I honestly can't think of anything except giving the blockquote a max-width
perhaps someone else knows a better a way.
Checkout My Themes:
-

Potato  •  Ackerman  •  SunRise  •  NightBreeze

spiros

I tried max-width: fit-content which shrunk the blockquote, but had no effect on the actual table.

The table already has a class

<table border="0" width="100%" cellspacing="1" cellpadding="4" class="bordercolor">
<tr class="titlebg">';


I changed to


<table border="0" width="100%" cellspacing="1" cellpadding="4" class="bordercolor" style="width: 98%; max-width:99%">
<tr class="titlebg" style="min-height:30px;height:auto">';


Without a change

SychO

it'll only work of you give it a specified max width like: max-width: 300px, additionally you should only do it on blockquotes contained within tables like so: table blockquote {}

but actually never mind, try this instead word-break: break-all;
Checkout My Themes:
-

Potato  •  Ackerman  •  SunRise  •  NightBreeze

spiros


Advertisement: