input text box width same as parent - html

How can I have a textbox that inherits the width of it's container?
For example I have a div that has a textbox inside it.
<div id='content' style='width:100%;'>
<input type='text' name='txtUsername'>
</div>
What I wanted to do is when I resize my browser, the text box must follow the width of it's parent div.
With the code above, the textbox always overflow it's container whenever I resize the browser to a smaller width.

You should use box-sizing:border-box together with width:100%.
This way input will fit 100% of container's width but will not overflow it because of added input's padding:
#content input
{
width:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
Live demo:
http://jsfiddle.net/745Mt/1/
More information about box-sizing CSS property with examples: http://css-tricks.com/box-sizing/

Just add style='width:100%;' (or how much % do you need) to the Input
<div id='content' style='width:100%;'> <input style='width:100%;' type='text' name='txtUsername'> </div>

Have you tried setting the width of the input to 100%? e.g.
input {width:100%;}

Related

Width of text box jQuery mobile

I have label and text box in jQuery mobile and i am trying to change the width of the text box.
For some reason after i am changing the width, lets say for 60% i am still seeing the rest of the 40% almost transparent.
I am adding also a photo of it in order to be more clear.
This is the code:
Html:
<div role="main" class="ui-content">
<form>
<div class="ui-field-contain">
<label for="sales1">Sales:</label>
<input type="text" id="sales" value="">
</div>
</form>
</div>
Css:
#sales {
width: 60%;
}
How do i change the width without seeing the extra 40% of the text box?
When using jQuery mobile forms, the inputs are enclosed onto a div which holds the width as 100%. To change the width of your text field, you rather need to change its value of the parent, not from the input itself.
You can achieve this with jQuery:
$('#sales').parent().width($('#sales').parent().width() * .4);
The above code is setting the width of the parent div to 40% of its actual value. Here is an example fiddle: https://jsfiddle.net/qctddeza/
.width() function reference
.parent() function reference
Edit:
You would be able to do it with CSS only, but not selecting with an id, as you cannot get the parent of the input element. A general styling can be seen here.
Code taken from W3Schools.

Force line-height to equal height

I have a div element, the title element, with a variable height greater than its line-height due to sibling elements:
<div class="t-row t-flex t-divide">
<div class="um-title">Manage Users</div>
<div>
<select class="t-input></select>
<input type="text" class="t-input">
</div>
</div>
Is there a way to make the line-height automatically assume the value of height?
Also, the text inside the div is currently aligned with the top and changing the vertical-align style doesn't have any effect; is there a way to align the text to the bottom if it's a flex item?

CSS max-height does not work

I want to make a container automatically expand. To do so I want to use max-height property. This is my html structure
<div class='palm-row first' style="max-height:200px">
<div class="palm-row-wrapper">
<div class="textfield-group" x-mojo-focus-highlight="true"
style="max-height:200px">
<div class="title">
<div class="truncating-text" id="nameField" class="recipient-picker"
x-mojo-element="TextField" style="max-height:200px"></div>
</div>
</div>
</div>
</div>
.recipient-picker{
overflow:hidden;
margin-right:0px;
max-width:300px;
padding-right: 4px;
}
I want the textfield to expand in height. However it does not work settings max-height. The container do not change height. However when I set min-height, the correct height is applied.
Any ideas how to achieve this? Any other ideas?
max-height sets the maximum height of an element if it tries to grow past that size. min-height sets the minimum height of an element if it tries to grow below that size. In your case, the default textfield height is less than your specified min-height, so the browser will increase it's height so that the min-height constraint is satisfied.
So what's the problem with just using min-height if it works?

How To make a Form and Div have a max width of child elements

I was wondering How To make a Form and Div have a max width of child elements. Eg in this example both the form and the outerDiv stretch the full width of the page. I would like the form and outerDiv to have a width of 200px.
This becomes a problem when I have this page in an iframe, because the width of the page is larger than the iframe I get a horizontal scroll bar.
<body>
<form name="myForm" method="post" action="#" >
<div id="outerDiv" >
<div style="width: 200px">
Both the form and outer div stretch 100%. I am wondering how I
would get them to wrap tightly around the inner div.
</div>
</div>
</form>
</body>
Thanks for your time and help.
To make a block display like an inline element you can use
display: inline-block;
I believe the "proper" way is to make them inline elements:
style="display: inline;"
divs are block elements and fill their container,
spans are inline elements and shrink to fit their contents.
You can either use spans as containers or just add the above style to your divs.
Good luck!
To prevent scrollbars for #outerDiv you could set a max-width and overflow properties:
#outerDiv {
max-width: 300px;
overflow: hidden;
}
In this way, you assure no scroll bars, and I'm assuming the width of the iframe is never wider than 300 pixels. Also be sure to set frameborder="0" on the iframe and check the margins on the body of the included html.

How to not wrap contents of a div?

I've got a fixed-width div with two buttons in it. If the labels of the buttons are too long, they wrap – one button stays on the first line, and the next button follows underneath it instead of adjacent to it.
How can I force the div to expand so that both buttons are on one line?
Try white-space: nowrap;
Documentation: https://developer.mozilla.org/docs/Web/CSS/white-space
A combination of both float: left; white-space: nowrap; worked for me.
Each of them independently didn't accomplish the desired result.
I don't know the reasoning behind this, but I set my parent container to display:flex and the child containers to display:inline-block and they stayed inline despite the combined width of the children exceeding the parent.
Didn't need to toy with max-width, max-height, white-space, or anything else.
Hope that helps someone.
If you don't care about a minimum width for the div and really just don't want the div to expand across the whole container, you can float it left -- floated divs by default expand to support their contents, like so:
<form>
<div style="float: left; background-color: blue">
<input type="button" name="blah" value="lots and lots of characters"/>
<input type="button" name="blah2" value="some characters"/>
</div>
</form>
If your div has a fixed-width it shouldn't expand, because you've fixed its width. However, modern browsers support a min-width CSS property.
You can emulate the min-width property in old IE browsers by using CSS expressions or by using auto width and having a spacer object in the container. This solution isn't elegant but may do the trick:
<div id="container" style="float: left">
<div id="spacer" style="height: 1px; width: 300px"></div>
<button>Button 1 text</button>
<button>Button 2 text</button>
</div>
Forcing the buttons stay in the same line will make them go beyond the fixed width of the div they are in. If you are okay with that then you can make another div inside the div you already have. The new div in turn will hold the buttons and have the fixed width of however much space the two buttons need to stay in one line.
Here is an example:
<div id="parentDiv" style="width: [less-than-what-buttons-need]px;">
<div id="holdsButtons" style="width: [>=-than-buttons-need]px;">
<button id="button1">1</button>
<button id="button2">2</button>
</div>
</div>
You may want to consider overflow property for the chunk of the content outside of the parentDiv border.
Good luck!