Databases
StackOverflow2013
Postsdbo
POA recent Chrome update broke button layout
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POA recent Chrome update broke button layout
    primarykey
    data
    text
    <p>Just today, whatever Google changed in Chrome caused it to incorrectly display a sequence of buttons that are floated to the right.</p> <p>Note: the content of the page is loaded dynamically via AJAX.</p> <p>Before:</p> <p><img src="https://i.imgur.com/uYfZQoy.png" alt=""></p> <p>Today:</p> <p><img src="https://i.imgur.com/f0Zwcsw.png" alt=""></p> <p>Here's where it gets strange. These buttons are contained in a <code>div</code> that only has <code>float: right;</code> applied to it (the buttons are <code>display:inline-block</code>). I tried changing the <code>div</code> to a <code>span</code> <em>in the inspector</em>. That fixed the problem, so I tried replacing the <code>div</code> with a <code>span</code> in my code. However, the problem remained when I refreshed the page. I went into the inspector, and changed the container back to a <code>div</code>, and that fixed the problem again. However, obviously, changing it back to a <code>div</code> in my actual code and refreshing the page caused the problem to come back. </p> <p>Only changing the container from a <code>div</code> to a <code>span</code> or from a <code>span</code> to a <code>div</code> <strong>in the inspector</strong> fixes the issue.</p> <p>Also, when the page first loads, it seems like the buttons are in the correct position for a brief flicker of a second before they are messed up.</p> <p>I'm not sure whether this is a bug in the newest Chrome build (I'm using Version 31.0.1650.57 m) or otherwise. I'm not sure what the best way to fix this is. </p> <p>This issue is not present in Firefox or IE, just Chrome, and not before today.</p> <p>Some relevant HTML:</p> <pre><code>&lt;div class='right'&gt; &lt;div class='button'&gt;Button ...&lt;/div&gt; &lt;div class='button'&gt;Turn Away&lt;/div&gt; &lt;div class='button'&gt;More button! ...&lt;/div&gt; &lt;div class='button'&gt;About&lt;/div&gt; &lt;div class='button'&gt;Logout&lt;/div&gt; &lt;/div&gt; </code></pre> <p>Relevant CSS:</p> <pre><code>.right { float: right; } .button { display: inline-block; } </code></pre> <p><a href="http://fiddle.jshell.net/83cLt/" rel="nofollow noreferrer">http://fiddle.jshell.net/83cLt/</a> (note: I am not able to reproduce the error on JSFiddle even by copying all of my HTML and CSS)</p> <p><strong>UPDATE</strong></p> <p>I found the source of the problem. The buttons with "..." were buttons that had an associated dropdown menu created dynamically. This dropdown menu was in the form of a div added after the button (button, div.dropdown, button, div.dropdown, button, button). This <code>div</code> was hiding by having a <code>max-height</code> of <code>0</code>. For some reason, in Chrome, if elements are added dynamically that have a height of 0 (even if they are <code>inline-block</code>), they now do not load properly. To fix the issue, I added a <code>display:none</code> to the <code>div.dropdown</code> and change that back and forth when the dropdown is showing or not. </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCezary Wojcik
    1. USCezary Wojcik
    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
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COYour code, please.
      singulars
      1. POA recent Chrome update broke button layout
      1. USisherwood
    2. COI added in some relevant code, but the gist of it was already described in the question.
      singulars
      1. POA recent Chrome update broke button layout
      1. USCezary Wojcik
    3. COYes, but that's a slow and non-mobile way to present your code. Thank you.
      singulars
      1. POA recent Chrome update broke button layout
      1. USisherwood
 

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