height


Susy gallery breaks height for display table and table-cell


I'm trying to get equal height columns on my responsive grid using the gallery mixin for SUSY. To do that, I set the container "display: table" and the column "display: table-cell". This works for me if I do not use the mixin, but fails as soon as I turn on the mixin. The mixin works if I have set the height in pixels, but not if I set the height using 100%;
I'm using:
susy (2.1.3) and
sass (~> 3.3)
This works with or without SUSY:
.ttable {
#include container;
padding: gutter();
#include clearfix;
.ttd {
#include gallery(3 of 12);
}
}
.ttable {
display: table;
height: 500px;
border: 1px solid #BF0D3E;;
}
.ttd {
display: table-cell;
background-color: #eee;
height: 500px;
}
This doesn't work with SUSY, but works with the mixin turned off:
.ttable {
display: table;
height: 100%;
border: 1px solid $fuschia;
}
.ttd {
display: table-cell;
background-color: #eee;
height: 100%;
}
The gallery mixin uses floats and margins to position elements, which won't work with table display. The first one works because the table styles are ignored, and the items are floated with a set height. If you want to use table styles to get equal-heights, you should leave out the gallery mixin, and use individual mixins/functions to set width/gutters instead (I think only inside and inside-static gutters will work with table display).
.ttd {
#include gutters;
display: table-cell;
background-color: #eee;
width: span(3 of 12);
}

Related Links

KO Grid Scrollbars not visible & Display issues
Increase scrollview's element height on clicking it
Using soft keyboard on libgdx for iOS and Android (hides textview)
Fine-uploader - Scaling picture by height
Zurb foundation framework - 100% height grid
Dynamically expanding CollectionView : Height of the CollectionView itself (not the items) changing when adding new items
IE 11 bug, div with height > 1,533,917px display negative computed height and doesnt render
iText setMinimumHeight on splitted cell
Apply Document Height to a div using Jquery
jQuery UI Dialog - Height always incorrect on first show, and vertical centering incorrect when page is scrolled
XSL-FO: Set fixed block height
Active Reports 7 - How to get the height of a detail section filled with data
increase keyboard height by setting XML dimen variables dynamically
Opencart Colorbox AUTO height and width?
To find height of a binary search tree
TableViewCell Auto Height on label text

Categories

HOME
xbox-live
dotnetrdf
elixir
shopify
mapbox-gl-js
extract
windows-store-apps
rfc
dataframe
avl-tree
aruco
height
facebook-javascript-sdk
outlook-web-addins
gatsby
onsen-ui2
finite-group-theory
mongodb-query
jacoco
uisplitviewcontroller
sql-tuning
jquery-terminal
chocolatey
ios10.3
mousewheel
ng2-dragula
aws-cognito
jconsole
apple-tv
nsmenuitem
logarithm
yosys
auditing
kong
bus-error
excel-2013
spring-data-neo4j
cortex-m3
autofill
websauna
devforce
ivy
twitter-bootstrap-2
entity-system
spring-profiles
transient
strstr
active-model-serializers
tableau-server
dimple.js
livescribe
ticker
cdk
hspec
uistackview
vst
easing
json-schema-validator
freefem++
fill
fortran90
cmocka
plone-3.x
vips
wikitext
evo
datasnap
oai
bridge
epl
hiera
ticket-system
start-job
c++-actor-framework
cpu-speed
adcolony
adaptive-compression
config-files
internal
mimosa
baucis
cdata
dynamic-binding
template-haskell
android-contextmenu
gdataxml
lync-server-2010
pitch
moq-3
symfony-2.0
shim
file-exists
text-services-framework
hobo
separation-of-concerns
hinstance
mysql-error-1045
datamember
charts4j
collect
pivotal-crm
msn
yajl
windows-controls
visual-studio-2010-beta-2

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App