Please see the attached image below:
div:a is the parent div which width is set to 100%, so no matter the width of the device (pc/mobile) is, it should grow to the width of the device's screen.
div:b is for the width of the input label. This div can be omitted too, but I would like to keep it and it's width is set to auto so that it can be wide according to the width of the label text.
I would like to set the width of the input field in a way so that it can cover the rest of the parent div (div:a) space.
Both div:b and div:ba are set as inline:block. I don't want to set any fixed width to any of the three divs as I want to make this layout flexible to any device screen (pc or mobile screen of different widths).
Here is the css and html code of the divs:
div.a{
width: 100%;
border: 1px solid red;
}
div.b {
display: inline-block;
width: auto;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
div.ba {
display: inline-block;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
<div class="a"><div class="b">Name:</div><div class="ba"><input type="text" /></ba></div>
Please note that, there will be other fields too below this input field (name) as this layout will be used to create a user input form.
Related
Fiddle: https://jsfiddle.net/Alexander6RI/vpeasg1t/
I have an image which resizes to fill the height of its parent div, and the parent div has its width set to min-content. This works as expected.
When a horizontal scrollbar is added, the image correctly resizes to keep its aspect ratio while filling the available height. The problem is, the parent div continues to behave as if the image were full size which creates an empty space to the right. The intended function would be for the div to become narrower, because it has width: min-content, but it doesn't.
Is this an intended feature to improve document flow? Is there a way to make it follow the expected behavior?
The width is fine, it works as it should. The problem is the height, the height of the horizontal scroll bar is taken from the height: 50vmin; so the new height of the but the image tries to maintain its aspect ratio so it gets squashed down. Even though the height changes, (because again, the height of the horizontal scroll bar takes up some part of the parent's height.) the viewport doesn't so the height stays constant.
.parent {
outline: 2px solid black;
width: min-content;
resize: vertical;
overflow-y: auto;
}
.child {
outline: 2px solid red;
height: 100%;
width: auto;
display: block;
}
But if you need the height you might need to set the height of the parent and the child to be the same value then set the overflow to hidden like so
.parent {
outline: 2px solid black;
width: min-content;
resize: vertical;
height: 50vmin;
overflow:hidden;
}
.child {
outline: 2px solid red;
height: 50vmin;
width: auto;
display: block;
}
A fraction of the image gets clipped at the bottom but that's the best solution I can think of.
You can probably use the object-fit css property like this:
.parent {
outline: 2px solid black;
width: min-content;
height: 50vmin;
resize: vertical;
overflow-y: auto;
}
.child {
outline: 2px solid red;
height: 100%;
object-fit: cover;
display: block;
}
With cover value you can maintain the aspect ratio using all of image's parent space (the image will be adapted to the new space).
I have the following button and input that I cannot figure out how to get on the same line.
I've highlighted the div in red. Here is the HTML anbd CSS that's controlling this:
<div class="input_container">
<input name="resolutionComments[]" id="country_id" type="text" placeholder="Enter a Part Number" onkeyup="autocomplete()">
<ul id="country_list_id"></ul>
<button class="btn2 btn2-warning" id="b3">HELP</button>
</div>
.input_container {
display: block;
width:49%;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-color: red;
border-size: 2px;
}
.input_container input {
display: inline;
margin: 0 20%;
position: relative;
height: 42px;
width: 290px;
}
.btn2 {
display: inline-block;
margin-bottom: 0;
line-height: 1.42857143;
}
.input_container ul {
display: inline-block;
padding-left: 40px;
width:49%;
margin-left: auto;
margin-right: auto;
border: 1px solid #eaeaea;
z-index: 1;
background: #f3f3f3;
list-style: none;
}
I've tried using a mix of display: inline and display: inline-block for these various elements but no matter how I cut it I these the HELP button and the INPUT box are never on the same line. What am I doing wrong?
Why? The reason they do not line up is because there is not enough room for all the elements to fit on one line.
Fix Understand what some of your CSS is doing. Your search form's container has the following CSS:
.input_container {
display: block;
width: 49%;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-color: red;
border-size: 2px;
}
which has a number of issues.
No need for display: block; as that's how a DIV displays by default.
width: 49%; will be 49% of it's parent element. i.e. 49% of parent width of 1000px = 490px, 49% of parent width of 500px = 245px
border-size should be border-width
Now onto your INPUT styles:
.input_container input {
display: inline;
margin: 0 20%;
position: relative;
height: 42px;
width: 290px;
}
No need for display: inline as that's how a INPUT displays by default.
No need for position: relative as far as I can see.
margin: 0 20% will add a margin to the left and right side of your INPUT of 20% of it's parent element. If parent is 1000px then you're adding 200px of margin on each side of your input! This element alone would take up 690px ( 200px + 290px + 200px ) if the parent element was 1000px.
Now onto your UL styles:
.input_container ul {
display: inline-block;
padding-left: 40px;
width: 49%;
margin-left: auto;
margin-right: auto;
border: 1px solid #eaeaea;
z-index: 1;
background: #f3f3f3;
list-style: none;
}
Again you're using a percentage width so it will be based off of it's parent element, .input_container. If .input_container is 49% of 1000px parent element then .input_containerhas a 490px width and your UL will be 49% of it's parent width of 490px = ~240px.
Once you get rid of some of those percentage values, especially margin: 0 20% things will clear up a bit though there is a little more work to do.
Both your INPUT and BUTTON elements are inline and therefore will line up next to one another. Place the UL after them both.
Here is a jsFiddle with slightly modified HTML and CSS: http://jsfiddle.net/y475jx8b/2/
I left in some of your percentage widths as this is a demo intended to get you on the right track. You might be better off supplying a specific with depending on the final requirements.
.input_container {
width: 49%;
margin: 0 auto;
border: 2px solid red;
}
.input_container input {
height: 42px;
width: 290px;
}
.btn2 {
margin-bottom: 0;
line-height: 1.42857143;
}
.input_container ul {
width: 49%;
margin: 0 auto;
border: 1px solid #eaeaea;
z-index: 1;
background: #f3f3f3;
list-style: none;
}
<div class="input_container">
<input name="resolutionComments[]" id="country_id" type="text" placeholder="Enter a Part Number" onkeyup="autocomplete()">
<button class="btn2 btn2-warning" id="b3">HELP</button>
<ul id="country_list_id"></ul>
</div>
NOTE I've used jQuery Autocomplete before and I'm not sure you have to supply a UL in the markup. I believe it creates one for you.
EDIT 1 - Reply to OP's question in comments - How to center DIV?
Typically the easiest way to use margin auto along with specifying a width for the containing element. Below is what is most common:
width: 500px; /* can be some other unit like a percentage */
margin: 0 auto;
Above I'm using a shorthand version so I don't have to supply each side separately. 0 is setting the top and bottom margins and auto is setting the left and right margins. 0 is not required to center the element. You could do the following and it would still work, margin: 25px auto; or margin: 100px auto 25px.
When using the auto value for margin you must supply a width for that same element in order for it to center. This is because the browser will calculate your margin for you but it cannot do this if it does not know how much space the element wants to take up. For example, if the containing element (this could be a parent element that may or may not be based on the viewport width of your browser window) is 1000px and your element is 500px wide then it will calculate as follows:
(containing element) - (element width) = (space left for margins) / 2 = (margin width for each side)
so:
1000px - 500px = 500px / 2 = 250px for each side
Without a specified width it would look like this:
1000px - ? = ? / 2 = ? for margin on each side
Percentage widths are fine - let's say width: 30% so 30% of a parent width of 1000px = 300px. That would calculate as follows:
1000px - 300px = 700px / 2 = 350px for margin on each side
Now the catch with a percentage width is that if your containing element is 300px wide then 30% of that which is 90px might be too small. See below on how to handle this.
Now just plug-in a containing element width other than 1000px to get an idea of a variable width space like different browser sizes.
1500px - 500px = 1000px / 2 = 500px for margin on each side
750px - 500px = 250px / 2 = 12px for margin on each side
Now if your elements happen to have set widths, like the INPUT and BUTTON elements, and they total more than the browser width then they will create a horizontal scroll bar. This is where you would want to use a percentage width and (possibly) in conjunction with the max-width property so the element doesn't get too large. If it get's too small you could also use the min-width property as well.
Here is a jsFiddle demonstrating how to do this: http://jsfiddle.net/9gyq89ye/2/
Just change the input position.
Example:
<div class="input_container">
<input name="resolutionComments[]" id="country_id" type="text" placeholder="Enter a Part Number" onkeyup="autocomplete()"> <button class="btn2 btn2-warning" id="b3">HELP</button>
<ul id="country_list_id"></ul>
</div>
Your ul element is too wide (width: 49%). Even as inline-block, it will cause a line break if it wont fit on the current line.
If you want to align two elements next to each other in normal flow you should not be adding other elements in between them.
Also, you've set a static width: 290px for the input which will push the button down when the container is small, it is better to specify the width in %, maybe combined with a min-width (For the container as well).
Also, margin: 0 20%; is just too much, it'll take 40% of the width of container.
.input_container {
display: block; /*..... ? default ....... */
width: 49%;
margin: 0 auto;
border: 2px solid red;
}
.input_container input {
position: relative;
display: inline;
width: 80%;
height: 42px;
}
.btn2 {
display: inline-block;
line-height: 1.42857143; /*..... ? ....... */
margin-bottom: 0;
}
.input_container ul {
display: inline-block;
width: 49%;
margin: 0 auto;
padding-left: 40px;
z-index: 1; /*..... ? ....... */
border: 1px solid #eaeaea;
background: #f3f3f3;
list-style: none;
}
<div class="input_container">
<input name="resolutionComments[]" id="country_id" type="text" placeholder="Enter a Part Number" onkeyup="autocomplete()">
<button class="btn2 btn2-warning" id="b3">HELP</button>
<ul id="country_list_id"></ul>
</div>
As a side note, z-index doesn't have any effect on elements in normal flow. Also, you should specify a unit for values other than 0.
I have some divs and and input box. When I resize the window, the divs adapt appropriately, but the input gets clipped. How do I make the input resize to the screen size while having a max width of 400px? Here are screenshots of the two states: Looks good. But when the page is narrowed the divs respond but the input gets cut but the divs are good.
Here is how I styled my input
.text-input {
display: block;
width: 100%;
font-family: sans-serif;
font-size: 1em;
appearance: none;
border-radius: none;
padding: 0.5em;
border: solid 1px #fff;
box-shadow: inset 1px 1px 2px 1px #707070;
transition: box-shadow 0.3s;
max-width: 400px;
display: inline-block;
}
.text-input:focus,
.text-input.focus {
outline: none;
box-shadow: inset 1px 1px 2px 1px #c9c9c9;
}
My question is, how should I style the input to make it behave the same as the divs? Please also what is the intuition behind the solution?
You can put the input inside a div, give the input a width:100%;.
HTML
<div>
<input type="text" />
</div>
CSS
input[type=text] {
width: 100%;
max-width: 400px;
box-sizing: border-box;
}
div {
border: solid 1px red
}
DEMO
here is the fiddle
the problem was width was 100% and padding was xx px so it comes to 100% + xxpx thats the reason it was exceeding 100%
Js Fiddle
box-sizing:border-box;
this property gives padding, border from inside which doesn't allow the width to exceed from 100%
Simply remove max-width from your code. Replace it with 100%.
If you want to be more web-responsive, you can define more deffinitions, each for different window size, like so:
#media screen and (max-width:720px) { width: 90%; }
#media screen and (min-width:720px) { width: 100%; }
Google responsive web design and screen width examples:)
Fiddle: http://jsfiddle.net/sdthelord/tnsLE/
<div id="out">
<div id="in">
<P>
Lorem ipsum...
</P>
</div>
</div>
#in {
-moz-column-width: 200px;
column-width: 200px;
height: 400px;
border: 1px solid red;
}
#out {
border: 1px solid blue;
}
I have a DIV with CSS3 columns and a fixed height on a horizontal layout page. This div is contained within another div element, which includes the header h1 as well.
The point is, that I don't want to initially specify the width of both divs, so the width is either 100% or auto, and a min-width style makes sure it does not shrink (not in the fiddle).
The problem is, giving the div's border, you will see that even if new columns are added and more space is needed for content, the div's wont grow in size/width.
Is there a way to force the div with the columns to be as large as to enclose all columns?
Here is Fiddle
Add height: 100%; to your #in{...} CSS
i.e.
#in {
-moz-column-width: 200px;
column-width: 200px;
height: 400px;
border: 1px solid red;
height: 100%;
}
I am sure that this question is already answered, but I find it hard to search for it.
I have the following html:
<div id='outerBox'>
<div id='leftBox'><div id='secondLevelBox'></div></div>
<div id='rightBox'></div>
</div>
and the following css:
#outerBox {
width: 300px;
height: 200px;
border: 1px solid black;
}
#leftBox {
height: 100%;
width: 55%;
background-color: blue;
float: left;
}
#rightBox {
height: 100%;
width: 45%;
background-color: yellow;
float: left;
}
#secondLevelBox {
height: 100%;
width: 100%;
}
(See http://jsfiddle.net/dsMdb/1/)
this displays ok. But if I now add a border: 1px solid red to one of the inner divs, they will grow 2 pixels and the layout will break: http://jsfiddle.net/dsMdb/5/
How can I wrokaround this? (solutions for IE >=8 and current FF are ok)
You can change the way the browser is supposed to calculate the offset for the border & layout.
Take a look at the Box Model properties in CSS3, this way you can define the offset etc.
The command you're looking for in CSS is box-sizing. By default this set to content-box, which adds the width, padding etc as different values on top of each other.
By setting it to border-box, you can force the browser to instead render the box with the specified width and height, and add the border and padding inside the box.
Should apply to your border as well normally.
Problem is that it adds a border on the outside of that inner div. Since your red border is 1px, then it adds total of 2px.
Quick way to fix this is to remove `2px` from the outer `div`s width.
#outerBox {
width: 298px;
height: 200px;
border: 1px solid black;
}
Also, I would like to add, that this fix is very browser compatible ;)
I would suggest to have pixel graduation in the width and accordingly give room for border, like
Since total width is 300 px,
#leftBox {
height: 100%;
width: 165px;
background-color: blue;
float: left;
}
#rightBox {
height: 100%;
width: 145px;
background-color: yellow;
float: left;
}
now reduce the width accordingly and this would work across browsers.