How to show ccs grid guides overlay with Javascript - javascript

how do I display the css grid guides, I want to color each column with an overlay color, I saw the source here https://github.com/UseAllFive/css-grid-guides
how to use in plain HTML/CSS/JS
Show grid guide overlay like this
this is my code :
.grid-12 {
width: 100%;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 1.5rem;
}

if you want to learn css grid, I recommend that you use mozilla firefox because in the devtools there is a grid, which can display grid lines that can help in learning grids
or you can see my repo, i use css grid
css grid

Related

How can I animate grid box change with angular BrowserAnimationsModule?

To describe my issue, I will start from the roots to explain what I am trying to do, and why I decided to use Grid Box for this, let's start off with two wireframes:
My layout is built up from two containers; the body and the sidebar. Don't think of it as this is the whole website, this is just a component.
The sidebar contains two elements, notes and chat.
Notes & chat elements can be mini-sized, but once it is mini-sized, the second part of the left body container will get wide and take the place that the sidebar used to take at it's bottom space, like in the example below:
So after researching a bit I couldn't find any other solution besides having 2 different components for the second-data part that needs to get wider, or just use a Grid Box, however, I must animate the side bar and the second part of the data with a transition of it's width changing.
There is an angular POC example I have created with Grid Box to achieve what I need without animation:
https://stackblitz.com/edit/angular-ivy-7tucsx?file=src/app/app.component.html
Is it possible to achieve this animation with grid box by just adding the .closed class to my .container like in the example POC?
There is a CSS only solution that can help you.
In the snippet, hover the container to make the bottom div expand.
The trick is to use a 3 column grid, and an auxiliar element that grows / shrinks:
In production , the trick element would have an height of 0, and be invisible.
.container {
display: grid;
border: solid 1px red;
grid-template-columns: 1fr auto auto;
grid-template-rows: 100px 100px 10px;
transition: all 3s;
width: 500px;
}
#right {
background-color: yellow;
width: 200px;
grid-column: 2 / span 2;
}
#bottom {
background-color: lightgreen;
grid-column: span 2;
}
#trick {
background-color: tomato;
grid-column: 2 / 3;
width: 0px;
transition: width 3s;
}
.container:hover #trick {
width: 200px;
}
<div class="container">
<div id="left">L</div>
<div id="right">R</div>
<div id="bottom">B</div>
<div id="trick">T</div>
</div>
The idea is to use animations provided by angular. So you need to add following in app.module.ts:
imports:
[
BrowserAnimationsModule,
BrowserModule
]
Add the animations to that #component decorative:
animations: [
trigger('<animationName>' [<definitions>])
]
In html, apply animation to required div:
<div [<#animationName>] = '<state-definitions-name>'></div>
[UPDATED]
The above is abstract code. For detailed code, I'm attaching my stackblitz code: https://stackblitz.com/edit/angular-ivy-zs1x59
Change height, width respectively as required in #component's animations

Angular cdk-virtual-scroll with wrap and responsiveness

I am looking at the cdk-virtual-scroll and hoping I can use this in my existing application, where I have a view containing items, who's width varies depending on screen size (eg phone vs tablet etc)
Forking this example, I have a modified version here.
My modifications are on App/cdk-virtual-scroll-overview-example.css, where I have changed the css to contain the following..
.example-viewport {
height: 200px;
width: 90%;
border: 1px solid black;
display: flex;
flex-direction: row;
flex-wrap: wrap
}
.example-item {
height: 50px;
background: red;
margin:0.5px;
width: 33%
}
#media screen and (min-width: 360px) {
.example-item {
width: 45%
}
}
So my aim here is have the items showing either 2 or 3 a row depending on the screen size. However, as can be seen, they do not seems to wrap at all...
I have used flex here (have I done this wrong?), but any css to get it working will do (perhaps flex grid, or other)
Is this possible using the cdk-virtual-scroll?
Thanks in advance
You could workaround it by chunking your items according to the number you want per row and then within the virtual scroll add ngFor to iterate each chunk. Then you can display flex on chunk div.

CSS grid: load multiple elements in one cell with a scrollbar [duplicate]

TL;DR: Is there anything like table-layout: fixed for CSS grids?
I tried to create a year-view calendar with a big 4x3 grid for the months and therein nested 7x6 grids for the days.
The calendar should fill the page, so the year grid container gets a width and height of 100% each.
.year-grid {
width: 100%;
height: 100%;
display: grid;
grid-template: repeat(3, 1fr) / repeat(4, 1fr);
}
.month-grid {
display: grid;
grid-template: repeat(6, 1fr) / repeat(7, 1fr);
}
Here's a working example: https://codepen.io/loilo/full/ryXLpO/
For simplicity, every month in that pen there has 31 days and starts on a Monday.
I also chose a ridiculously small font size to demonstrate the problem:
Grid items (= day cells) are pretty condensed as there are several hundreds of them on the page. And as soon as the day number labels become too large (feel free to play around with the font size in the pen using the buttons on the upper left) the grid will just grow in size and exceed the page's body size.
Is there any way to prevent this behaviour?
I initially declared my year grid to be 100% in width and height so that's probably the point to start at, but I couldn't find any grid-related CSS properties that would've fitted that need.
Disclaimer: I'm aware that there are pretty easy ways to style that calendar just without using CSS Grid Layout. However, this question is more about the general knowledge on the topic than solving the concrete example.
By default, a grid item cannot be smaller than the size of its content.
Grid items have an initial size of min-width: auto and min-height: auto.
You can override this behavior by setting grid items to min-width: 0, min-height: 0 or overflow with any value other than visible.
From the spec:
6.6. Automatic Minimum Size of Grid
Items
To provide a more reasonable default minimum size for grid items, this
specification defines that the auto value of min-width / min-height also applies an automatic minimum size in the specified axis to grid items whose overflow is visible. (The effect is analogous to the automatic minimum size imposed on flex items.)
Here's a more detailed explanation covering flex items, but it applies to grid items, as well:
Why don't flex items shrink past content size?
This post also covers potential problems with nested containers and known rendering differences among major browsers.
To fix your layout, make these adjustments to your code:
.month-grid {
display: grid;
grid-template: repeat(6, 1fr) / repeat(7, 1fr);
background: #fff;
grid-gap: 2px;
min-height: 0; /* NEW */
min-width: 0; /* NEW; needed for Firefox */
}
.day-item {
padding: 10px;
background: #DFE7E7;
overflow: hidden; /* NEW */
min-width: 0; /* NEW; needed for Firefox */
}
jsFiddle demo
1fr vs minmax(0, 1fr)
The solution above operates at the grid item level. For a container level solution, see this post:
Who does minmax(0, 1fr) work for long elements while 1fr doesn't?
The previous answer is pretty good, but I also wanted to mention that there is a fixed layout equivalent for grids, you just need to write minmax(0, 1fr) instead of 1fr as your track size.
The existing answers solve most cases. However, I ran into a case where I needed the content of the grid-cell to be overflow: visible. I solved it by absolutely positioning within a wrapper (not ideal, but the best I know), like this:
.month-grid {
display: grid;
grid-template: repeat(6, 1fr) / repeat(7, 1fr);
background: #fff;
grid-gap: 2px;
}
.day-item-wrapper {
position: relative;
}
.day-item {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
background: rgba(0,0,0,0.1);
}
https://codepen.io/bjnsn/pen/vYYVPZv

How to change the width of elements based on container?

Hi in my website I have one container with Registration form elements. Now I want to change the size of labels, Text fields and button based on the container size.
My requirement is The textboxes should be on the right of the labels (and expand up to 40px before the right border of the grey container - 40px is the container's padding anyway) when the width of the screen is >=1024px .
If the width of the screen is <1024, the textboxes should be under the labels and their width should be as long as that of the grey container minus the container's padding on the left and on the right side.
Please suggest me the way to do this.
I have also attached a screenshot:
Here background with grey color is the container in website.
.dnnForm .dnnFormItem {
clear: both;
width: 100%;
display: block;
position: relative;
text-align: left;
}
#media screen and (min-width: 1025px)
#rox-custom-box-06 .dnnForm {
width: 100%;
}
#media screen and (min-width: 1025px)
#rox-custom-box-06 .dnnFormInput, .password-strength-container, .password-strength {
display: inline-block;
width: 35% !important;
}
To accomplish this you are going to need to think a bit more granular in nature with your solution.
The Container &/or form will need to have specific CSS classes applied so that you can then make things work. You might also look at using Bootstrap or similar in your skin to assist as it looks like you are trying to make a responsive design, but without having any supporting framework.
Otherwise, a more detailed example with your HTML could assist.

Responsive height of slider div

I have a problem with swiper slider and I need your help.
Here is my code: http://jsfiddle.net/2Xt7H/4
I want the comm_image_div div which is the slider div to take the height of the image and not to be fixed (200px) as it is in my example.
I prefer to do this with css, but if this isn't possible then the alternative is javascript.
Try using display: inline-block; and delete the height: 200px; in #comm_image_div
Using display: inline-block; will change the div's height and width(if they are not specified) according to its content.
UPDATE:
I used height: 100%; in #comm_image_div and img.comm_image_big
http://jsfiddle.net/2Xt7H/7/

Categories

Resources