Advertisement:

Author Topic: CSS for search results breaking layout  (Read 266 times)

Offline spiros

  • Language Moderator
  • SMF Hero
  • *
  • Posts: 1,732
  • Gender: Male
  • A different point of view
    • spiros.doikas on Facebook
    • doikas on LinkedIn
    • @greektranslator on Twitter
    • Greek Translation
CSS for search results breaking layout
« on: March 13, 2019, 07:37:34 AM »
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.

Offline SychO

  • Lead Customizer
  • Sophist Member
  • *
  • Posts: 1,234
  • Gender: Male
    • SychO9 on GitHub
    • SychO
Re: CSS for search results breaking layout
« Reply #1 on: March 13, 2019, 07:48:38 AM »
the problem is the blockquote element, it's forcing the td's width
this is why I hate tables

Imazighen

Offline spiros

  • Language Moderator
  • SMF Hero
  • *
  • Posts: 1,732
  • Gender: Male
  • A different point of view
    • spiros.doikas on Facebook
    • doikas on LinkedIn
    • @greektranslator on Twitter
    • Greek Translation
Re: CSS for search results breaking layout
« Reply #2 on: March 13, 2019, 07:49:13 AM »
Oh thanks, I suspected as much, any ideas how to edit that?

Offline drewactual

  • Full Member
  • ***
  • Posts: 601
    • College Football Fan Site CFB51
Re: CSS for search results breaking layout
« Reply #3 on: March 13, 2019, 07:57:34 AM »
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:
Code: [Select]
style="width: 98%; max-width:99%"

and inline for the cell:
Code: [Select]
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.

Offline SychO

  • Lead Customizer
  • Sophist Member
  • *
  • Posts: 1,234
  • Gender: Male
    • SychO9 on GitHub
    • SychO
Re: CSS for search results breaking layout
« Reply #4 on: March 13, 2019, 07:58:16 AM »
I honestly can't think of anything except giving the blockquote a max-width
perhaps someone else knows a better a way.

Imazighen

Offline spiros

  • Language Moderator
  • SMF Hero
  • *
  • Posts: 1,732
  • Gender: Male
  • A different point of view
    • spiros.doikas on Facebook
    • doikas on LinkedIn
    • @greektranslator on Twitter
    • Greek Translation
Re: CSS for search results breaking layout
« Reply #5 on: March 13, 2019, 08:09:57 AM »
I tried max-width: fit-content which shrunk the blockquote, but had no effect on the actual table.

The table already has a class

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

I changed to

Code: [Select]
<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

Offline SychO

  • Lead Customizer
  • Sophist Member
  • *
  • Posts: 1,234
  • Gender: Male
    • SychO9 on GitHub
    • SychO
Re: CSS for search results breaking layout
« Reply #6 on: March 13, 2019, 08:17:20 AM »
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;

Imazighen

Offline spiros

  • Language Moderator
  • SMF Hero
  • *
  • Posts: 1,732
  • Gender: Male
  • A different point of view
    • spiros.doikas on Facebook
    • doikas on LinkedIn
    • @greektranslator on Twitter
    • Greek Translation
Re: CSS for search results breaking layout
« Reply #7 on: March 13, 2019, 08:20:33 AM »
Yes, that did the trick!