Databases
StackOverflow2013
Postsdbo
POWhy does no-wrap width calculation change when it is nested inside of an element with a display of table?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy does no-wrap width calculation change when it is nested inside of an element with a display of table?
    primarykey
    data
    text
    <p>With our design we end up needing multiple columns to display titles with ellipsis which I don't expect to be a big deal but when they are nested inside of a <code>display: table</code> the calculations seem to be incorrect.</p> <p>The caveats are that we want a responsive layout so percentage widths are required (fixed widths would solve the problem). And our layouts do require a <code>display: table</code> much further up the tree and I can't removing it without a major refactor.</p> <p>If you remove the display everything works as I would expect:</p> <p><a href="http://cssdesk.com/gtsKp">EXPECTED</a></p> <p>But having that display causes the parent to take into account the child elements total width pre-truncated (but with nowrap taken into account). It is as if the initial rendering happens without an overflow being defined and adds it after the fact (but by that point the width calculation is way too large).</p> <p><a href="http://cssdesk.com/4gmJN">RESULT</a></p> <p>I can guess at why the rendering is breaking but I would like a more definitive answer about how the browser renders this... (Tested in Chrome/FF/Safari on Mac)</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USSciSpear
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POWhy does no-wrap width calculation change when it is nested inside of an element with a display of table?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POWhy does no-wrap width calculation change when it is nested inside of an element with a display of table?
      1. USJohn K
      1. VTFavorite
    3. VO
      singulars
      1. POWhy does no-wrap width calculation change when it is nested inside of an element with a display of table?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThis is a little bit messy, you are nesting a block element (ul) inside an inline element (span) and using display table directly inside something display table cell (non standard, so the final browser rendering becomes unpredictable), without using table-row... Could you explain what you really need?
      singulars
      1. POWhy does no-wrap width calculation change when it is nested inside of an element with a display of table?
      1. UScoma
    2. COThe example above is not related to my code; I just used a bunch of elements to demonstrate the behavior I am seeing (instead of defining a hand full of classes). `display: table` was added originally so multiple columns would end having the same dynamic height (no js). Anyway what I want is to understand is why we have this behavior around nowrap (I am not looking for a "how to make html look like my screen-shot", I can do that). Also I would not expect table-row to effect my example because I don't think it would effect the width calculations (but it was a little sloppy to leave out).
      singulars
      1. POWhy does no-wrap width calculation change when it is nested inside of an element with a display of table?
      1. USSciSpear
    3. COIt does behave the same in all browsers, so I do think it is an anticipatable behavior (and an expected pattern). My guess is that I just don't know enough about the lower level paint/layout cycles of the browser to understand the result.
      singulars
      1. POWhy does no-wrap width calculation change when it is nested inside of an element with a display of table?
      1. USSciSpear
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload