I have a simple page with a textarea that I want to fill the entire screen, except for a bit at the top. It works perfectly in Chrome but doesn't stretch to the bottom of the window in Firefox. This is the CSS I'm using:
body#pad textarea {
position: fixed;
top: 3em;
right: 0;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
background-color: #222;
color: #fff;
display: block;
font-size: 1.2em;
letter-spacing: 0.6px;
padding: 1em 2em 2em;
resize: none;
}
When I add height: 100% it does reach 100% in height, but that's not what I want, since it needs a little space at the top of the screen. Is there any pure CSS way to fix this? I'd really like to make it look and function like it does in Chrome without any Javascript.
As MDN
When both top and bottom are specified, and height is unspecified or
either auto or 100%, both the top and bottom distances are respected.
In all other situations, if height is constrained in any way, the top
property takes precedence and the bottom property is ignored.
So I suggest this trick to do, just remove top: 3em; and add height:calc(100% - 3em);
textarea {
position: fixed;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: calc(100% - 3em);
box-sizing: border-box;
background-color: #222;
color: #fff;
display: block;
font-size: 1.2em;
letter-spacing: 0.6px;
padding: 1em 2em 2em;
resize: none;
}
<textarea placeholder="write..."></textarea>
Don't know why FF misbehave so here is a workaround using CSS calc()
Firefox appear to follow this rendering rule and by doing so actually have a preset height (and width) for the textarea element. It is this preset that overrides the top-bottom/left-right settings and therefore become constrained causing the constraint rules (top-bottom / left-right) to apply.
To make all browsers behave the same, a height and width need to be set explicit, where I used CSS calc() to get the correct height.
(the right and bottom properties can be removed as they no longer affect the rendered result)
html, body {
margin: 0;
height: 100%;
}
textarea {
position: fixed;
top: 3em;
left: 0;
width: 100%;
height: calc(100% - 3em);
box-sizing: border-box;
background-color: #222;
color: #fff;
display: block;
font-size: 1.2em;
letter-spacing: 0.6px;
resize: none;
}
<textarea>
write more...
</textarea>
In some situations the top-bottom/left-right properties is needed when using positioning, so for a textarea, one can use a wrapper like this
html, body {
margin: 0;
height: 100%;
}
div {
position: fixed;
top: 3em;
left: 0;
right: 0;
bottom: 0;
}
textarea {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
background-color: #222;
color: #fff;
display: block;
font-size: 1.2em;
letter-spacing: 0.6px;
resize: none;
}
<div>
<textarea>
write more...
</textarea>
</div>
this css seem to work [https://jsfiddle.net/ubc4nz9k/]https://jsfiddle.net/ubc4nz9k/ set padding-top to your needs
#pad textarea {
width: 100%;
height:100%;
box-sizing: border-box;
background-color: #222;
color: #fff;
font-size: 1.2em;
letter-spacing: 0.6px;
padding: 1em 2em 2em;
resize: none;
}
#pad {
padding-top: 20px;
position: fixed;
width:100%;
height:100%;
left:0;
right:0;
}
Related
Here, I am trying to create the browser tab.
JsFiddle
.intrnlTabs {
background: #f0f1f3;
height: 35px
}
.intrnlTab {
background: #e7e9ec;
display: inline-block;
height: 30px;
text-align: left;
margin-top: 5px;
line-height: 35px;
border-top-left-radius: 10px;
position: relative;
margin-left: 12px
}
.intrnlTxt {
display: inline-block;
max-width: 150px;
height: inherit;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
min-width: 30px;
padding: 0 20px 0 10px
}
.intrnlCls {
position: absolute;
right: -23px;
height: inherit;
background: #dee1e5;
box-sizing: border-box;
top: 0;
width: 33px;
transform: skewX(30deg);
border-top-right-radius: 5px;
cursor: pointer;
display: inline-block;
text-align: center
}
.intrnlCls:hover {
background: #d7d8d8
}
.intrnlClsicon {
transform: skewX(-30deg);
display: inline-block
}
Output What I got
Output What I'm expect
I want newly added tab header should go behind previous tab without adding z-index value. I have achieved it adding z-index value. But, I don't want to add z-index value.
You don’t need to calculate a specific z-index for each item, or assign it via JS to begin with.
Adding a z-index of 1 to these “X” items is enough already to achieve what you want:
.intrnlCls { z-index:1; }
I am trying to make a ribbon type header for a website I am working on but I am struggling to get the text to adapt well to a smaller resolution.
Is there a way I can make the text responsive, or flow to a double line on smaller screens?
I have put the code into JS fiddle to show what I am using here.
h3.ribbon {
background: #c3d5d8;
margin-top: 0px !important;
margin-left: -30px;
padding-left: 20px;
color: #fff;
border-bottom: 40px solid #c3d5d8;
border-right: 20px solid #fff;
height: 0px;
line-height: 40px;
font-size: 18px !important;
font-family: 'ProximaNovaThin';
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
font-weight: bold;}
You could use a skew'd pseudo element for this, allowing for the text to wrap if need be.
.title {
display: inline-block;
width: 70%;
min-height: 50px;
line-height: 50px;
background: lightgray;
position: relative;
}
.title:before {
content: "";
position: absolute;
height: 100%;
min-width: 120px;
width: 40%;
left: 80%;
background: lightgray;
transform: skewX(45deg);
z-index: -1;
}
<div class="title">this is a long title............................a really long title! Like a super long title that should require a second line!</div>
I'm using Bootstrap 3 to create the layout, I'm not sure if that's relevant. The html/body element is set with height: 100%, I even put min-height: 100% on the body, and the body is set to position relative.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
min-height: 100%;
font-size: 16px;
background-color: rgb(232, 232, 232);
font-family: Calibri;
position: relative;
}
Inside the body, on the level under it, is my footer, positioned absolutely with bottom: 0. However, it won't go to the bottom of the page, no matter how bad I want it to.
.footer {
color: white;
background: url(Images/images/footer_bg.gif) repeat-x;
padding-top: 10px;
padding-bottom: 9px;
padding-left: 30%;
}
.footerContainer {
width: 100%;
margin: 0;
padding: 0;
margin-top: 60px;
position: absolute;
right: 0;
left: 0;
}
The footer is a direct child of the body, that is, it's not hiding inside anything else at all. Here's the markup for the footer:
<div class="container footerContainer">
<div class="row footer">
<div class="col-md-12"><p>Content</p></div>
</div>
As I said previously, this isn't inside any other divs, just the body. What could the problem be here?
There is no bottom:0; in your sample. Which seems to be the issue.
.footerContainer {
width: 100%;
margin: 0;
padding: 0;
margin-top: 60px;
position: absolute;
border:1px solid;
bottom:0;
}
Here is a Demo with your code: (using bootstrap 3)
http://jsfiddle.net/n6ypb/3/
I've discovered that I can have one or the other, but can't seem to figure out both.
My HTML is as follows:
<div id="middle">
<div id="middleinner"></div>
</div>
And the CSS goes a little something like this (z-indexes set for something else on the page, left out here because it's irrelevant, plus there's a few commented out things as I tried to figure it out as I went along):
html, body{
font-family: helvetica, sans-serif;
font-size: 1em;
height: 100%;
overflow: hidden;
}
#middle{
/* display: table;*/
display: table;
height: 80%;
width: 90%;
/* position: fixed;*/
position: absolute;
top: 10%;
left: 5%;
right: 95%;
bottom: 90%;
color: #000;
z-index: 0;
}
#middleinner{
padding: 0.5em 1em 0.5em 1em;
background-color: #F9F9F9;
display: table-cell;
/* display: inline-block;*/
border-radius: 1.5em;
vertical-align: middle;
/* margin-left: auto;
margin-right: auto;*/
text-align: center;
/* position: relative;*/
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
z-index: 20;
}
Anyway, if I change middleinner's position to relative instead of absolute, I've got vertical alignment at the cost of proper overflow handling. If I set it to absolute, I've got proper overflow handling at the cost of vertical alignment.
Is there a pure-CSS way that I can handle this?
Yes, a combination of line-height, inline-block, and vertical-align can do it.
#middle {
width: 80%;
margin: 10px auto;
border: 1px dashed black;
height: 500px;
line-height: 500px;
vertical-align: middle;
text-align: center;
}
#inner {
height: 50px;
width: 80%;
overflow: auto;
display: inline-block;
line-height: 1.1em;
}
Demo
To have it work with a dynamic height element, you'll have to use some JavaScript, since you're using jQuery, I'll go with that. It's perfectly possible to use vanilla JS for this one too.
resize = function(el) {
el.css({lineHeight: el.height() + "px"})
};
$(document).ready(function() {
var $middle = $("#middle");
resize($middle);
$(window).on("resize", function() {
resize($middle);
})
})
I have a problem with css popup. I am hidden some content in span tags and show it when I hover over a text. But there is a overlap and the text in the second line is overlapping the popup. And the border for the popup is messed up. The content is on this link. And I am using following css:
.rest-cat
{
clear: both;
padding: 3px 40px 0 0!important;
width: 600px;
}
.rest-menuitem
{
position: static;
float: left;
width: 254px;
padding: 3px 5px 0 0!important;
border-top: 1px dotted #DDD;
}
.dishname{
position: absolute;
z-index: 0;
float: left;
width: 229px;
}
.dishprice{
position: relative;
float: right;
width: 25px;
}
.product
{
width: 600px;
padding: 0px 0px 20px 20px!important;
}
.dishname span
{
display: none;
text-decoration: none;
}
.dishname:hover
{
overflow: hidden;
text-decoration: none;
}
.dishname:hover span
{
display: block;
position: static;
top: 0px;
left: 170px;
width: 320px;
margin: 0px;
padding: 10px;
color: #335500;
font-weight: normal;
background: #e5e5e5;
text-align: left;
border: 1px solid #666;
z-index: 200;
}
Is there a easy fix for this? I already tried using position: relative; and added z-index to all the CSS tags. They didn't work and I am stuck on it for a day.
The reason your popups are being clipped is because of this CSS:
.dishname:hover {
overflow: hidden;
}
Removing that would be a good place to start.
Next, z-index only affects elements with a position property other than static. Use relative and they will render the same but the z-index will have an effect.
After that there are a lot of different things that could be affecting the layering I would start like #Michael Rader said by cleaning up your HTML, you have a lot of unnecessary wrappers.