logo
down
shadow

Foundation Equalizer is setting height to inherit?


Foundation Equalizer is setting height to inherit?

By : ahmedrakha
Date : November 22 2020, 10:33 AM
wish helps you The reason this happens is because your divs are stacked. You need to specify if you want them to remain the same height when stacked.
code :
$(document).foundation({
  equalizer : {
    // Specify if Equalizer should make elements equal height once they become stacked.
    equalize_on_stack: true
  }
});


Share : facebook icon twitter icon
Foundation 5 and Equalizer

Foundation 5 and Equalizer


By : Виталик Лысенко
Date : March 29 2020, 07:55 AM
To fix this issue I checked on version 5.2.2: you just cannot do this.
I looked at Foundation foundation.equalizer.js file, this function is simply not suited for equalize an equalizer inside an equalizer.
code :
vals = equalizer.find('[' + this.attr_name() + '-watch]:visible')
gulp-uncss with height equalizer in Zurb Foundation

gulp-uncss with height equalizer in Zurb Foundation


By : user7277
Date : March 29 2020, 07:55 AM
it should still fix some issue I was able to get gulp-uncss working using the ignore parameter in UnCSS.
Adding:
code :
ignore: [/^meta.foundation/, /f-topbar-fixed/, /contain-to-grid/, /sticky/, /fixed/]
Setting div to row height with foundation (equalizer)

Setting div to row height with foundation (equalizer)


By : Jagdish Bondre
Date : March 29 2020, 07:55 AM
wish helps you For this kind of layout I tend to use Masonry which plays nice with Foundation.
I'm not sure what environment you're using or if you're just using codepen but you were missing a few JS files that Foundation requires which I added to the pen:
code :
$(document).foundation();
<div class="row">
  <div class="show-for-large-up large-3 column full-width">
    <img src="http://placehold.it/1302x2604/FF3333">
  </div>
  <div class="large-9 column">
    <div class="row" data-equalizer data-equalizer-mq="large-up">
      <div class="large-4 column b full-width">
        <div class="grid-text" data-equalizer-watch>
          <div class="inner">
            <h3>A</h3>
            <p>text</p>
          </div>
        </div>
      </div>
      <div class="large-8 column full-width" data-equalizer-watch>
        <img src="http://placehold.it/2604x1302/00FFCC">
      </div>
    </div>
  </div>
  <div class="large-6 columns full-width">
    <img src="http://placehold.it/2604x1302">
  </div>
  <div class="show-for-large-up large-3 columns full-width last">
    <img src="http://placehold.it/1302x2604/FFFF99">
  </div>
  <div class="large-9 columns">
    <div class="row" data-equalizer data-equalizer-mq="large-up">
      <div class="large-8 columns full-width" data-equalizer-watch>
        <img src="http://placehold.it/2604x1302/FF9966">
      </div>
      <div class="large-4 columns b full-width">
        <div class="grid-text" data-equalizer-watch>
          <div class="inner">
            <h3>A</h3>
            <p>text</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
.grid-text {
  display: table;
  text-align: center;
  width: 100%;
  // no need to set the height here 
  // as it's set by data-equalizer
}

.grid-text .inner {
  display: table-cell;
  vertical-align: middle;
}
How to get the height of an element after using Foundation data-equalizer?

How to get the height of an element after using Foundation data-equalizer?


By : Jovifashion
Date : March 29 2020, 07:55 AM
it fixes the issue I'm trying to make a span the same height as another div which is in the same level of its great-grandparent. Here's the structure: , Have you tried callback?
code :
$(document).on('after-height-change.fndtn.equalizer', function(){
  $('.slider-left').height();
});
Using Foundation's Equalizer with HAML

Using Foundation's Equalizer with HAML


By : Vadim Zhenin
Date : March 29 2020, 07:55 AM
To fix the issue you can do (I'm assuming with my answer that you already know how to use HAML.)
You would render the classes as normal, but the data attributes have to be specifically hashed in to HAML. Luckily the HAML documentation I just found describes how to do this: http://haml.info/docs/yardoc/file.REFERENCE.html#html5_custom_data_attributes
code :
HTML5 Custom Data Attributes

HTML5 allows for adding custom non-visible data attributes to elements using attribute names beginning with data-. Custom data attributes can be used in Haml by using the key :data with a Hash value in an attribute hash. Each of the key/value pairs in the Hash will be transformed into a custom data attribute. For example:

%a{:href=>"/posts", :data => {:author_id => 123}} Posts By Author

will render as:

<a data-author-id='123' href='/posts'>Posts By Author</a>
Related Posts Related Posts :
  • TabIndex - hitting tab moves me to Address Bar - unable to work around this using Focus
  • Create JSON from string, to use as object
  • Jquery - How do I make ifModified:true work in .ajax request?
  • Jquery and create html on the fly
  • jQuery Validation not validating on button click
  • Jquery Draggable/Droppable appending multiple divs
  • jQuery selector not working properly. Possible Sizzle bug?
  • enable anchor in twitter bootstrap modal
  • jQuery keydown : Wait for previous event to finish
  • why magnific popup ajax box closes if clicked on content
  • JQPlot pie charts "jqplotDataClick" event fires multiple times
  • Show div as the page scrolls on div height
  • Keypress event for ajax call does not work
  • responsive/fluid jQGrid with Twitter Bootstrap
  • IE10 does not seem to fire load event
  • Remove tipTip tool tip
  • jquery datepicker changing unavailable dates in one instance
  • TableTools plugin export buttons are not working
  • Prepopulate jquery token input textbox
  • Open a fancybox link with ajax
  • Getting jQuery and AngularJS content assist / auto-complete in eclipse for standalone HTML "file"
  • TR alternate background colour with unequal number of TD
  • DATATABLE jQuery TH and TD alignment
  • Jquery UI Convert Select's to Range Slider
  • Change text in text field according to link that has been clicked
  • Animate addClass + removeClass transitions?
  • knockout ajax call data-BIND
  • How do I create a variable with a number based on an element's number position using jquery?
  • Prevent fixed position element from flickering during jQuery animation
  • points are not visible clearly in nvd3 ghaph
  • How to write a regular expression for IP address format
  • Animate 3 DIVs from right to left when page is loading.
  • How to pivot columns in free jqgrid 4.15.4
  • the jquery method works fine but when made as a function not working
  • Show/hide text doesn't work when targeting link within div
  • multiple autocomplete search input fields
  • Display image in cell using Jquery jTable
  • jQuery and Wordpress - Scripts not working
  • flickering when mouse over, .hover() show/hide div(s)
  • Using Django's JSONResponseMixin to respond to AJAX requests
  • Unable to render charts using Wicked PDF
  • Style to dynamically created elements
  • hover not working for items in list
  • Keep server session alive automatically based on activity / input, using JQuery
  • jQuery load() taking a long time
  • Change / Exchange values in textboxes on text change in jquery
  • Unslider arrow code overriding slider options
  • what is the traditional way of sorting search results?
  • Do the action when the DIV comes in the display area of the browser with jQuery
  • jQuery slideshow overlapping CSS ribbon
  • JQuery animate function dont work
  • problems charts jquery highcharts
  • How to reset the select box values in Jquery sumoselect Multi select plugin
  • css absolute position on top of another element
  • How use jQuery String variable in html body
  • Get a row from table in view on modal bootstrap using codeigniter
  • How to make the effect of a div that covers an other div when scrolling?
  • Data binding using a button
  • How do i replace all dot in string to Underscore?
  • grab non-sibling element with jquery
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org