i have a div in another div whose height is 48px and position relative. now i have a child div in the div whose height is 48px. i want the child div max-height to be set to 80% and min-height set to 40%. in doing so, the child divs height is just 48px.
Below is the code,
<div class="top_div">
<div class="drawer">
<div class="menu">
<header>
<Svg>
<button></button>
</header>
<ul>
<li></li>
</ul></div></div></div>
.top_div {
z-index: 1;
display: flex;
position: relative;
width: 100%;
height: 48px;
padding: 0 12px 0 12px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
align-items: center;
}
.drawer {
display: flex;
flex-direction: column;
background-color: $white;
position: absolute;
width: 380px;
top: 55px;
right: 8px;
min-height: 40%;
max-height: 80%;
header {
height: 41px;
border-bottom: 1px solid #CCCCCC;
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 0px;
padding-top: 2px;
svg {
margin-left: 16px;
}
}
ul {
overflow-x: hidden;
}
::after {
content: " ";
position: absolute;
bottom: 100%;
left: 83%;
margin-left: -5px;
border-width: 14px;
border-style: solid;
border-color: transparent transparent $white transparent;
}
}
If i remove position : relative for top_div then it works well but remove the box-shadow for topbar...how can i fix this. I want the box-shadow to be there. or if i keep position:relative for top_div then i want the height of the drawer to be 80%.
How can i fix this. could someone help me. thanks.
I inserted the code into an html document, and set the position of your child's div to relative. For me this solved the issue, and I got exacly what you want to do.
Try this.
I hope this can help, for me it helped.
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 28 days ago.
I know this question has been asked hundreds of times, but for some reason I cant get it to work.
Both my HTML and CSS is rather simple, but I cant seem to center the div (livechat-wrapper) horizontally.
I just want the div to be as wide as the textarea, and placed just above the textarea, but it is "stuck" to the left side of my view.
Any ideas on how to do this?
<body >
<div class="livechat-wrapper">
</div>
<form>
<textarea maxlength="400" rows="1"id="input_field" class="input_field" type="text" name="q" placeholder="Write a message..."></textarea>
</form>
</body>
* {
box-sizing: border-box;
font-family: "Nunito", sans-serif;
}
html, body {
background: linear-gradient(to bottom right, #FDFCFB, #E2D1C3);
/*linear-gradient(to bottom right, #FDABDD, #374A5A);*/
width: 800px;
height: 600px
}
form {
display: flex;
flex-direction: row;
justify-content: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding-bottom: 10px;
}
.input_field {
background: rgba(255, 255, 255, 0.4);
border-radius: 10px;
width: 90%;
border: none;
padding: 1.2em;
outline: none;
font-weight: 400;
box-shadow: 1px 1px 1px black, -0.5px -0.5px white;
border: none;
resize: none;
outline: none;
}
.livechat-wrapper {
background: rgba(255, 255, 255, 0.4);
box-shadow: 1px 1px 1px black, -0.5px -0.5px white;
height: 80%;
width: 90%;
border-radius: 10px;
border: 0.05em solid red;
display: flex;
flex-direction: row;
justify-content: center;
}
I tried using on the div, but with no luck
display: flex;
flex-direction: row;
justify-content: center;
There are several ways to center a div horizontally using CSS. Here are a few examples:
Using margin: auto:
div {
width: 50%; /* or any other width */
margin: 0 auto;
}
This method works by setting the left and right margins to auto, which will push the div to the center of the parent element.
Using Flexbox:
div {
display: flex;
justify-content: center;
}
This method works by using the justify-content property to center the div within the parent element
Using Grid:
div {
display: grid;
place-items: center;
}
This method works by using the place-items property to center the div within the parent element.
Using transform: translate:
div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
The body has a width of 800px however that doesn't affect the form due to absolute positioning. So you will want to remove the width on the body. Also the div is limited to 90% width. So you can either change that to 100% and add box-sizing: border-box; to correct for margins or add margin: auto; which should center it on the page.
Try adding this to the your CSS
body {
display: flex;
justify-content: center;
width: 800px;
}
.livechat-wrapper {
margin: auto;
width: 90%;
}
I have a filled circle and a child element. I want the child ele to be 'attached' to the circle on the left. But I don't want this ele to have a visible border on its right edge.
I'm not sure why, but when these two eles are overlapped, the child ele has this faint kind of dashed border on the right.
body {
height: 900px;
width: 1600px;
zoom: 500%;
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
.circle {
position: absolute;
/* border: solid 3px black; */
background: yellow;
width: 300px;
height: 300px;
border-radius: 100%;
display: flex;
align-items: center;
}
.arc {
position: absolute;
width: 29%;
height: 25%;
background-color: yellow;
transform: translate(-68%, 15%) rotate(-24deg);
border-radius: 100% 0% 0% 100%;
/* Changing the last num to 0 gets rid
of the phantom border..? */
border-width: 3px 0px 3px 3px;
border-color: black;
border-style: solid;
/* Padding 1px works to get rid of it when the element isnt rotated */
padding: 1px;
}
<div class="container">
<div class="circle">
<div class="arc"></div>
</div>
</div>
https://codepen.io/CoreyBuckley/pen/ZEWKMaZ
Help on why this is occurring and how to get rid of it is much appreciated!
If nothing else works hide it indirectly with a pseudo element, matching the colour at the edge seems to sort out what appears to be an aliasing problem Edit: I checked setting DPI scaling to 100% it doesnt appear to be linked with that.
.arc:before {
content: ' ';
display: block;
position: absolute;
right: 0;
top: 0;
width: 1px;
height: 100%;
background-color: yellow;
}
I Set display:Flex to the .container element. I had put two children on the element. and gave max-width to the child(.box) of second flex-Item. But it does not seems to work.
body {
font-family: sans-serif
}
.container {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -moz-flex;
display: flex;
}
.par {
position: relative;
margin-left: 7px
}
.round {
height: 17px;
width: 17px;
background: #cacaca;
border-radius: 50%
}
.box {
padding: 10px 16px;
box-shadow: 0 3px 15px 0px rgba(0, 0, 0, 0.2);
background: #fff;
position: absolute;
font-size: 14px;
color: #333;
max-width: 200px;
left: -11px;
top: 28px;
}
.box::after {
content: "";
position: absolute;
height: 10px;
width: 10px;
background: #fff;
box-shadow: 2px 2px 5px -1px rgba(0, 0, 0, 0.17);
transform: rotate(-137deg);
top: -5px;
left: 16px;
}
<div class="container">
<div>Title</div>
<div class="par">
<div class="round"></div>
<div class="box">This is a Paragraph Text</div>
</div>
</div>
Js Fiddle Link
The position: absolute child's width depends on it's position: relative parent.
In your case, .box's width depends on .par while .par is too narrow to contain the word "Paragraph". That's why the .box's width is depending to the its longest word in the content.
I don't think you can set dynamic width to .box while not exceeding 200px and also keep the current width of .par. There maybe 2 ways to solve your problem.
set .par's to width: 200px
set fixed width: 200px to .box
You need remove position: relative for .par and remove left and top for .box instead add styles for .box like margin: 8px 0 0 -11px;, than max-width will be work correct.
https://jsfiddle.net/0Lfzbzc5/2/
in here I am trying to make the notification box on top of the body class div but couldn't do it the logic says positioned elements should be on top of the not positioned elements but that isn't happenning
tried even making body class div relative and giving it z-index but failed too
structure of notification box is an absolute element in relative element in absolute element (for CSS animation issues)
HTML
<div class="notiIcon glyphicon glyphicon-globe">
</div>
<div class='notiAbs '>
<div class='notiContainer'>
<div class="notiBox">
<div class="notiHeader">
<span class="notiHeaderSpan">notifications</span>
</div>
<div class="notiBody">
<div class="notiElement">Collaboratively enable high-quality imperatives before ubiquitous paradigms.
</div>
<div class="notiElement">Credibly productize customized services whereas.</div>
<div class="notiElement">Efficiently embrace real-time markets without.</div>
<div class="notiElement">Synergistically simplify collaborative web services.</div>
<div class="notiElement">Intrinsicly evisculate magnetic e-services through.</div>
<div class="notiElement">Holisticly build customer directed technologies.</div>
<div class="notiElement">Phosfluorescently synthesize team driven strategic.</div>
</div>
<div class="notiFooter"><span class="notiHeaderSpan">See All</span></div>
</div>
</div>
</div>
<div class="body">aasdasdasdasdasdasdas</div>
CSS
.notiAbs{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
/* overflow-y: hidden; */
height: 500px;
width: 500px;
/* overflow-x: hidden; */
overflow-y: hidden;
margin: 0 auto;
padding-left: 50px;
}
.notiContainer{
position: relative;
}
.notiIcon{
z-index: 5;
position: relative;
width:100%;
text-align: center;
font-size: 25;
cursor: pointer;
padding-top: 10px;
}
.notiIconNumber{
position: relative;
font-size: 15px;
color: white;
background-color: red;
top: -10;
left: -9;
padding: 2px;
}
.notiBox{
z-index: 4;
position: absolute;
height: 400px;
width: 400px;
display: block;
padding-top: 10px;
box-shadow: rgba(0, 0, 0, 0.298039) 0px 4px 7px;
}
.notiElement{
overflow-wrap:break-word;
font-size: 17px;
padding: 10 0px;
border-bottom-style: solid;
border-bottom-width: thin;
border-bottom-color: lightgray;
}
.notiHeader,.notiFooter{
text-align: center;
font-size: 20px;
font-weight: bold;
height: 15%;
display: table;
width: 100%;
}
.notiHeaderSpan,.notiFooterSpan{
display: table-cell;
vertical-align: middle;
}
.notiFooter{
box-shadow: 0px -4px 7px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.notiHeader{
box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.1);
}
.notiBody{
padding: 20px;
overflow: auto;
height:70%;
}
.body{
}
It is on top but the background is transparent so it makes the illusion that it's not. Just set a background color as follows :
.notiBox{
z-index: 4;
position: absolute;
height: 400px;
width: 400px;
padding-top: 10px;
border-style:solid;
background:#666;
}
Check the Fiddle.
Your notification box which I believe is the element with class "notiBox" is on top. The reason why it appears not to be is because it has an inherited background-color of transparent.
If you set the background-color property to say "yellow" (for examples sake) you will see that it is on top of the element with class "body".
Does that make sense? I can explain further if you need me to.
I've updated my answer as looking at your HTML again i've realised that the element with class "notiBox" is probably the only element (and it's contents) you want to appear on top
Is there a possiblility to bring a html element to front without increasing it's z-index? All elements having the same z-index overlap depending on there order in the DOM. I could remove the element and append it to it's parent again - but is there any nicer solution?
Edit:
Keeping an array of all rects, set all rect's z-index to x and the just hovered to x+1 does the trick, but needs an array.
It would probably work if you wrote your HTML code from bottom positioning to top, since the browser reads the code from the top of the file to the bottom. Still, using z-index is a lot safer and more efficient.
try following code:
strong {
font-family: sans-serif;
}
div {
padding: 10px;
border: 1px dashed;
text-align: center;
}
.DivStatic {
position: static;
height: 80px;
background-color: #ffc;
border-color: #996;
}
.DivAbsolute {
position: absolute;
width: 150px;
height: 350px;
background-color: #fdd;
border-color: #900;
opacity: 0.7;
}
.DivRelative {
position: relative;
height: 80px;
background-color: #cfc;
border-color: #696;
opacity: 0.7;
}
#Main1 {
top: 10px;
left: 10px;
}
#Main2 {
top: 30px;
margin: 0px 50px 0px 50px;
}
#Main3 {
top: 15px;
left: 20px;
margin: 0px 50px 0px 50px;
}
#Main4 {
top: 10px;
right: 10px;
}
#Main5 {
background-color: #ffc;
margin: 0px 50px 0px 50px;
}
<div id="Main1" class="DivAbsolute">
<strong>First DIV #1</strong><br />position: absolute;</div>
<div id="Main2" class="DivRelative">
<strong>Second DIV #2</strong><br />position: relative;</div>
<div id="Main3" class="DivRelative">
<strong>Third DIV #3</strong><br />position: relative;</div>
<div id="Main4" class="DivAbsolute">
<strong>Fourth DIV #4</strong><br />position: absolute;</div>
<div id="Main5" class="DivStatic">
<strong>Fifth DIV #5</strong><br />position: static;</div>