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:)
Related
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.
This is the effect I'm trying to achieve:
This is a Facebook chat message, notice how the width of the element is strictly based around its textual contents.
If I change the text I write inside, the size of the <div> changes:
I'm trying to do the same thing with the following layout:
<div>Test message that goes ontothenextline</div>
And CSS:
div {
max-width: 190px;
// other arbitrary styles
}
But this is what I'm getting (as a basic example): https://jsfiddle.net/dr76t4t7/
How can I make the <div> better suit the contents of the text inside?
You are missing the display: inline-block and the padding.
.speech-bubble {
display: inline-block;
max-width: 190px;
background-color: #e1edff;
border: 1px solid #bdc7d6;
color: #4f5359;
text-shadow: 1px 1px 0 #fff;
padding: 8px 12px;
box-sizing: border-box;
border-radius: 15px 0 15px 15px;
}
https://jsfiddle.net/q35qmkgx/3/
Try this https://jsfiddle.net/q35qmkgx/7/
div {
background-color: blue;
color: white;
display:inline-block;
max-width:190px;
padding:5px;
word-break:break-all;
}
I have an error with my HTML/CSS that I would like to solve.
I have multiple links setup as divs. Their width is 10%. As so, all 10 Divs fit inside the parent div. I would like the links (10 divs) to have a border to distinguish them apart. If I try to add a border at all, the last div jumps out of the parent div. Is there a way to fix this? I tried using overflow:auto, didn't work. Mostly what Im looking to find is a way to make a border that goes inside the div, if that's possible that is.
body {
background-color: #574B59;
}
.header {
height: 87px;
width: auto;
border: 4px solid black;
margin: 20px;
background-color: white;
text-align:center;
font-size: 20px;
}
.links {
height: 25px;
width: auto;
border: 3px solid black;
margin: auto;
}
.body{
}
.subheader{
}
.linkss {
width: 10%;
height: 25px;
float: left;
text-align:center;
background-color:#06C;
border: 1px solid black;
}
Look at .Linkss
Either reduce the width of each div by the border-width (multiplied by 2) or you can apply a fake border by using the box-shadow property with a blur of 1px.
box-shadow: 0px 0px 1px #000000;
The reason is 10% plus even a 1px border is larger than 10% thus, too large for 10 to fit. An easy solution it to make a border on something inside the div, and make that fill the whole parent. But please post some code so we may provide a more better solution.
Add this to the CSS for the divs:
.linkss {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 10%;
height: 25px;
float: left;
text-align:center;
background-color:#06C;
border: 1px solid black;
}
Or you can set the width to calc(10% - 2px).
.linkss {
-moz-box-sizing: border-box;
box-sizing: border-box;
/* plus all your other properties here*/
}
One solution is to set a negative margin of 1 pixel on your linkss see example below
.linkss {
margin: 0 -1px 0 -1px;
width: 10%;
height: 25px;
float: left;
text-align:center;
background-color:#06C;
border: 1px solid black;
}
I have done this before but sometimes depending you on your layout or design this may need a little tweaking, let me know if this helped. Happy fridays!
One fix for layout issues like this is to apply the border to an element within the div, in your case, the <a> element.
.column_div{width:10%; float:left;}
.column_div a{display:block; border:2px solid #f00;}
Tested in FireFox.
The other solution would be to reduce your 10% width and apply the border as a percentage width; but trying to get it the same on the top & bottom would then become a headache.
I have styled some links to look like buttons. These 'buttons' include icons which are added with an icon font using the :after element.
As its a responsive layout, the buttons need to work on multiple screen sizes. When placed inside a flexible container, the:after element overflows it's parent.
Example:
The HTML basically looks something like this:
<div class="wrap">
Test
</div>
with the following CSS code:
.wrap {
background: grey;
width: 20%;
padding: 20px;
}
.btn {
display: inline-block;
padding: 15px;
background: linear-gradient(to top, #ccc, #fafafa);
border: 1px solid #999;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,.55);
max-width: 100%;
}
.icon {
font-family: FontAwesome;
}
.icon:after {
content: "\f04e";
margin-left: 8px;
}
and see this Fiddle: http://jsfiddle.net/r6uLJ/
When you narrow the window size, you will see the two triangles (blue) overflow the button (with grey-white gradient). Is there anything I can do to avoid that but still use pseudo-elements for this?
If you remove the max-width: 100% rule from the .btn rule set, then the problem does not occur.
See: http://jsfiddle.net/audetwebdesign/r6uLJ/3/
.btn {
overflow: hidden;
}
Should do the trick.
try this:
* {
box-sizing: border-box;
}
your thing overflows because of the box model which (the default one) adds the padding on top of the width. so having 100% width is 100% of parent and if you add 15px padding it will overflow 30px when the content wraps on 2 lines...
you might need to prefix it depending on browser, e.g:
-box-sizing: border-box
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
Basically I'd like to know how to achieve this:
A 100% UL with 5 x 20% (floated) LI children, with 3px gaps in between. The LIs have to be flexible (%) width so they can resize, but their gaps have to be fixed.
This can be done using CSS3 width: calc(20%-3px) but I need more basic CSS2 support. :(
What's the cleanest way to do this, please?
Well this is a bit of a work around, for it uses the container's background color as a border, but it works as expected (and with CSS2.1).
jsFiddle Demo
.outer {
background: lime;
border: 2px solid black;
display: table;
width: 100%;
}
.inner {
display: table-cell;
background: green;
width: 20%;
height: 50px;
border-left: solid 3px lime;
}
.inner:first-child {
border-left: none;
}