Css Label Width Not Taking Effect


Answer :

Do display: inline-block:



#report-upload-form label {
padding-left:26px;
width:125px;
text-transform: uppercase;
display:inline-block
}


http://jsfiddle.net/aqMN4/



Use display: inline-block;



Explanation:



The label is an inline element, meaning it is only as big as it needs to be.



Set the display property to either inline-block or block in order for the width property to take effect.



Example:





#report-upload-form {
background-color: #316091;
color: #ddeff1;
font-weight: bold;
margin: 23px auto 0 auto;
border-radius: 10px;
width: 650px;
box-shadow: 0 0 2px 2px #d9d9d9;

}

#report-upload-form label {
padding-left: 26px;
width: 125px;
text-transform: uppercase;
display: inline-block;
}

#report-upload-form input[type=text],
#report-upload-form input[type=file],
#report-upload-form textarea {
width: 305px;
}

<form id="report-upload-form" method="POST" action="" enctype="multipart/form-data">
<p><label for="id_title">Title:</label> <input id="id_title" type="text" class="input-text" name="title"></p>
<p><label for="id_description">Description:</label> <textarea id="id_description" rows="10" cols="40" name="description"></textarea></p>
<p><label for="id_report">Upload Report:</label> <input id="id_report" type="file" class="input-file" name="report"></p>
</form>





I believe labels are inline, and so they don't take a width. Maybe try using "display: block" and going from there.



Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable