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
Related
I want to have a frosty-glass effect on a div. There are few examples over internet on how to achieve this, however most of them say that, you have a background image for your body then you have a small div over it and want to have frosty-glass effect for that small div.
However my case is slightly different as I dont have any background image rather some text (or any other DOM for that matter) under a div, there is another div which covers that 1st div partially and I want to have frosty-glass effect on that 2nd div. Below is a little example
HTML
<div class = 'parent'>
<div class = 'top'>
</div>
<div class = 'bottom'>
Some div...
</div>
</div>
CSS
.parent {
height: 200px;
width: 100%;
}
.top {
height: 80px;
width: 100%;
position: fixed;
top: 0;
background-color: rgba(0,0,0,.2);
}
.bottom {
height: 150;
width: 100%;
margin-top: 10px;
}
I am looking for to have the frosty-glass effect for div with class top which is actually fixed positioned.
The Codepen example - https://codepen.io/Volabos/pen/RwWxwQd
Is there any way to have that effect using CSS?
Thanks for any pointer
Use the css filter property, eg. filter: blur(3px);.
Find a demo based on yours here.
I am currently struggling with a site and I have no idea where to start on this bit of code.
I have a container div, .overflow-block1, which has 4 image divs in them, .block-container. These are automatically pulled in via php and JS and there are 54 image blocks in this container.
Currently I am using JS to add a class to the .overflow-block which increases its width to 25750px to fit all the image blocks next to each other in a single row.
The problem with this is that as content gets added they now need more width so I have to manually add more width, but content will be added regularly and I do not wish to spend the rest of my life changing the width of this block every time content is added.
Can anyone point me in the right direction to use JS to automatically set the container width to fit all the image blocks?
Thank you
As I've written on a comment, here is a solution only with CSS.
#parent {
overflow-x: hidden;
width: 190px;
}
#container {
white-space: nowrap;
border: 1px solid #f0f;
width: 190px;
overflow-x: visible;
}
#container>div {
background: #ccc;
width: 50px;
height: 50px;
display: inline-block;
/* for IE6/7, remove if you don't need to support those browsers */
*display: inline;
zoom: 1
}
<div id="parent">
<div id="container">
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
<div>eee</div>
<div>fff</div>
</div>
</div>
I'm working on a project in school where I want some sort of slideshow on the webpage. I've gotten to a place where I'm not sure how to proceed. Here is what I got so far:
body {
background-color: #252525;
}
#wrapper {
width: 90%;
margin: 0 auto;
padding: 2%;
}
#images {
width: 100%;
height: 300px;
text-align: center;
overflow: auto;
}
#container-1 {
display: inline-block;
background-color: #fff;
width: 100px;
height: 300px;
transition: .5s ease-in-out;
}
#container-1:hover {
background-color: #189fff;
width: 80%;
height: 300px;
}
.container {
width: 100px;
height: 300px;
background-color: #fff;
display: inline-block;
transition: .5s ease-in-out;
}
.container:hover {
background-color: #189fff;
width: 80%;
height: 300px;
}
<div id="wrapper">
<div id="images">
<div id="container-1"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
</div>
</div>
What I want this to do is for whenever I hover one of these images (or divs if you will), it will expand and show the whole image. There are two images, one clipped, and one that is the whole image. (Maybe thats a bad thing?)
The class container is just temporary to get an image of how it will look and give the other divs a background color. In #container-1:hover, the width is not the exact one I'm going to use. It might differ from the images I'm using.
Also if I don't use overflow: auto; the other divs will be pushed below the others, which is something I don't want.
The code in a way works as I want it. The only problem I got really is that when I hover one of the divs, it will push the other ones to the side, creating a conflict. Is there a way to make that not happen? Maybe a way to reduce the width of the other divs when the current div is being hovered on?
I just recently started with JavaScript so I'm nowhere close experienced with it, but I'm open for suggestions, but we are not allowed to use jQuery or anything like that sadly.
Here is a fiddle of it: jsfiddle
Your problem is that when one of the elements is hovered and expands, the sum of all elements exceeds the width of the container, and the one or two last elements are pushed below the others (into the next line).
To avoid that using only CSS, you have to choose width values where three default elements and one expanded (hovered) elements together don't exceed 100% of the container, like in this fiddle:
https://jsfiddle.net/kju94h1n/
To make non-hovered elements narrower when another element is hovered would require Javascript.
I have a nav bar which has a string of text for a link that opens a dropdown. The parent of this link has overflow: hidden to allow me to truncate the string incase it gets too long. However, I want the dropdown to be positioned absolutely underneath and centered regardless of the width of the parent. Since I'm using overflow: hidden, the dropdown gets cutoff. I want to keep the positioning of the dropdown as well as the overflow properties.
Is there a CSS fix for this? I know I can't ignore the parent's overflow property, but I'd rather not use position: fixed and manipulate margins with JavaScript if possible.
I've made a simple fiddle here
Thanks in advance!
Unfortunately there is no way in CSS to make a child of an overflow: hidden element show its contents outside the parent borders, you must change the hierarchy.
If that is not possible, you could add padding at the bottom to .nav-pull-left that is the size of your dropdown, although that's a rubbish solution..
.nav_pull_left {
width:auto;
height:50px;
padding-bottom: 80px;
overflow:hidden;
float: none;
border: 1px solid black;
white-space: nowrap;
}
You could also use JavaScript to dynamically update the height of your parent container when the dropdown shows but once again, reordering the hierarchy is best and cleanest.
If that is the way you want to go, let me know and I can help :)
May I suggest the following, where you change your css as follows.
.nav_pull_right {
min-height:50px; /* changed height to min-height */
...
}
.nav_pull_left {
min-height:50px; /* changed height to min-height */
...
}
.my_dropdown {
position: relative; /* changed absolute to relative */
margin: 0;
margin-left:-87px;
/* top: 2em; */ /* removed top */
left: 50%;
width: 170px;
z-index: 99999;
border:2px solid #929292;
}
With this your container overflow is kept and gets pushed down, the drop down menu is centered.
Is this something you could use?
Here is a fiddle demo
Basically what i am trying to achieve is create a progress bar kind of affect using 2 images.
(one grey scale & one colored). Trying to put these 2 divs beside one another & then modify the x-position and width of these dynamically. But facing problem to put them beside one another. Am i going in the right approach? Any other approaches for achieving this are also welcome.
This will work across all browsers:
HTML
<div id="progress-container">
<span></span>
</div>
CSS
#progress-container{
background: grey; /* default background */
width: 200px;
overflow: hidden; /* fit to the height of span */
}
#progress-container span {
display: block; /* to enable width and height for this element */
background: orange;
height: 15px;
width: 25%;
}
Working example: http://jsfiddle.net/ZPffE/2/
<div id="one-hundred">
<div id="percentage">
</div>
</div>
try to organize your div like this?