[CSS] Chrome negeert JS height property in multicolumn div

[JasperE]

Ik heb een dashboard gemaakt waarvan de inhoud over twee kolommen op een scherm moet passen, zonder te scrollen. De elementen op de pagina zullen dynamisch gebouwd worden en de afmetingen zullen telkens verschillen. Daarom heb ik voor een multicolumn div layout gkeozen, op deze manier worden de kolommen mooi gevuld en beslist de browser hoeveel elementen links en rechts passen op basis van de elementgrootte.

In de blokken laat ik ook tabellen zien, soms hebben deze tabellen erg veel rijen. Ik heb ervoor gekozen dat je binnen deze tabellen moet kunnen scrollen, om dat te bereiken heb ik de tabellen in een fixed-height container gezet. Door alleen de bovenste 10 rijen van een tabel te laten zien, passen de bovenste rijen van andere tabellen ook nog binnen 1 oogopslag op het scherm.

De containers met de tabellen erin heb ik dus in een multikolom div gezet. Javascript rekent voor mij uit hoe veel pixels iedere rij hoog is en kan op die manier uitrekenen hoe hoog de eerste 10 rijen zijn die ik zonder scrollen wil laten zien.


Dit is het resultaat:

Cascading Stylesheet:

    div.multiColumn {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
    ul.noBullets {
        list-style: none; 
        padding: 0;
        margin: 0 0.5rem 0 0.5rem;
        display: -webkit-box;
        display: box;
        
    }
    ul.noBullets > li {
        display: inline-block;
        width: 100%;
    }
    .scrollingTableDiv {
        overflow-y: auto;
    }

HTML:

    <div class="multiColumn">
      <ul class="noBullets" id="ulMultiColumn">
        <li>
          <div class="scrollingTableDiv"> <!-- this is the container -->
          <table class="scrollingTable" id="list1">
          ....
          </table>
        </li>
      </ul>
    </div>

JavaScript:

    $(".scrollingTable").each(function() {
        var table = this;
        maxRows = 10;
        var wrapper = table.parentNode;
        var rowsInTable = table.rows.length;
        var height = 0;
        if (rowsInTable > maxRows) {
            for (var i = 0; i < maxRows; i++) {
                height += table.rows[i].clientHeight;
            }
            wrapper.style.height = height + "px";
        }
    });

Een voorbeeld in JS Fiddle:

http://jsfiddle.net/m63LL112/4/

Deze fiddle werkt echter niet in chrome, daar wordt alles in een enkele kolom gezet met een heleboel whitespace eronder. Het werkt wel in internet explorer en firefox, waar er gewoon twee kolommen weergegeven worden.


Ik denk dat dit het probleem is:
Chrome respecteert de hoogte van de javascript-resized-container niet als het uitrekent hoe hoog ieder kolom is van <div class="multiColumn">. Daarom 'denkt' chrome dat de kolom hoger is dan in werkelijkheid het geval is (de hoogte van de tabel met alle rijen erin).
Dit leid ik af uit het feit dat er zoveel whitespace onder de eerste kolom zit, nadat met behulp van javascript de container op fixed-height wordt gezet.

Wat interessant is: Als ik met "inspect element" de CSS property "-webkit-column-count: 2" uit en aan vink, dan staat alles opeens wel goed. Dan rekent chrome dus wel met de goede hoogtes.
Als ik dit gedrag in JavaScript wil nabootsen door de multiColumn CSS klasse te verwijderen en opnieuw toe te voegen, dan geeft dit echter niet hetzelfde resultaat.

Wat ook interessnat is: Als ik de hoogte van de container in statische CSS instel (in plaats van de property dynamisch laat instellen door JS), dan werkt het ook!

Ik snap nu niet waarom mijn code niet werkt in chrome. (Werkt wel in andere browsers).
Is dit een bug?
Weet iemand een workaround?

[JasperE]

Blijkt een chrome bug te zijn.
https://code.google.com/p/chromium/issues/detail?id=297782

De oplossing was via JS met een delay the class terug te zetten:

code:

    var cols = $(".multiColumn").css("-webkit-column-count");
    $(".multiColumn").css("-webkit-column-count","1");
    setTimeout( function(){
        $(".multiColumn").css("-webkit-column-count",cols);
    },1);

[ Voor 8% gewijzigd door JasperE op 16-11-2014 21:31 ]

[_Thanatos_]

De oplossing was via JS met een delay the class terug te zetten

De *workaround*.

Dergelijke scripts wil ik niet tegenkomen in de code van mijn team. Om het zo maar uit te drukken

[JasperE]

_Thanatos_ schreef op maandag 24 november 2014 @ 03:46:
[...]

De *workaround*.

Dergelijke scripts wil ik niet tegenkomen in de code van mijn team. Om het zo maar uit te drukken

Helaas vergen de verschillen tussen browsers en het daardoor niet opvolgen van de standaarden soms dit soort lelijke workarounds. Een mooiere oplossing zie ik nog niet. Wie het weet mag het zeggen