Databases
StackOverflow2013
Postsdbo
POWebkit (Chrome, Safari) browsers fail to update CSS after JQuery addClass
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWebkit (Chrome, Safari) browsers fail to update CSS after JQuery addClass
    primarykey
    data
    text
    <p>I built a small example of the behavior. Basically, I have a page with an expandable pane on the left side. When it expands, Chrome seems to fail to update the CSS.</p> <p><a href="http://jsfiddle.net/HUHqA/2/" rel="nofollow">http://jsfiddle.net/HUHqA/2/</a></p> <p>In this example, you click on the green rectangle which expands the left panel. A css class is removed through JQuery to the panel on the right. It appears that CSS class isn't applied until there's some kind of a layout action. For example if you resize the page a tiny bit or if you open up developer tools and uncheck some random CSS. When you do that action, the edge of the blue rectangle jumps to where it should be.</p> <p>It looks like it might be related to the !important in one class overriding the other class.</p> <p>Initially it has these two classes:</p> <pre><code>#main-content-right{ min-width:200px; padding:0 15px 0 100px; margin-bottom:10px; z-index:1; min-height:300px; } .main-content-collapse-right{ padding:0 150px 0 29px !important; } </code></pre> <p>Then the latter is removed. </p> <p>If you uncomment the line in my hack function, that fixes it. I basically have two questions.<br> 1) Is this a bug in the browser itself? 2) Is there a better solution than to just toggle some random css?</p> <p>EDIT: It looks like the answer to question 1 is yes: <a href="https://bugs.webkit.org/show_bug.cgi?id=93876" rel="nofollow">https://bugs.webkit.org/show_bug.cgi?id=93876</a> with simplified demo: <a href="https://bug-93876-attachments.webkit.org/attachment.cgi?id=158063" rel="nofollow">https://bug-93876-attachments.webkit.org/attachment.cgi?id=158063</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USAndrew
    1. USAndrew
    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. This table or related slice is empty.
    1. COIt works the same for me in chrome either way. Even removing the function `webkitHack`, it works the same.
      singulars
      1. POWebkit (Chrome, Safari) browsers fail to update CSS after JQuery addClass
      1. USEsailija
    2. COThere's a line in the actual hack function that is commented out. It sets the padding to 9px.
      singulars
      1. POWebkit (Chrome, Safari) browsers fail to update CSS after JQuery addClass
      1. USAndrew
    3. COAlso of note, I had to change jQuery to 1.7.2 to get it to work on my home computer.
      singulars
      1. POWebkit (Chrome, Safari) browsers fail to update CSS after JQuery addClass
      1. USAndrew
 

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