Comments (3)
Hello @thomasoldenburger
Can you make a codepen/jsfiddle-like example?
Thanx
from gridlex.
Hello @devlint
Very interesting. I did make a codepen and everything seems to work well in the codepen. When I want use it in my projects is doesn't seem to work. I tried the most basic setup and it is still not working. Am I doing something wrong here?
Basic project
index.html.zip
Codepen
https://codepen.io/anon/pen/bxzgGM
from gridlex.
<div class="welcome-cards grid-4-center-equalHeight">
<div class="col">
<div class="grid-1">
<div class="col-top">
<h6>Riparazioni</h6>
</div>
<div class="col-middle">
<img src="{% webpack_static 'images/icons/calzolaio.svg' %}" alt="riparazioni">
</div>
<div class="col-bottom">
<button type="button" name="button">scopri</button>
</div>
</div>
</div>
<div class="col">
<h6>Duplicazione Chiavi</h6>
<figure>
<img src="{% webpack_static 'images/icons/chiave.svg' %}" alt="riparazioni">
</figure>
<button type="button" name="button">scopri</button>
</div>
<div class="col">
<h6>Duplicazione Chiavi Auto</h6>
<figure>
<img src="{% webpack_static 'images/icons/chiave-auto.svg' %}" alt="riparazioni">
</figure>
<button type="button" name="button">scopri</button>
</div>
<div class="col">
<h6>Duplicazione Radiocomandi</h6>
<figure>
<img src="{% webpack_static 'images/icons/radiocomando.svg' %}" alt="riparazioni">
</figure>
<button type="button" name="button">scopri</button>
</div>
[...]
</div>
In the first col there is a new grid and equalHeight doesn't touch that grid.
Children of the other cols inherit the parent height. By inspecting h6
this is the rule that cause the problem:
[class*="grid-"][class*="-equalHeight"] > [class~="col"] > *, [class*="grid-"][class*="-equalHeight"] > [class*="col-"] > *, [class*="grid-"][class*="-equalHeight"] > [class*="col_"] > * {
height: 100%;
}
I had to override this rule setting all col's children elements to height: initial !important!
from gridlex.
Related Issues (20)
- Suggestion - alternate version that doesn't use the word 'grid' HOT 2
- Hiding columns HOT 4
- .grid-column-center does not center horizontally HOT 1
- Grid-*_sm-* compressing page
- How to support a number of columns other than 12 HOT 1
- 404 error by open via cdnjs. HOT 1
- Question: Is there a way to do different gutters at breakpoints?
- Changing to min-width (mobile first) inverts the *-hidden functionality
- Customize CSS class name HOT 2
- Add option to preserve outside gutter
- Add RTL Feature HOT 1
- col-first / col-last question
- Not working in Opera mini HOT 1
- Different gutters for each breakpoint
- Is this project still being maintained? HOT 7
- collision class names to an element that starts with modified grid name 'row' HOT 2
- class
- Columns overlapping on small screenwidth
- in.listformat javascript not get the point
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gridlex.