I have a tall INPUT (type=text) element which is sized at 100%. The containing element has a specific height (which is dynamic).
What I want is to be able to put the text at the top of the INPUT element. I've seen a few answers use padding to vertically centre it, but I could not get that to place the text at the top of the element. I'm not able to set the height of the element.
Example HTML (or JSFiddle):
<body>
<div class="outer">
<input type="text" value ="textcontent"></input>
</div>
</body>
and CSS:
body { background-color:gray;}
.outer {
height:480px;
background-color:pink;
margin-top:100px;
}
input {
height:100%;
background-color:lightgray;
padding-top:0px;
line-height:100px;
}
Can this be done without setting the height of the element? Browsers I need to support: Chrome, FF, IE9 & IE11.
Thanks
Dave
If you want to have only input element and achieve this, then set padding-bottom and not height.
Once you set height, by default the text will be shown in the middle of the element.
input {
padding-bottom: 462px;
background-color:lightgreen;
}
http://jsfiddle.net/yf5f82vx/1/
I would recommend you to use the textarea insted of the text input.
That way the text will start from the top and will wrap the text if its have more charactors that the width.
check the below ex
Fiddle example
'<body>
<div class="outer">
<textarea >textcontent</textarea>
</div>
</body>'
'body { background-color:gray;}
.outer {
height:480px;
background-color:pink;
margin-top:100px;
overflow:hidden;
}
textarea {
background-color: lightgray;
border: 1px solid #ccc;
box-sizing: border-box;
height: 100%;
line-height: 50px;
max-height: 100%;
padding-top: 0;
resize: none;
}'
Related
I need to place a div stick to the right edge of its parent div and when re-sizing the browser window, it should overlap other elements in the same parent and they should be hidden.
This image tells the story
Please note that, I don't want that div to have fixed position. It should scroll just like others and the elements (texts or whatever) should be under it. Just like the attached image.
I tried the following code but, it made the red div stick to the edge of its grandparent.
.redarea{
position:absolute;
float:right;
}
What's the way of getting this done ?
This one does exactly what you want
#parent{
border:1px solid red;
width:100%;
height:60px;
position:relative;
white-space: nowrap;
overflow: hidden;
}
#rightchild{
top: 0;
width:100px;
right:0;
bottom: 0;
background:red;
position:absolute;
}
<div id="parent" style="">
<p>This area is getting hidden This area is getting hidden This area is getting hiddenThis area is getting hidden</p>
<div id="rightchild">
</div>
</div>
This is the easiest way to do it imo.
Give your outer box a padding on the right side, and let the inner box fill up the padding by giving it the same width and positioning it absolutely to the right.
<!DOCTYPE html>
<html>
<head>
<style>
div.outer{
width: 90%;
height: 30px;
padding-right: 30px;
position: relative;
border: 2px solid #ddd;
margin: 0 auto;
}
div.inner{
width: 30px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
background: red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
Thanks everyone, using all of your help, I managed to write this code. Let me know if it's illegal.
#parent{
border:1px solid red;
width:100%;
height:60px;
position:relative;
overflow:hidden;
white-space: nowrap;
}
#rightchild{
width:100px;
right:0;
height:60px;
background:red;
position:absolute;
}
p{
float:left;
}
<div id="parent" style="">
<p>This area is getting hidden This area is getting hidden This area is getting hiddenThis area is getting hidden</p>
<div id="rightchild">
</div>
</div>
Demo
You shouldn't even need a float on it. You would just need to have:
position: fixed;
right:0;
You may also need to specify a z-index on it depending how you coded it. If it's underneath instead of on top, do a:
z-index:14; or something of the like.
you can try to use display:inline-block too. see this fiddle: https://jsfiddle.net/ahmadabdul3/sasc1a7h/
keep in mind the calc() css property is not supported by all browsers yet (especially older ones)
To keep text on a single line: white-space:nowrap .
display should help you here to avoid the use of position: either table or flex :
.flex {
display: flex
}
.full {
white-space:nowrap;
}
.flex .full {
flex: 1;
}
.table {
display: table;
width: 100%;
table-layout: fixed;
}
.table p {
display: table-cell;
}
p {
border: solid;
}
.cds {
padding: 0.25em;
background: tomato;
width: 100px;
}
<div class="flex">
<p class="full"> text to spray in flex display text to spray in flex display text to spray in flex display </p>
<p class="cds">condense</p>
</div>
<div class="table">
<p class="full"> text to spray in table display text to spray in table display text to spray in table display</p>
<p class="cds">condense</p>
</div>
I am doing some html and css.
I'm currently having a problem with a div that contains fieldsets.
I want my fieldsets to fill the entire div's height. So if my div is 300px high, both fieldsets should take 150px. I don't want my div to have a fixed height. I also don't want to work with position: absolute.
I made a jsfiddle
As you can see there is an empty space at the end of the div. I want the fieldsets to take up all that empty space.
This is my code:
<div id="thediv">
<legend>somefieldset</legend>
<fieldset id="one">
<input type="text" value="input1">
<input type="text" value="input2">
</fieldset>
<legend>somefieldset2</legend>
<fieldset id="two">
<input type="text" value="input3">
</fieldset>
</div>
#thediv{
min-height: 300px;
border: 1px black solid;
width: 50%;
}
#one,#two{
margin: 0;
padding: 0;
float: left;
width: 100%;
}
I hope my question is clear. If it isn't, leave a comment.
Have you tried using display: flex? It is supported in Chrome, Firefox and IE10+ with vendor prefixes and a slightly different syntax in IE10.
Read more about how to use display: flex here: MDN Using CSS flexible boxes
DEMO
#thediv{
min-height:300px;
border:1px black solid;
width:50%;
display: flex;
flex-direction: column;
}
#one,#two{
flex: 1;
margin:0;
padding:0;
float:left;
width: 100%;
}
I understand you don't want to use absolute and relative positioning but just look at this fiddle first.
http://jsfiddle.net/pynhA/138/
This uses relative and absolute positioning. The trick to making it responsive is adding a padding-bottom to the overall container:
#thediv {
border:1px black solid;
width:50%;
padding-bottom:50%;
background: red;
position: relative;
}
This trick is incredibly useful when trying to maintain aspect ratios for videos or divs with background images.
NOTE: This is only an issue in IE.
How can a force the textarea to vertically fill the table-cell div? I have applied height: 100% to all the parent elements, but the textarea still maintains its default height.
Screenshot:
Example of my problem: JSFiddle
Example code:
HTML
<div class="table">
<div class="row">
<div class="col col-sm">
<div class="thumbnail">Thumbnail</div>
</div>
<div class="col col-lg">
<textarea>Text area</textarea>
</div>
</div>
</div>
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.table {
display: table;
width: 100%;
height: 100%;
}
.row {
display: table-row;
height: 100%;
}
.col {
display: table-cell;
border: 1px dashed #FF0000;
padding: 5px;
vertical-align: top;
height: 100%;
}
.col-sm {
width: 30%;
}
.col-lg {
width: 70%;
}
.thumbnail {
height: 150px;
width: 200px;
border: 1px solid #CCC;
}
textarea {
width: 100%;
height: 100%;
}
According to this article, you'll see that what you're looking to do is impossible using a table-cell construction. Here's a fiddle demonstrating what happens when you remove all the height CSS. Spoiler alert: nothing happens, because none of your height tags have a value.
http://jsfiddle.net/py4gs/14/
Height/width CSS percentages are based off the closest parent with a defined height or width, excluding display: table* elements. In your case above, no such element exists, so none of the height tags have an effect.
I have encased your code in a body tag which has a defined width even though it is still relatively positioned. This is achieved by using an absolute positioning:
body {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Fiddle: http://jsfiddle.net/py4gs/12/
As you can see, the textarea fills the container now. This is because your table has a height and all the other elements compute their height off of the table height.
Unfortunately, this solution is probably suboptimal for you, since it wouldn't work for multiple rows. There is no CSS-only solution for propagating the CSS computed height as the CSS actual height of a sibling in IE. You will need a height attribute defined on a parent and you can then propagate that down to the child.
There are options though. If it is absolutely necessary that the textarea be the same size of the thumbnail element, and the thumbnail height is indeed variable, then you can hook into a render event on your page (such as $(document).ready()) to grab the computed height and set this as the actual height:
$(document).ready(function() {
// avoid layout thrashing! read then write!
var heights = $('row').map(function(row) { return $(row).height(); });
$('row').each(function(i, el) {
$(el).height(heights[i]);
});
});
However, I'm a fan of non-jquery solutions. Therfore, I think the best solution might be to reconsider your layout. Use what you know about the thumbnail element to set the row height in advance or scale your thumbnail element. For example, if you are embedding a YouTube video as your thumbnail, you can scale the max-height of the iframe to 100% and manually set the row height to, say, 200px. If instead you are embedding an image, you could use CSS to scale the max-height and max-width of your image, which will respect aspect ratio (but is relatively computationally intensive), or you could preprocess your images and scale them to a desired height.
Unfortunately looks like IE doesn't support the CSS resize property, and thus cannot resize the textarea vertically. Might have to use a shim, like the answer here:
https://stackoverflow.com/a/9763121/2612012
EDIT this may or may not work, but you can try this:
$(document).ready(function() {
$('textarea').parent().resize(function() {
var $t = $(this);
$t.find('textarea').height($t.height());
}).resize();
});
jsfiddle
.col {
display: table-cell;
border: 1px dashed #FF0000;
padding: 5px;
vertical-align: top;
height:10px;
}
or you can give fixed height to the parent container (.table) which will automatically give full height to its children if set 100%
jsfiddle
.table {
display: table;
width: 100%;
height: 150px;
}
jsfiddle
<div class="col col-lg">
<div contenteditable='true' class='contenteditable'>Text area</div>
</div>
.contenteditable {
width: 100%;
height: 100%;
}
.contenteditable p{margin-top:0px; margin-bottom:0px;}
Since the size of the textarea is a percentage of the page (which changes responsively), I have coupled jQuery and the HTML rows attribute to create a temporary hack. The ratio is calculated based on what I know about the page size and percentages.
$(window).resize(function(){
var padding = 82;
var ratio = 0.009;
var rows = Math.floor(($('.main-container').width()-padding)*ratio);
$('.text-area').attr('rows',rows);
}).resize();
For those who may not want to use the great but as yet not fully supported css table properties, You can also do this. Should be browser-friendly, but I only tested in FireFox, IE and SlimJet. Multiple rows work fine. I set the text area at 90% for demonstration.
(Not sure what the goal is here - perhaps multiple images on the left and one big textarea - but this should work for that also.)
jsfiddle: https://jsfiddle.net/RationalRabbit/wpsqx8kh/7/
HTML:
<body>
<div class="table">
<div class="row">
<div class="col col-sm">
<div class="thumbnail">Thumbnail</div>
</div>
<div class="col col-lg">
<textarea>Text area</textarea>
</div>
</div>
<div class="row">
<div class="col col-sm">
<div class="thumbnail">Thumbnail 2</div>
</div>
<div class="col col-lg">
<textarea>Text area 2</textarea>
</div>
</div>
</div>
</body>
CSS:
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.table {
width:500px;
height:100%px;
border:1px dashed blue;
}
.row {
height:200px;
}
.col {
float:left;
border:1px dashed #FF0000;
padding:5px;
vertical-align:top;
height:100%;
}
.col-sm {
width:30%;
}
.col-lg {
width:70%;
height:90%;
}
.thumbnail {
height:150px;
width:100%;
border:1px solid green;
}
textarea {
height:100%;
width:100%;
}
The easiest solution for me was to do it like this:
td{
position:relative;
}
textarea{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
Creating a gallery of divs with links images and text. problem is- can't get the inner wrapper to center everything. margin:0 auto; isnt working because i havent set a width for it. but i want the width to change with different browser sizes but that the inner .prjctwrap divs will be centered within it. here's my markup:
HTML :
<div id="wrapper">
<div id="innerprjctwrap">
<div class="prjctwrap">
<a href="http://www.google.com">
<div class="imageCont" style="background-image:url(image1.jpg);">
</div>
<div class="text">Text Text Text</div> </a> </div>
...this reapeats from prjctwrap with other images, text and links
</div></div>
CSS:
#wrapper {
background-color: #FFFFFF;
width:100%;
height:1000px; }
.prjctwrap {
display:inline-block;
width: 130px;
height:180px;
overflow:hidden;
margin:15px; }
.prjctwrap .imageCont{
width: 130px;
height: 100px;
background-size: cover; }
.prjctwrap .text {
text-align: center;
color: black;
text-decoration: none;
height:80px; }
.prjctwrap a {
text-decoration:none; }
#innerprjctwrap {
margin:0px auto; }
You haven't set any size on the #innerprjctwrap element, so it will have the default setting width: auto;. That means that it will use the full width available, so you can't see that it's actually centered.
Set a width on the element, and you will see that it is centered:
#innerprjctwrap {
width: 130px;
margin: 0 auto;
}
If you want to use text alignment to center the content inside the element, you shouldn't use margins to center the element, you should use text-align to center what's inside it:
#innerprjctwrap {
text-align: center;
}
Add a width for #innerprjctwrap other ways margin:0 auto; not detected
Eg:
#innerprjctwrap {
margin:0px auto;
width:200px;
}
Using JsFiddle for explaining such problems will be much clear.
Is this fiddle what you want?
If so, then you want is actually to center elements inside #innerprjctwrap like #Guffa says, simply add:
#innerprjctwrap{
text-align:center;
}
add width. if no progress, try removing 'px'. if there's still no progress, use padding in the wrapper div.
I have a box of fixed width and height, I have a link in it, i want to display the link in the center of box (vertically). Please see this jsfiddle to see the problem
Demo: http://jsfiddle.net/a5hP3/
Here's code anyway:
HTML:
<div class="box">
put it down, in center of box
</div>
CSS:
.box
{
width: 200px;
height: 300px;
border:1px solid green;
}
.box a{
vertical-align:middle; //doesnt work
}
You can set the line-height equal to the height:
.box
{
width: 200px;
height: 300px;
border:1px solid green;
line-height: 300px;
}
http://jsfiddle.net/a5hP3/3
There are two solutions:
First you can set the line-height of your div equal to its height. Unfortunately for this, you need to remember to update the line-height whenever you change the div's height dimension.
Another solution is to place your text within a div that's styled to be displayed as a table-cell with a vertical alignement. This would be similar to placing your text within a table and setting the vertical alignment on its cells:
<div style="outline:#000 thin solid; display:table-cell; height:300px; width:700px; vertical-align:middle">
Some Text
</div>
SEE DEMO
CSS:
.box
{
width: 200px;
height: 300px;
border:1px solid green;
position:relative;
}
.box a{
display:block;
position:absolute;
top:45%;
left:10% /* adjust based on link width */
}
Make the line-height the same as the container height...
http://jsfiddle.net/a5hP3/1/
Note: This solution only works when there is one line of text.
This is a problem better handled by javascript. (I'm using jQuery here):
http://jsfiddle.net/a5hP3/15/