I have a custom dialog box which is shown when I click a button. After the dialog box is shown I show a overlay. The height and width of the overlay is 100% x 100%. Here comes the problem, the height 100% just gets the height of the browser window so when I scroll down on the page it remains at the top. How can I set its height to full page height not browser's?
Fiddle.
HTML:
<div id="overlay"></div>
<div class="description" style="text-align: justify;">Some text..(whole big text is in the fiddle didn't wrote here to shorten the code :))</div>
<div style="text-align: right">
<button id="offer_help">Offer Help</button>
</div>
<div class="offer_a_help">
<textarea rows="5">Write a short experience about yourself</textarea>
<textarea rows="5">Write what do you want in return</textarea>
<button id="send_offer">Send Offer</button>
</div>
CSS:
#overlay {
opacity: 0.5;
width: 100%;
height: 100%;
background-color: black;
display: none;
position: absolute;
top: 0;
left: 0;
}
#offer_help {
background-color: #eee;
border: 0;
padding: 10px;
border-radius: 2px;
box-shadow: 0px 0px 3px 1px #aaa;
}
.offer_a_help {
display: none;
width: 400px;
height: 250px;
position: fixed;
top: calc(100%/2 - 350px/2);
left: calc(100%/2 - 250px/2);
background-color: #eee;
border: 1px solid #bbb;
text-align: center;
}
.offer_a_help textarea {
width: 90%;
padding: 2px;
font-family: Calibri;
}
.offer_a_help textarea:first-child {
margin-top: 20px;
}
.offer_a_help button {
float: right;
margin-top: 10px;
margin-right: 10px;
border: 1px solid #bbb;
background-color: #ddd;
padding: 5px;
border-radius: 3px;
}
How can I set its height to full page height not browser's?
position: absolute takes the element out of line with the document. so the height is that of the viewport, and the top,left values are static. Change this to position: fixed and you will see better results.
Use position:fixed.
http://jsfiddle.net/ryJEW/2/
#overlay {
opacity: 0.5;
width: 100%;
height: 100%;
background-color: black;
display: none;
position: fixed;
top: 0;
left: 0;
}
Related
I have a usual search as most websites do. The results are shown below on the div that is visually connected to the search input.
It looks like this:
I need to have one solid shadow for the div parent but can't figure out or find online the way to do this.
I thought that I could either make 2 separate shadows, but that will look inconsistent and just terrible. Or I could make a div below with the same height and width that will act as a shadow but that's a non-necessary complication + the .search-results div's height will change dynamically.
This is an example:
body {
background-color: gray;
}
.search-wrapper {
position: relative;
margin: 100px 100px 0px 100px;
width: 200px;
overflow: initial;
box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.3);
}
.search {
width: 200px;
height: 30px;
color: white;
border-radius: 4px;
} .search input {
padding: 0;
background-color: #022222;
border: none;
height: 100%;
width: 100%;
color: white;
}
.search-results {
position: absolute;
height: 150px;
width: 200px;
background-color: black;
}
<div class="search-wrapper">
<div class="search">
<input placeholder="air max . . .">
</div>
<div class="search-results">
</div>
</div>
I am sure there must be a clever and simple way to do this.
Please help,
Thank you
You don't need to use positions here and you can use FlexBox instead. It's the best way and a lot easier. Also, you can ignore all of them, they will place on top of each other because they are block-level tags/elements. (divs)
You don't need to put the input in another div parent, use it as I did.
Sorry, I couldn't understand your code, so I must write the whole code from the beginning.
EDIT
I removed display flex, cause it's not necessary.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Arial;
border-radius: 10px;
background-color: #fff
}
body {
height: 100vh;
background-color: gray;
padding: 30px
}
.search-wrapper {
/* EDITED HERE ADDED HEIGHT */
position: relative;
z-index: 999;
width: 200px;
height: 160px;
box-shadow: 0 0 2px 5px rgba(232, 232, 232, .2)
}
.search-input {
width: 100%;
position: absolute;
padding-block: 5px;
border: none;
outline: none;
padding: 15px
}
.search-result {
/* EDITED HERE */
position: absolute;
z-index: 999;
bottom: 0;
width: 100%;
padding: .5px
}
p {
padding: 10px 0 10px 10px;
}
p:hover {
background-color: #e8e8e8;
cursor: pointer
}
<div class='search-wrapper'>
<input class='search-input' placeholder='Search...'>
<div class='search-result'>
<p>Nike Airforce</p>
<p>Nike Airforce</p>
<p>Nike Airforce</p>
</div>
</div>
I need to achieve something like this:
representation
I have found similar issues but they do not completely cover my task. Here is an example of a thing I have found:
.blue-background {
background-color: blue;
border-radius: 5px;
top: 3em;
left: 230px;
padding: 10px;
font-family: Roboto, sans-serif;
font-size: 14px;
line-height: 22px;
color: #313333;
display: flex;
align-items: center;
width: 260px;
}
.blue-background::after {
content: ' ';
width: 0px;
height: 0px;
border-top: 25px solid transparent;
border-left: 37px solid blue;
border-bottom: 25px solid transparent;
border-right: 0px solid transparent;
position: absolute;
top: 43%;
left: 47%;
}
.child-image-wrapper {
max-width: 260px;
margin: auto;
img {
max-width: 260px;
}
}
<div class="col-md-4 col-xs-12">
<div class="image-block">
<div class="blue-background">
<h2>Some Text <span class="arrow"></span></h2>
</div>
<div class="child-image-wrapper">
<img src="This is an image" />
</div>
</div>
Now the problem with the above CSS is that this works only at particular screen size (like 585px or so) otherwise the arrow "detaches" from the left div and goes into the right div. What I need is for the blue arrow to be stuck to the left div even if the screen size changes. Would it be possible to achieve this in some way? Sorry I am pretty new to front-end design
You can do it like so:
.wrapper {
width: 10em;
height: 2em; /* Height needs to match .right::after height and width */
display: flex;
}
.left {
background-color: lightblue;
width: 50%;
}
.right {
background-color: lightpink;
border-left: 1px solid purple;
width: 50%;
position: relative;
overflow: hidden;
}
.right:before {
height: 2em; /* Match height above*/
width: 2em; /* Match height above*/
background-color: #b77681;
position: absolute;
top: 50%;
left: 0%;
content: "";
border: 1px solid #864954;
transform: translate(-73%, -50%) rotate(45deg);
}
<div class='wrapper'>
<div class='left'>
</div>
<div class='right'>
</div>
</div>
I encourage you to read more about the position property (in our case specifically absolute and relative). here you can find some introduction.
As per your question change the top and left properties in .blue-background::after to fit the position for the arrow as you want.
here is an example: https://jsfiddle.net/qa9un7fy/
Goal:
The text "test" should always be at top right of the box
Problem:
What code am I missing in order to fulfill the goal?
Info:
*The text "test" always should be top right no matter what size of the id="length"
Thank you!
#length
{
width: 200px;
background-color: lightblue;
}
#asdf {
position: relative;
top: 5px;
left: 50px;
width: 40px;
height: 10px;
border: 1px solid #73AD21;
}
<div id="length">
<div id="asdf">
test
</div>
aa<br/>
bb<br/>
cc<br/>
dd<br/>
ee<br/>
ff<br/>
<br/>
</div>
Not sure if this is what u want to achieve, but you can check it:
#length
{
position: relative;
width: 200px;
background-color: lightblue;
}
#asdf {
position: absolute;
top: 0px;
right: 0px;
width: 40px;
height: 10px;
border: 1px solid #73AD21;
}
https://codepen.io/anon/pen/YOjKvR
Position relative to parent element and position absolute to "test" element
Your parent element should be relative so it becomes the new container for any absolutely positioned elements nested within. Remove height and width from #asdf to make it size to its contents.
#length
{
width: 200px;
background-color: lightblue;
position: relative
}
#asdf {
position: absolute;
top: 5px;
right: 5px;
border: 1px solid #73AD21;
}
Try to modify the css like this:
#length
{
width: 200px;
background-color: lightblue;
position: relative;
}
#asdf {
position: absolute;
top: 5px;
right: 0px;
width: 40px;
height: 10px;
border: 1px solid #73AD21;
}
You can add a "padding-top" to the #asdf if you want the "test" and "aa" strings in different lines.
Or another option:
#length {
width: 200px;
background-color: lightblue;
}
#asdf {
position: relative;
top: 5px;
width: 40px;
border: 1px solid #73AD21;
display: inline-block;
}
.right{
width: 100%;
text-align: right;
}
<div id="length">
<div class="right">
<div id="asdf">
test
</div>
</div>
aa<br>
bb<br>
cc<br>
dd<br>
ee<br>
ff<br>
<br>
If you put paragraph tags around your text, you'll have more control over how the text displays, as you can write css for the p tag.
The below snippet uses relative position, with negative margin top (of 5px)
#length {
width: 200px;
background-color: lightblue;
}
#asdf {
position: relative;
top:5px;
left: 50px;
width: 40px;
height: 10px;
border: 1px solid #73AD21;
}
div>p{
position:relative;
float:right;
margin-top:-5px;
}
<div id="length">
<div id="asdf">
<p>test</p>
</div>
aa
<br/> bb
<br/> cc
<br/> dd
<br/> ee
<br/> ff
<br/>
<br/>
</div>
I am trying to set up a custom toolbar for a textarea, I have the following
html:
<div id="main">
<div id="toolbar"></div>
<textarea></textarea>
</div>
css:
#main {
background-color: #ddd;
height: 400px;
width: 400px;
position: relative;
}
#toolbar {
background-color: #444;
height: 40px;
color: white;
}
textarea {
outline: none;
border: none;
border-left: 1px solid #777;
border-right: 1px solid #777;
border-bottom: 1px solid #777;
margin: 0;
position: absolute;
top: 40px;
bottom: 0;
left: 0;
right: 0;
}
It works exactly as I expected in Chrome, but in firefox / ie the text area is not consuming all the available space in the div.
How do I set it up so the toolbar takes up 40px at the top of the div, and the textarea consumes all the rest of the height.
I am sizing this stuff dynamically so can not use a "px" height or width for the textarea.
Codepen here: http://codepen.io/anon/pen/pDgvq
Better Suggestion
Set the textarea's width and height to 100%. Then, give it a 40px top-border that is transparent (color doesn't really matter, actually). Be sure to set box-sizing to border-box. Now position the relative toolbar on a higher z-index - voila.
Pen: http://codepen.io/anon/pen/nFfam
Oldie
Rather than moving the textarea down, move the toolbar up:
#main {
background-color: #ddd;
height: 200px; width: 400px;
position: relative;
top: 40px;
}
#toolbar {
background-color: #444;
height: 40px; width: 100%;
position: absolute;
top: -40px;
}
textarea {
width: 100%; height: 100%;
box-sizing: border-box;
}
Pen: http://codepen.io/anon/pen/mEGyp
Both Firefox and IE9+ support the calc() CSS function (you're out of luck with IE8 though; not sure what you're supporting).
I've added these lines to the textarea's CSS in your pen (updated version):
width: calc(100% - 2px);
height: calc(100% - 41px);
padding: 0;
The padding is just for normalization; you can choose whatever suits your needs, but be sure to adjust the pixel values in calc() accordingly. The 2px for width are to compensate the left and right border; the 41px for height are 40 for the toolbar and 1 for the bottom border.
Add width:-moz-available; height:100%;resize: none; to textarea
textarea {
outline: none;
border: none;
border-left: 1px solid #777;
border-right: 1px solid #777;
border-bottom: 1px solid #777;
margin: 0;
position: absolute;
top: 40px;
bottom: 0;
left: 0;
right: 0; width:-moz-available; height:100%;
resize: none;
}
UPDATED DEMO
Another Method
You can add a div around textarea and give position:absolute to the div
HTML
<div id="main">
<div id="toolbar"></div>
<div id="container">
<textarea></textarea>
</div>
</div>
CSS
#container{
position:absolute;
bottom:0px;
top:40px;
width:100%
}
textarea {
outline: none;
border: none;
border-left: 1px solid #777;
border-right: 1px solid #777;
border-bottom: 1px solid #777;
resize: none; height:100%; width:99.5%
}
DEMO 2
You can use height and width for textarea in % also apply top to the toolbar div in %
e.g. If top is 10% give 90% height to textarea.
I hope this is your desired result: Demo
#main {
background-color: #ddd;
width: 400px; height: 200px;
padding: 0;
}
div #toolbar {
background: #444;
width: 100%; height: 40px;
}
textarea {
margin: 0;
width: 100%; height: 100%;
}
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>