I am trying to make my text-fields expand when the container does. This is a picture of my container along with my text fields:
Now when I expand the Product Link text-field it results to this:
When it should be making the box bigger in height. This is my css I am using for the container and text-fields:
CSS
/* UserPrice Container & Fields */
#user-price-container {
background:#FFFFFF;
border:black solid 1px;
font-family:Arial, Helvetica, sans-serif;
margin-top:5px;
width: 950px;
}
.user_price_labels {
margin-left:5px;
font-weight:bold;
color:#78AF00;
}
.user-price-fields {
font-family:Arial, Helvetica, sans-serif;
border-right: 1px solid #90BF22;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 #FFFFFF, 0 1px 1px rgba(0, 0, 0, 0.17) inset;
color: #333333;
font-size: 13px;
-moz-box-sizing: border-box;
background: #FFFFFF;
border-color: black;
border-radius: 1px 1px 1px 1px;
display: inline-block;
height: 25px;
padding-left: 8px;
margin-left:5px;
}
/* Individual Text-fields*/
#user-price-price, #user-price-product, #user-price-exact-url {
margin-top:-2px;
}
#user-price-product-container {
margin-top:5px;
margin-left:5px;
}
#user-price-price-container {
margin-top:5px;
}
#user-price-product-store-container {
margin-top:-14px;
height:35px;
}
#user-price-exact-url-container {
margin-left:44px;
margin-top:-14px;
height:35px;
}
HTML(960gs)
<div id="user-price-container" class="grid_24">
<p id="user-price-product-container" class="grid_12"><label class="user_price_labels" for="user_prices_0_product_name">Product*</label><br />
<input class="user-price-fields" data-autocomplete="/prices/autocomplete_product_name" id="user-price-product" name="user_prices[0][product_name]" size="60" type="text" /></p>
<p id="user-price-price-container" class="grid_4"><label class="user_price_labels" for="user_prices_0_price">Price*</label><br />
<input autocomplete="off" class="user-price-fields" id="user-price-price" name="user_prices[0][price]" placeholder="00.00" size="10" type="text" /></p>
<p id="user-price-product-store-container" class="grid_11"><label class="user_price_labels" for="user_prices_0_product_store">Location*</label><br />
<input class="product_store" id="user_prices_0_product_store" name="user_prices[0][product_store]" size="30" type="text" /></p>
<p id="user-price-exact-url-container" class="grid_9"><label class="user_price_labels" for="user_prices_0_exact_url">Product Link</label><br />
<textarea class="user-price-fields" cols="40" id="user-price-exact-url" name="user_prices[0][exact_url]" rows="20"></textarea></p>
</div>
How can I get it to expand dynamically in width?
Thank you for taking the time to read this.
Remove the height from this class and I think it will work, maybe change it to min-height instead of removing it.
#user-price-exact-url-container {
margin-left:44px;
margin-top:-14px;
height:35px;
}
#user-price-exact-url-container{
resize: both;
overflow: auto;
min-width: 400px; /*suggest a mid-width & min-height*/
min-height: 400px;
}
I suggest the code above.
Related
Hello I am having issues centering a form for a login page. I am not to good with CSS and it has been a while since I have played with HTML. What I want to do is, center the input boxes and align the text left on top of the input fields, as well as have an image centered as well, like in the picture. I have tried adding different div id and tags to the form but I can not seem to figure out the css part. I appreciate any help and sorry if the CSS is sloppy.
body {
background-color:lightgray;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
h1 {
color: black;
}
p {
color: black;
}
html {
text-alight: center;
}
#login {
text-align:center;
}
input[type=text], input[type=date], input[type=password] {
width: 30%;
height: 50px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=submit] {
width: 30%;
height: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
#service_type, #series, #speaker, #users {
width: 30%;
height: 50px;
}
#media only screen and (max-device-width: 1024px){
input[type=text], input[type=date], input[type=password] {
width: 100%;
height: 50px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
height: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
#service_type, #series, #speaker, #users{
width: 100%;
height: 50px;
}
#keypad_users{
width: 345px;
height: 50px;
vertical-align:middle;
text-align:center;
border:1px solid #000000;
font-size:30px;
font-weight:bold;
}
#keypad {margin:auto; margin-top:10px;}
#keypad tr td {
vertical-align:middle;
text-align:center;
border:1px solid #000000;
font-size:18px;
font-weight:bold;
width:100px;
height:80px;
cursor:pointer;
background-color:#666666;
color:#CCCCCC;
}
#keypad tr td:hover {
background-color:#999999;
color:#FFFF00;
}
#display {
text-align:center;
width:345px;
margin:10px auto auto auto;
background-color:#000000;
color:#00FF00;
font-size:48px;
border:1px solid #999999;
}
#message {
text-align:center;
color:#009900;
font-size:18px;
font-weight:bold;
display:none;
}
}
<div id="login">
<form action = "login.php" id="login" method ="POST">
Username <br />
<input type="text" name="username" id="username" required /><br /><br />
Password <br />
<input type ="password" name="password" id="password" required /><br /><br />
<input type="submit" name="submit" value="Log in">
</form>
</div>
I've made a JSfiddle for you here (click me please) that resembles the picture you've added.
As requested to not use a third party like I've added the code here:
HTML
<div id="login">
<form action = "login.php" id="login" method ="POST">
<div class="picture">
</div>
<p>Username</p>
<input type="text" name="username" id="username" required /><br /><br />
<p>Password</p>
<input type ="password" name="password" id="password" required /><br /><br />
<input type="submit" name="submit" value="Log in">
</form>
</div>
CSS
body
{
background-color:lightgray;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#login
{
text-align:center;
width: 50%;
margin: 0 auto;
}
.picture
{
width:100px;
height: 100px;
border-radius: 100px;
background-color:red;
margin: 0 auto;
}
#login p
{
float: left;
}
input[type=text], input[type=date], input[type=password] {
width: 100%;
height: 50px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
height: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
EDIT:
New fiddle here: https://jsfiddle.net/gay1ufa1/2/
I've improved your HTML. All form inputs should have an associated label element. Also don't use br for spacing use padding/margin instead.
Further more use have a duplicated id, id's must be unique to the page.
#login_container /*This is Our base container for the login "control" */
{
width:30%; /*Define the width of the control*/
margin:auto; /*This Provide the horizontal centering of the control*/
padding:120px 10px 10px 10px; /*Add some padding, the first number is the top and provides room for the image*/
background-image:url(" http://fillmurray.com/100/100"); /*Add our background image, thanks Bill Murray*/
background-position:center 10px; /*Position our image, first is Horizontal alignment, second is top*/
background-repeat:no-repeat; /*One Bil Murray is more than enough*/
background-color: #F0F0F0; /*Base Background image*/
}
#login_container label
{
display:block; /*Label will now take up a whole line*/
margin-bottom:.25em; /*Give it some room underneath*/
}
#login_container input[type="text"], #login_container input[type="password"], #login_container input[type="submit"]
{
width:100%; /*Form controls now take 100% width of the container*/
margin-bottom:0.5em;
}
<div id="login_container"> <!-- Can't have duplicate ID's -->
<form action = "login.php" id="login" method ="POST">
<label for="username">Username </label>
<input type="text" name="username" id="username" required />
<label for="password">Password</label>
<input type ="password" name="password" id="password" required />
<input type="submit" name="submit" value="Log in">
</form>
</div>
One problem in your code is that you use the ID "login " twice, which must not be done. I put together a codepen, which you can find here:
http://codepen.io/anon/pen/dNWQgp
What I basically did (except adding a div representing the image in your picture): I assigned the following CSS to a wrapper DIV around the whole form and image. It uses flexbox to center the contents. Plus I assigned a width setting (40%) to the form element.
.wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
To center a div set margin-left and margin-right to auto and assign a fixed width to it. In your case, this would be for #login.
so i have this html code for radio buttons which works perfect on chrome but the css for radio buttons on firefox isnt working. What could be the problem?that is the code i have,is there anything im missing?
input[type='radio'] {
border-radius:50%;
outline:none;
}
input[type='radio']:before {
content:'';
display:block;
width:50%;
height:50%;
margin: 25% auto;
border-radius:50%;
}
input[type='radio']:checked:before {
background-color: #0496fd;
}
.bob-bound
{
padding-bottom:0.2px;
padding-right:10px;
margin:auto;
border: solid 0px blue;
height: 110px;
position:relative;
background-color: #f5f5f5;
}
.bob-bound-type-lable{
position: absolute;
margin-top:20px;
margin-left:30px;
border: solid 0px red;
width: 239px;
height: 18px;
font-family: HelveticaNeue-Light, Arial;
font-size: 16px;
color: #000000;
}
.bob-button {
width: 250px;
height: 46px;
vertical-align:right;
background-color: #ffffff ;
border: solid 1px #bfbfbf;
padding-left:5px;
font-family: ArialMT, Arial, sans-serif;
font-size: 15px;
margin-left:12px;
cursor:pointer;
}
.bob-button:hover {
background-color: #f3f8fd;
}
.bob-recommendation-button
{
position:absolute;
right:0px;
width: 292px;
top:49px;
border: solid 0px red;
}
.bob-Inbound{
position:absolute;
top:6px;
margin-left:8px;
width: 112px;
height: 17px;
font-family: ArialMT, Arial, sans-serif;
font-weight:bold;
font-size: 16px;
border: solid 0px red;
}
.bob-Outbound {
position:absolute;
top:6px;
margin-left:12px;
width: 239px;
height: 17px;
font-family: ArialMT, Arial, sans-serif;
font-weight:bold;
font-size: 16px;
border: solid 0px red;
margin-bottom:20px;
}
.bob-bound-type{
position: absolute;
width:437px;
margin-top:56px;
font-size: 14px;
margin-left:27px;
border: solid 0px red;
}
.bob-radio{
background:green;
width: 24px;
height: 24px;
background-color: #ffffff;
border: solid 1px #bbbbbb;
}
.bob-second-radio{
margin-left:120px;
}
<div class="bob-bound">
<div class="bob-bound-type-lable">
Contact Type
</div>
<div class="bob-bound-type">
<input type="radio" name="radiogroup" id="Inbound" class="bob-radio" value="Inbound" checked="checked"/>
<label for="Inbound" class="bob-Inbound">Inbound</label>
<input type="radio" name="radiogroup" id="Outbound" class="bob-radio bob-second-radio" value="Outbound"/>
<label for="Outbound" class="bob-Outbound">Outbound</label>
</div>
</div>
this is the way its supposed to display:
The general consensus is that styling radio buttons in Firefox with CSS is a fool's errand. But there are several workarounds that achieve the same effect. My personal favorite is to hide the actual radio button and instead use images to show if it is checked or unchecked.
There's a nice working example here:
Mozilla Firefox input radio button styling and default settings
Styling input elements (in particular radio buttons and checkboxes) can be unreliable across navigators. You're better off applying the styling to the label or a pseudo element.
HTML Section :
<div id='wrapper'>
<div id='box'>
Name:<br>
<input type='text' id='name' size='10'><br><br>
Message:<br>
<textarea id='message' size='15' ></textarea><br><br>
<br>
<div id='Send'> Send</div>
</div>
<div class='messages'>
<div id='loader'></div>
<ul class='update'></ul>
<?php //include(messages.php) ?>
</div>
</div>
CSS Section:
#box{
width:300px;
height: 230px;
border:solid #6895CC 1px;
-webkit-box-shadow: 0 2px 5px #666;
box-shadow: 0 2px 5px #666;
padding: 10px;
margin:50px 0 0 400px;
}
#name{
width:300px;
height: auto;
border:solid #6895CC 1px;
padding: 10px;
margin:5px 5px 0 2px;
border-radius: 5px;
}
#message{
width:300px;
height: auto;
border:solid #6895CC 1px;
padding: 10px;
margin:5px 5px 0 2px;
border-radius: 5px;
}
#send{
width: 50px;
border-radius: 5px;
padding: 5px;
background-color:#6895CC;
border:none;
color:#fff;
}
#send:hover{
background-color:#4E65C0;
}
body{
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
}
.messages{
display:inline;
width:250px;
height:638px;
overflow:hidden;
border:solid #8CACDD;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
float:right;
border-width:0 0 1px 1px;
}
How do i move the messages column up on the right ? I have already included the inline element which removes any next line character before and after. what needs to be done to get it up ?
try giving float:left to CSS #box.
#box {
border: 1px solid #6895CC;
box-shadow: 0 2px 5px #666666;
float: left;
height: 230px;
margin: 50px 0 0 400px;
padding: 10px;
width: 300px;
}
I'm not really sure where exactly you imagine to be "up on the right".
I guessed you mean up on the right side within the form.
To do that you have to give your form elements a wrapper div, like:
<div id='Form'>
<div id='box'>
Name:<br>
<input type='text' id='name' size='10'><br><br>
Message:<br>
<textarea id='message' size='15' ></textarea><br><br>
<br>
<div id='Send'> Send</div>
</div>
<div class='messages'>
<div id='loader'>test</div>
<ul class='update'></ul>
<?php //include(messages.php) ?>
</div>
</div>
and give the wrapper #Form element position: relative; and the .messages:
position: absolute;
top: 0;
right: 0;
look here if it what you want: FIDDLE
I have container div (gray box) with floating elements inside:
Bars are floating to the left and button if floating to the right. Now I want textbox to fill the empty space between the bars and the button.
Please note that bars count may vary during typind so textbox should be able to resize accordingly. So solutions with static widths (even if they are expressed in %) will not work.
How can I do it?
EDIT:
Here's my code:
HTML:
<div id="dp-container">
<ol id="tag-list">
<li dp-item class="dp-bar-table">sales</li>
<li dp-item class="dp-bar-field">cost</li>
</ol>
<input id="dp-input-str" type="text">
<input type="button" value="GO" style="float: right;">
<div style="clear:both;"></div>
</div>
CSS:
body {
font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}
ol {
display: inline;
margin: 0;
padding: 0;
vertical-align: middle;
list-style-type: none;
}
li[dp-item] {
background-color: #e0ffff;
display: inline-block;
float: left;
padding: 3px;
margin: 2px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#EBEBEB));
border: 1px solid lightgray;
border-radius: 3px;
}
.dp-bar-table {
color: blue;
font-weight: bold;
}
.dp-bar-field {
color: blue;
}
#dp-input-str {
border: none;
display: inline-block;
margin-left: 5px;
margin-top: 3px;
width: auto;
outline: none;
font-size: 12pt;
vertical-align: middle;
line-height: 25px;
box-shadow: none;
#dp-container {
display: inline-block;
border: 1px solid #d3d3d3;
height: 32px;
padding: 3px;
width: 90%;
}
#dp-find-str {
color: gray;
float: left;
margin-top: 10px;
margin-right: 8px;
}
May be that's you want check this http://jsfiddle.net/bYmM4/7/ . Write like this:
HTML
<div class="main">
<input type="button" value="test" />
<input type="button" value="test" />
<input type="button" value="Go" class="go"/>
<div class="textbox">
<input type="text" />
</div>
</div>
CSS
.main{position:relative; border:#333 1px solid}
input[type="button"]{width:8%; float:left;}
.textbox{
background-color:grey;
overflow:hidden;
position:relative;
}
.textbox input{
width:100%;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
input.go{float:right}
So i'm trying to make a login box with 2 fields and a submit button. The submit button position itself differently in EVERY browser. In Firefox it works as expected but in IE8 and Safari the vertical alignment gets screwed up. Any ideas to resolve this problem?
Here's a screendump of the issue: http://gefuhlkunder.dk/bla.jpg
<form action="">
<div>
<input type="text" name="brugernavn" class="login-input" value="Brugernavn" />
<input type="text" name="brugernavn" class="login-input" value="password" />
<input class="login-submit" type="submit" value="login" />
</div>
</form>
.login-input{
border:1px solid #bebebe;
font-family: 'FlamaBook', sans-serif;
font-size:10px;
letter-spacing:-0.4px;
text-transform:uppercase;
color:#464646;
font-size-adjust: 0.5;
height:18px;
line-height:18px;
text-align:center;
width:69px;
margin:0 3px 0 0;
}
.login-submit{
border:1px solid #bebebe;
font-family: 'FlamaBook', sans-serif;
font-size:10px;
letter-spacing:-0.4px;
text-transform:uppercase;
color:#464646;
font-size-adjust: 0.5;
text-align:left;
position:absolute;
padding: 0px 0px 0 3px;
width:59px;
height:20px;
line-height:20px;
background:#fff url(images/submit_bg.png);
cursor:pointer;
}
Try these
.login {
font-family: sans-serif;
font-size:10px;
border:1px solid #bebebe;
text-transform:uppercase;
text-align:center;
color:#464646;
cursor:pointer;
padding:3px;
margin-right:3px;
}
.login-submit {
margin-top:3px;
}
and
<form action="">
<div>
<input type="text" name="brugernavn" class="login login-input" value="Brugernavn" />
<input type="text" name="brugernavn" class="login login-input" value="password" />
<input class="login login-submit" type="submit" value="login" />
</div>
This is the best I could do so far using tables (checked on Firefox, Chrome and IE8). You can however notice a small discrepancy in IE8.
If you use this code, u need to put a background image in your button. Any text would mess up the layout. Can't believe it is so tricky to even try do such a simple things.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="firstTd">
<div class="styleOne">
<input id="searchEntry" value="" title="Search" size="41" type="text" name="searchEntry"/>
</div>
</td>
<td>
<div>
<button value="Search" class="buttonStyle" type="submit" name="myButton">
<span></span>
</button>
</div>
</td>
</tr>
</table>
table {
width: 342px;
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
position: relative;
border-bottom: 1px solid transparent;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
td, th {
display: table-cell;
vertical-align: inherit;
}
td.firstTd{
width: 281px;
}
div.styleOne {
background-color: #fff;
border: 1px solid #d9d9d9;
border-top-color: #c0c0c0;
height: 27px;
display: block;
width: 281px;
}
input#searchEntry{
font-size: 20px;
width: 278px;
}
button.buttonStyle{
padding: 12px 22px;
}
Try with:
height:18px;
margin: 3px 0 0;