I want to restrict the stretching of a textarea to 100% of the parent fieldset.
According to this question it works, when the parent is a div:
How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)
Now with fieldsets this doesn't seem to work: http://jsfiddle.net/b4oLy135/7/
HTML
<fieldset id="container">
<textarea></textarea>
</fieldset>
CSS
textarea {
max-width: 50%;
}
#container {
max-width: 80%;
border: 1px solid red;
}
What am I missing here?
You can do the following.
#container {
position: relative;
max-width: 80%;
overflow: none;
border: 1px solid red;
height: 100px;
margin: 0;
padding: 5px;
}
textarea {
position: absolute;
display: block;
width: 40%;
max-width: calc(100% - 15px);
height: 40%;
max-height: calc(100% - 15px);
}
<fieldset id="container">
<textarea></textarea>
</fieldset>
This way the textarea can only be resized to the width & height of its parent fieldset.
If you have more then one <input> in your fieldset, absolute positioning does not work.
My solution was to just use a wrapper over every <textarea> field, so I could use the solution I referred to in t the question.
Important: Does not work when using % on the parent. There is a bug when using % and stretching over 200% of the parent.
Here is my current fiddle:
https://jsfiddle.net/d23hgb8w/3/
HTML
<fieldset>
<div class="textarea__wrapper">
<textarea></textarea>
</div>
<input>
</fieldset>
CSS
.textarea__wrapper {
border: 1px solid red;
width: 500px;
}
textarea {
max-width: 100%;
}
Related
I have created a grid and now have problems with max-width. I want to have containers which take up the available width and are restricted by a left and right margin. This containers can contain children. These children may be bigger then the parent container and may be moved with the class .move-to-right-border to the right border to take up full width on the right.
I now have added a max-width to the container, to restrict the width. But now i have the problem that i can't set child elements to take up full width. I tried with 100vw, but width 100vw the scrollbar is included. Has anybody a solution for this problem?
Maybe it gets more clear with this example, comment max-width in and out to see what i want.
.row-right {
box-sizing: border-box;
margin-left: 200px;
margin-right: 100px;
max-width: 700px; /* to see the problem comment max-width in and out */
width: calc(100% - 100px - 200px);
border: 1px solid red;
}
.move-to-right-border {
box-sizing: border-box;
width: calc(100% + 100px);
border: 2px solid blue;
}
http://codepen.io/anon/pen/eJymOL
just use below css
CSS
.row-right p {
text-align: justify;
width : 100%
}
Hope this will help you :)
I think u r after something like this:
.parent{
position: relative;
height: 300px;
padding: 10px 0;
background-color: #99ff99;
text-align: center;
}
.container{
width: 200px;
margin: 0 auto;
height: 100px;
padding: 30px 0;
background-color: #ff9999;
}
.child{
position: absolute;
width: 100%;
height: 50px;
left: 0;
background-color: #9999ff;
}
<div class="parent">
This is parent
<div class="container">
This is container
<div class="child">
This is child
</div>
</div>
</div>
I want to make a conjoined input (left-aligned text input on the same line as a right-aligned button). Something like this:
But it want to have flexible width (the combined inputs should stretch to 100% of the parent container width, which can be of any width. Particularly, the text input should stretch to use all available space on the line).
I tried:
button float:right with text input width:100% (this overflows onto 2 lines)
text input width: calc(100% - 90px) (almost works, but button width varies on each browser)
Code example with JSFiddle:
HTML:
<div class="conjoined-input">
<input type="button" value="Update">
<input type="text">
</div>
CSS:
.conjoined-input {
width: 500px;
border: 1px solid red;
}
.conjoined-input input[type="text"] {
/*width: 100%;*/
}
.conjoined-input input[type="button"] {
float: right;
}
I need only modern browser support (IE9+) and can use any HTML and CSS.
How do I make a conjoined input with flexible width
very easy using flex:
DEMO
.conjoined-input {
width: 500px;
border: 1px solid red;
display: flex;
}
.conjoined-input input[type="text"] {
width: 100%;
}
IE9 is happy?
DEMO2
so, wrap your input in a div.
<button>Search</button>
<span><input type="text" title="Search" /></span>
then apply the magic styles
.conjoined-input {
width: 500px;
overflow: hidden;
background-color: yellow;
border: 1px solid red;
}
.conjoined-input input[type="text"]{
width: 100%
}
.conjoined-input span {
display: block;
overflow: hidden;
padding-right:10px;
}
.conjoined-input button{
float: right;
}
Here is the code. I want the DIV.fixed-nav (position:fixed) to completely fit its parent DIV.container of which width may change. Is there a pure CSS solution for this?
CSS:
body {
margin: 0;
padding: 0;
}
.container {
border: 1px solid #000000;
margin: 0 auto;
max-width: 600px;
min-width: 400px;
}
.fixed-nav {
background-color: red;
height: 20px;
position: fixed;
width: 100%;
top: 0;
z-index: 99;
}
.content {
background-color: green;
height: 100px;
margin-top: 20px;
}
HTML:
<div class="container">
<div class="fixed-nav">
</div>
<div class="content">
</div>
</div>
Please check the DEMO.
The problem with fixed is that it will always be relative to the browser window. So if you set 100% height on your fixed container it will be 100% of the browser window.
The only way I could think of to achieve this is to use jQuery. Or if you don't need the menu to be fixed and it could be absolute then height 100% will work.
For a responsive site I want a div and an input to sit side by side, and I want the input to take up all the available width and not wrap onto the next line.
I want the div to be a fixed width or determined by its content, I dont want to set a % width for the div.
So I have this:
But I want this:
<div class="cont">
<div class="stuff">Stuff</div>
<input value="something" >
</div>
.cont {
width: 20%;
margin: auto;
border: 1px solid grey;
overflow: auto;
}
.stuff {
background: blue;
height: 200px;
float: left;
width: 100px
}
input {
float: right;
display: block;
}
If you wrap your input in a span and apply this CSS it should work:
jsFiddle example
<div class="stuff">Some text</div>
<span><input type="text" value="something" /></span>
div {
background: #00f;
float: left;
height: 200px;
}
span {
display: block;
overflow: hidden;
padding-left: 10px;
}
input {
width: 100%;
}
If you don't have to support IE9 or lower Use calc() property like this:
input {
width:calc(100% - 100px);
box-sizing:border-box;
}
Check this Demo Fiddle
Complement with box-sizing to keep away issues with border and padding
I am looking to overlay a caption on to an image. I have managed to do this, but the image is expanding out of the parent div.
I have the containing div set to inline-block, as I want it to 'auto size', not take up width: 100%. If you look at the current output, you'll see the image could be within the black bordered box.
It only needs to work in Chrome, if you encounter cross-browser issues.
Thanks in advance!
LIVE DEMO
CSS:
#body_content {
border: solid 1px blue;
display: inline-block;
padding: 5px;
}
#body_header {
border: solid 1px red;
font-size: 25px;
padding: 5px;
}
#body_image {
position: absolute;
}
#body_image_caption {
color: white;
line-height: 30px;
margin-left: 10px;
}
#body_image_container {
background: white;
border: solid 1px black;
margin-top: 3px;
padding: 10px;
}
#body_image_overlay {
background-color: black;
bottom: 5px;
display: block;
height: 30px;
opacity: 0.85;
position: absolute;
width: 100%;
}
HTML:
<div id="body_content">
<div id="body_header">
Heading
</div>
<div id="body_image_container">
<div id="body_image">
<img src="http://i.imgur.com/s6G8n.jpg" width="200" height="200" />
<div id="body_image_overlay">
<div id="body_image_caption">
Some Text
</div>
</div>
</div>
</div>
</div>
The #body_image element is escaping from the #body_image_container because its position is set to absolute. Absolutely positioned elements are removed from the document's flow, causing parent elements to collapse as though the child element wasn't there. If you change it to relative, then it becomes contained within the black box:
#body_image{
position: relative;
}
http://jsfiddle.net/AaXTm/2/
Try this css in parent div.
Overflow:auto
Check this fiddle. You need to set the position of the child element of the image to be absolute and the parent element to be relative. Change the width of the caption accordingly.
child-element {
position:absolute;
}
parent-element {
position:relative
}
http://jsfiddle.net/AaXTm/4/