Now the problem I'm seeing, table just grows and scrinks based on window size and data within, except for this one input box. It wants to be larger than the column itself. The column has no size set limit and the input has a 100% width, but for some reason it wants to be 110% width, so it seems. 100% has always been based on the outside, so padding and borders should only be taken based on specific px when set. Can someone tell me why and what I have to do to fix it?
I know for you table haters, you want to start telling me how to code this differently, but I like them and they still work better than a CSS display: table, table-row, table-cell.
.inputWidth {
width: 100%;
}
.textInput {
border: 5px solid white;
-webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1);
box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1);
padding: 5px;
background: hsl(120, 100%, 80%);
}
This looks like a box sizing issue. I would try adding box-sizing: border-box; to the input. This takes in account padding and border when having width: 100%;
Related
I have a screenshot of the form (its in pc view) as shown below which I have to replicate in HTML/CSS.
I have created the fiddle for the above screenshot.
Problem Statement:
(1) I am wondering what changes I need to do in the fiddle so that I am able to expand the width of the form as marked by arrow in the screenshot above.
I tried playing with the margin and padding of the form class as shown below but it didn't work.
Whenever I increase the padding of the form, the input fields inside the form seems to go all over the place.
.form {
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24)
}
(2) Also, what changes I should make in the CSS, so that I can push the form (as marked with orange sign in the form) little bit towards the bottom.
Give the text input fields a width of 100% then you can use the paddings to control the size of the form elements.
.form {
background: #FFFFFF;
max-width: 360px;
margin: 150px auto 100px auto;
padding: 0px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24)
}
input[type="text"] {
width: 100%;
}
Note that I've modified the .form styles a little bit.
I am creating a full width website. The website appears full width on my computer but when I check it on other computers, the website appears to have free space on both left and right.
How can I make this website full width?
.wrapper_boxed {
width: 1000px;
margin: 0
background-color: #fff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
One solution that I have read is I redevelop using percentage width.
Just change your main container :-
.wrapper_boxed {
width: 100%;
margin: 0
background-color: #fff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
You will probably need to go through the elements within wrapper boxed to change any width pixel values to percentages.
Percentage is definitely the easiest way, if you post some code we can look at uaing what you have and extending divs to keep the design and essentially stretch the sides. However anyone would just use:
width: 100%;
I have a background image HERE for a sidebar.
Want to make this background using only CSS, is this possible?
Height of the sidebar, is changing depending on the content <div>
That's why I can't use background image.
one possibility is, you can combine css gradient and box shadow.
the css gradient will give LHS RHS shade and box shadow will give TOP shade.
hence the bottom edge can be kept identical to OP image.
here is DEMO
.shadow_grad
{
height: 200px;
width: 100px;
//shadow
box-shadow: 0 5px 20px 0 rgb(0, 0, 0) inset;
//gradient part included in fiddle, cant paste here as its long
}
You can use box-shadow to get that effect.
background-color:#880600;
-webkit-box-shadow:inset 0px 5px 20px 5px black;
-moz-box-shadow:inset 0px 5px 20px 5px black;
box-shadow:inset 0px 5px 20px 5px black;
http://jsbin.com/bapawoho/1/
Hope this helps :)
This question already has an answer here:
Box-Shadow Only on Left and Right
(1 answer)
Closed 8 years ago.
This is css code
.one-edge-shadow {
width:200px;
height:200px;
border-style: solid;
border-width: 1px;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
Using this style , as I show in this fiddle example , the shadow is at the bottom of the box .
I want to drop shadow to the left and right side of the box .
Actually , I'm little weak in CSS :)
Thanks !
You have to understand the parameters of box-shadow as well as how the drop shadow works (how the light works).
To do what you wish, you need two different shadows, as one light source cannot possible cast shadows on both sides (it could if it was in front of the box, but than you'd have shadow spreading around the up and down edge as well).
Here's the quick answer:
box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
Updated fiddle
What happens here is that you cast a shadow which is offset 10px both to the right and to the left (first parameter offset-x). This alone would achieve what you wish, however, you'd have a blocky shadow (example).
Since you want things to get a bit blurry, you'd have to add the third parameter (blur-radius). Once you do that, you will see the blur creeping from behind your box above and below: that's because behind your box there effectively is another same-sized box, which is however blurred.
To avoid this, you use the fourth parameter (spread-radius) with a negative value to effectively clip the size of the projected box behind your box, so that the top and bottom shadow will be hidden.
Hi Zey this is the code paste in your css and you will get what you want.
This is CSS
.one-edge-shadow {
width:200px;
height:200px;
border-style: solid;
border-width: 1px;
-webkit-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
-moz-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
}
This is HTML
<div class="one-edge-shadow"></div>
and check it out in fiddle http://jsfiddle.net/MfV2Y/
Try this:
.one-edge-shadow {
width:200px;
height:200px;
border-style: solid;
border-width: 1px;
-webkit-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
-moz-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
}
Please take a look at this simple code:
http://jsfiddle.net/kerp3/
The box has an inner box shadow o all 4 sides. I need the box shadow to only appear on the left and bottom sides.
How to change this code:
box-shadow: inset 0 0 9px 0 #000;
Does this help, this should work cross browser.
.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
Here is the original author :
http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/
.shadow {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
}
See this page:
http://css-tricks.com/snippets/css/css-box-shadow/
With a small change to the color and the offsets it becomes fairly simple:
div { width: 300px; height: 300px;
box-shadow: inset 5px 5px 5px -3px #666;
}
The jsFiddle of it.
I was going to suggest using negative values like so:
div { width: 300px; height: 300px;
/* Try this. */
box-shadow: inset 4px -4px 7px -4px #000;
}
The first 4px pushes the shadow box to the left by 4px, hiding what you would normally see on the right, if you left it at 0.
The second -4px value pushes the shadow vertically down, again hiding the top shadow.
The higher 7px blur value gives me a more than a I need, but if I add a spread of -4px, that extra blur will be clipped. Leaving only a soft grey shadow edge, instead of the hard black one you'll usually see.
See my example here:
http://jsfiddle.net/khalifah/vVUB5/
You can't apply a shadow only to certain sides of a <div>, but you can adjust the X and Y offsets so that the shadow gets clipped on the sides where you don't want it.
This gave me the effect you're looking for in Safari:
box-shadow: 7px -7px 9px #000 inset;