Comments (9)
Seems to not work even at just 2 levels of nesting:
from vanilla-framework.
Something very strange, we do have at least 2 nested levels defined in the css - see top right, but it doesn't work:
code fro this screenshot:
<section class="p-strip is-shallow">
<hr class="p-rule">
<div class="row">
<div class="col-3">
<h2 class="p-heading--2">Resources</h2>
</div>
<div class="col-8">
<div class="row">
<div class="col-3 col-medium-1">
<h3 class="p-heading--5" data-gtm-vis-recent-on-screen1014405_499="92" data-gtm-vis-first-on-screen1014405_499="92" data-gtm-vis-total-visible-time1014405_499="100" data-gtm-vis-has-fired1014405_499="1">eBook</h3>
</div>
<div class="col-medium-3">
<p data-gtm-vis-has-fired1014405_503="1"><a href="https://pages.ubuntu.com/Forrester_TAP_Report_2016.html">Forrester Research - get more from the cloud</a></p>
</div>
</div>
</div>
<div class="col-3 col-medium-4">
<h3 class="p-heading--5" data-gtm-vis-has-fired1014405_499="1">Whitepaper</h3>
<p data-gtm-vis-has-fired1014405_503="1"><a href="http://www-01.ibm.com/marketing/iwm/dre/signup?source=stg-web&S_PKG=ov47989&S_TACT=C47305CW">IDC - next generation applications on Ubuntu for LinuxONE/z</a></p>
<hr class="u-hide--large">
</div>
<div class="col-3 col-medium-4">
<h3 class="p-heading--5" data-gtm-vis-has-fired1014405_499="1">Webinar</h3>
<p data-gtm-vis-has-fired1014405_503="1"><a href="https://www.youtube.com/watch?v=WxTAd0zqruA">Discover the Cloud and scale out world of Ubuntu on IBM</a></p>
<hr class="u-hide--large">
</div>
</div>
</section>
from vanilla-framework.
@lyubomir-popov can you paste links to the pages where it actually happens, there maybe something else going on
Nesting does work on Vanilla grid: https://vanillaframework.io/docs/examples/patterns/grid/nested
from vanilla-framework.
ended up doing something else, so no actual pr with this.
from vanilla-framework.
@bartaz but just pasting the markup above into the vanilla nesting example (no css other than what is in vanilla), it still doesn't work:
from vanilla-framework.
think I found it - this works:
from vanilla-framework.
@lyubomir-popov this doesn't work because there is no col defined for desktop, so it likely assumes 12 column. It needs to define how many columns on desktop it uses.
from vanilla-framework.
Grid nesting works as expected, to any level with standard low level grid class names (row
, etc).
With shorthand row--25-75
nesting works on first level (row--25-75
> col
> row
), but fails on deeper levels. Issue seems to be caused by CSS specificity and conflict between styles applied by standard .col-X > .row
vs styles applied by row--25-75
.
So we can have a look at fixing this on deeper levels. But it may require making some strict assumptions on markup (such as nested row
is always direct child of it's parent col-
), because otherwise nested rows will not know which of parent cols should define it's size.
Exploration on CodePen: https://codepen.io/bartoszopka/pen/dyLWOEO
from vanilla-framework.
@lyubomir-popov BTW, by "3 levels of nesting" do you mean, having 3 grids:
row--25-75
> nested row
> another nested row
or actually 3 nested grids, 4 in total?
row--25-75
> nested row
> nested row
> nested row
(which seems like a lot)
from vanilla-framework.
Related Issues (20)
- p-equal-height-row: remove padding-bottom, make separators muted HOT 3
- Add left and right chevrons to vanilla icon set HOT 5
- Implement Expand and Copy functionality for Code snippets HOT 1
- Parent background highlights when clicking on child button in navigation dropdown item HOT 1
- Examples theme picker does not reflect selected theme HOT 2
- grid bug - default span of elements without col-* class inside row is hard-coded to 12 for desktop HOT 1
- The tabs component is being used with a single tab. AFAIK, this is not intended usage. Should the documentation disallow it? HOT 2
- The keyword 'searchfield-cancel-button' used on the 'appearance' property was deprecated and has now been removed. It will no longer have any effect. HOT 1
- Misleading icon import documentation HOT 1
- Remove distinction between horizontal rules with and without margin HOT 4
- Filter bots from contributors list
- extend navigation separators in the application layout navigation HOT 1
- Change icon alignment to `middle` when next to paragraph text
- p-modal__header need overflow:auto to prevent margin collapse HOT 1
- Intermittent color theme variation in Percy builds HOT 2
- Unnecessary capitalisation in tables HOT 2
- Modal component documentation page: Unexpected autoscroll/focus
- Application Layout / Default example's table tooltips don't allow proper overflow
- Sortable table has ascending and descending functionality/indicators swapped
- Article pagination component prev & next selectors use rotated chevrons
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 vanilla-framework.