[#19241] - [4.0] CSS-Grid improvements
- Fixed in Code Base
- 2 Jan 2018
- Medium
- Build: 4.0-dev
- # 19241
- Diff
- C-Lodder:grid
User tests: Successful: Unsuccessful:
Pull Request for Issue #19224
Summary of Changes
This PR tweaks the css-grid by altering the scope and ensuring we don't target child elements on the <body>, but instead target a class.
This means that we don't affect any potential elements that get appended to the DOM such as alerts, modals, tooltips, etc.
Testing Instructions
- In the front-end, go to Template Settings
- Click the "Select" button on the Media field
A modal will appear and the dark backdrop should be 100% width of the viewport
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Front End Templates (site) |
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/19241.
| Status | Pending | ⇒ | Ready to Commit |
Ready to Commit after two successful tests.
wilsonge
- | Status | Ready to Commit | ⇒ | Fixed in Code Base |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2018-01-02 02:33:13 |
| Closed_By | ⇒ | wilsonge | |
| Labels |
Added:
?
|
||
@C-Lodder I just struggled with a customisation of cassiopeia and wondered why you gave the elements in the
classes named grid-child but it's not even a child of a grid. Also, the bottom site grid has a quite unusual and on the first look not flexible structure.". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". comp comp comp comp ." ". side-r side-r side-r side-r ." ". side-l side-l side-l side-l ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b ."
grid-template-columns: [full-start] minmax(0,1fr) [main-start] repeat(4,minmax(0,19.875rem)) [main-end] minmax(0,1fr) [full-end];
Why the dot areas? Why not just fractions? Can you explain the "reason why" behind it so it's easier to understand what you were trying to achieve and easier to change it?
Thank you :-)
Hi @coolcat-creations.
I didn't create the initial grid for this template, so I don't know off the top of my head why the dot notation was used over fractions. If I rightly remember, CSS Grid was very new back in 2017, so perhaps there were some limitations back then.
As for the grid-child class, which elements are you referring to? Back in 2017, the parent grid element was the <body> element, but has since been changed.
Haven't touched or ever used Casseopeia, but would have thought the grid layout could be improved.
Thank you, means for me that the grid is quite "broken" and needs refactoring - but will be hard without b/c breaks ... :-/
Also, the bottom site grid has a quite unusual and on the first look not flexible structure. ... Why the dot areas? Why not just fractions?
Is that because of the way to implement dynamic content?
https://www.joomla51.com/blog/item/joomla-css-grid-and-dynamic-content
I have tested this item✅ successfully on 334fa73
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/19241.