my goal is that while hovering any grid item it should change it's height without changing the grid order. Thanks in advance.
Current code:
https://codesandbox.io/s/3x6-grid-that-overflows-on-hover-svu9v6
Current:
Expected:
Here is a not perfect solution https://codesandbox.io/s/3x6-grid-that-overflows-on-hover-forked-to5hsj?file=/src/styles.css
Basically, I added inner divs to the child divs and extended their height on hover.
Related
Here is a JS Fiddle of the problem for reference:
https://jsfiddle.net/ncoughlin/1fjxy230/4/
I am having an issue where I am trying to get a vertical bootstrap nav menu to inherit the width of it's parent element, which is a CSS Grid column. For the sake of troubleshooting I have put the background of the grid column to red. So I am essentially trying to get the dark gray vertical nav on the left hand side to match the width of the red Grid column.
The bootstrap nav has id #settings-nav
I have tried the basic stuff like adding the bootstrap class w-100 to the nav ul or in the stylesheet adding width: 100%; however both of these make the menu stretch over the entire viewport instead of the parent element, which is the Grid column. It's behaving like the Grid column is not it's parent element, but using inspector I know that it is...
Please let me know where I am going wrong here. Thank you.
The problem ended up being that the #settings-nav was set to position:absolute, which makes it so that it ignores the dimensions of the parent element. Changed to position:relative and it works perfectly.
I have a main parent div that is .resizable(). One of it's child divs, say bottomChild has alot of other child div's, which resize as well. However, they have text and this text does not resize and so overlaps with other sibling div contents. What i want is for them to not resize, but for a scrollbar to appear so that the user can scroll through the bottomChild and see the content. I have a GridView in another child Div, say topChild, and this happens for the GridView automatically. I want to simulate this for bottomChild as well. Does anyone know how?
Heres a running sample - http://jsfiddle.net/xgCDy/33/
Try and resize the black parent div and see the content overlap.
I've solved your problem:
http://jsfiddle.net/WGknf/embedded/result/
just remove some extra code :D
http://jsfiddle.net/WGknf/
dont use relative(%) height. when you use draggable div!!!!
I have a DIV that contains user-generated contents. These contents may and will start with an item that has a margin-top and that margin-top overflows the container so that there will be a gap between the container and preceding elements. I found out you can set the container to either display:inline-block, float:left/right or give it a padding-top value.
If you do one of the first 2 options the container will shrink its width to its contained elements. Padding-top is not an option because of the gap that the padding will generate. Basically you could set a specific width to the container but the problem with that is that there's a templating system with 60+ layouts and I cannot edit all of them.
So I was wondering, do you see any CSS-way to get rid of that margin-overflowing problem or the shrinking-problem here?
One of the ways is to add "overflow: hidden;" to its parent. But it not always an option if you have content that you want to overflow parent's boundaries.
Example: http://jsfiddle.net/cLxhE/1/
Another way is to use pseudo-elements to clear it. But it will not work in IE7 and below.
Example: http://jsfiddle.net/cLxhE/2/
You could add this to the top of your container div before the user added contents:
<div> </div>
Then give it a height of 0px.
Doing some css, so threw this quick fiddle together to show the issue I am having.
http://jsfiddle.net/ozzy/LJKsA/
The div block in center of the demo, is overlapping the container div.
Can you suggest a fix for this please, it always trips me up.
The center div can be larger as content is added, so outer div container needs to handle this also, and retain margins
You can add clear: both to the last element inside the containing div.
This is asked 10 times a day on StackOverflow. It's because you're using float ont he children of the container div. Just impleemnt overflow:hidden to it and it should work.
Search more about clearfix, also.
I have several divs that I set up to be positioned next to each other. However, when I resize the window to be smaller, the 2nd and third div from the left drops below the first one. How do I make it so that instead of dropping underneath the first div, the browser would show she horizontal scroll bar?
Do you have fixed width set to these divs?
Please post your html code of the divs
Either you need to put a width to the parent container div as suggested by Arun or post your html to let us see
Set the width of the parent div to some value.
<div style="width: 700px">
<div>Content1</div>
<div>Conten2</div>
<div>Conten3</div>
</div>