Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to make box container expand when text-field does?

How to make box container expand when text-field does?

Problem

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)





How can I get it to expand dynamically in width?

Thank you for taking the time to read this.

Problem courtesy of: LearningRoR

Solution

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;
}
Solution courtesy of: Robert

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to make box container expand when text-field does?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×