Zurb Foundation-Equalizer funktioniert nicht

Ich versuche, ein Formular anzuzeigen, in eine "Karte" - Ansicht und bin nutzen wollen, die Stiftung equalizer, um die divs die gleiche Höhe haben, aber aus irgendeinem Grund es nicht funktioniert mit einem div, das größer als die anderen.

Meine Vermutung wäre, dass es hat etwas zu tun mit der Verwendung von php in den Behältern, aber ich habe nichts gefunden, im Zusammenhang mit, dass auf Ihrem docs-Seite.

Wenn jemand zeigen kann, wo ich schief ging oder wenn Sie wissen, für bestimmte, dass dies einfach nicht funktionieren, mit Foundation, ich würde schätzen Ihre Eingabe! Danke!

HTML:

<div class="row" data-equalizer>
    <div class="small-6 columns" data-equalizer-watch>          
       <fieldset><legend>Order Information</legend>
          <?php
            echo "Number of Guests: ". $order_array['guestNumber' . $x].'<br>';
            echo "Food: ". $order_array['food' . $x].'<br>';
         ?>     
       </fieldset>  
    </div>
<div class="small-6 columns k" data-equalizer-watch>
    <fieldset><legend>Location</legend>
    <?php
         echo "Order Name: " .  $order_array['orderName'] . '<br>';
     ?>
    </fieldset> 
</div>

</div>
Sind Sie einschließlich aller Fundament oder nur bestimmte Dateien. Haben Sie versucht, alles, was in diesem Abschnitt: Verwenden der Javascript - auf der Grundlage docs? Sie konnte nur fehlt eine JS-Datei. Es sieht auch wie deine divs nicht richtig geschlossen, etc...
Ich bin mit all der Stiftung. Mein Fundament ist in Ordnung, die sonst überall, aber ich werde überprüfen, um sicherzustellen, dass alle Dateien da sind, dass ist ein großer Punkt. Und ja, ich habe vergessen zu zählen, die Letzte div-aber die haben es in meine eigentliche Datei.
Doppelt geprüft und alle Dateien sind da.
Ich lief in das gleiche Problem einen Monat oder zwei zurück. Ich glaube, wir reichten einen pull-request zu beheben, eine Stiftung Problem, aber ich bin mir nicht sicher, ob es übertragen wurde.
Ja, viele Menschen sind unzufrieden mit Equalizer. Mein Rat wäre, die Nutzung einer von einer Vielzahl von anderen gleicher Höhe Skripte schwimmt es.

InformationsquelleAutor mario | 2014-05-20

  1. 4

    Mein Erster Gedanke, ist, dass der Equalizer funktioniert und es macht sowohl <div class="small-6 columns">s die gleiche Höhe. Es sei denn, Sie haben einige visuellen Hinweis, um Sie zu unterscheiden, wie die verschiedenen Farben im hintergrund oder Rand-Einstellung kann es schwierig sein, zu sagen, wenn der Equalizer funktioniert einwandfrei. Bitte beachten Sie, dass ich diesen Fehler gemacht vor.

    Wenn Ihre Absicht war es, die <fieldset>s die gleiche Höhe, Sie würde verschieben müssen, um die data-equalizer-watch von der <div class="small-6 columns">s zu den <fieldset>s. Dies würde auch ermöglichen es Ihnen, visuell zu sehen, ob der Equalizer funktioniert, weil der <fieldset>'s Grenze.

    Habe ich diese codepen,http://cdpn.io/igDoI, mit zwei Beispielen. Ist dein code oben Hinzugefügt, wo ich mit einer gestrichelten Grenze zu beiden <div class="small-6 columns">s. Das andere Beispiel ist dein code oben, wo ich zog die data-equalizer-watch zu den <fieldset>s.

    Ich hoffe, das hilft,

    Dies ist eine alte Antwort, aber Sie bekommen meine Stimme. Ich habe meinen Kopf kratzen, um herauszufinden, warum nur die Hälfte von meinem Equalizer Bereichen tätig waren und aus diesem Grund.
    Ich stehe vor dem gleichen Problem, aber nach dem Lesen unzähliger Artikel online, in dem ich immer noch nicht bekommen kann es richtig. Überprüfen Sie diese pen : codepen.io/kchetan92/pen/JREBzB , es kann nicht einfacher als diese.
    Wenn Sie nicht finden eine Lösung für Ihr Problem sollten Sie versuchen, die Veröffentlichung einer neuen Frage.

    InformationsquelleAutor Adam Huffman

  2. 8

    Meine Lösung (vor der Suche nach einer effizienteren Lösung mit einem anderen plugin, das ich empfehlen) war, wickeln Sie die Stiftung init, zum Beispiel so:

    $(window).on('load', function () {
  $(document).foundation();
});
    Die anderen plugin?
    Dies hat den trick für mich, danke.

    InformationsquelleAutor cameron

  3. 7

    Equalizer keine Wirkung, wenn die Elemente stapeln (wenn die offset().top Wert aller von Ihnen nicht gleich ist) und Sie eingestellt haben equalize_on_stack: false. Versuchen Sie, diese Konfiguration auf Ihrem Haupt-js-Datei:

    $(document).ready(function() {
  $(document).foundation({
    equalizer : {
      //Specify if Equalizer should make elements equal height once they become stacked.
      equalize_on_stack: true
    }
  });
});

    InformationsquelleAutor Quinn Comendant

  4. 5

    Mein Problem war, dass ich die Initialisierung der Stiftung js, bevor die Seite war fertig geladen. Stellen Sie sicher, Sie werden Verpackung Ihrer Stiftung Initialisierer in der jQuery - ready() Funktion:

    $(function() {
  $(document).foundation();
});
    Oder fügen Sie einfach Ihren javascript-Dateien unterhalb des Körpers. Diese Weise das dom geladen ist, bevor Sie rufen Ihre js-Datei, was bedeutet, dass der dom geladen ist, bevor Sie die load-Stiftung.

    InformationsquelleAutor user1445843

  5. 1

    Nicht sicher, ob dies auf Sie zutrifft, aber wenn Sie mit Stiftung equalizer müssen Sie sicherstellen, dass die folgenden, für jeden Vorfahren von Elementen mit "Daten-equalizer-Breite" , dass auch Kinder des Elements mit der "Daten-equalizer" Attribut:

    • Keine Grenzen
    • Keine Polsterung
    • Keine Ränder

    Dies nicht wirklich in der API, aber diese Eigenschaften wirken sich auf die Berechnung der Höhe der equalizer, und kann manchmal dazu führen, Sie falsch zu gehen.

    Auch, Sie muss sicherzustellen, dass die Bedienelemente "ausgeglichen" werden sichtbar, wenn der Equalizer-code aufgerufen wird. Also, wenn Sie equalizer-Registerkarte, die versteckt auf der Seite geladen, müssen Sie die trigger-equalizer wieder, wenn das Teil sichtbar wird. Sie können dies tun, indem Sie die Auslösung ein resize-Ereignis auf das window-Objekt.

    InformationsquelleAutor binderbound

  6. 0

    Initialisieren der Stiftung, nachdem die Seite war fertig geladen, funktionierte für mich. Ich verbesserte diese Lösung durch die Initialisierung nur equalizer nach dem laden. So die anderen Sachen können beginnen, auf "fertig".

    jQuery(window).on('load', function () {
   var element = jQuery('[data-equalizer]');
   var elem = new Foundation.Equalizer(element);
});

    InformationsquelleAutor tis

Schreibe einen Kommentar