CSS: Issue with input text width

Question

User1324715958 posted

I'm having an issue with my css not setting the width of my input text to 90% of the div. Not sure where I'm going wrong here:

text input:

#login-text-input{
    font-size: 25px;
    color:black;
    width="90%";
    border: 2px solid black;
    border-radius: 4px;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}

div:

#login-div-title{
    padding: 5px 5px 25px 5px;
    width: 100%;
}

page:

@{
    ViewBag.Title = "Log_In";
}

<h2>Log In</h2>
<br />
<br />
<br />
<div id="login-div">
    <div id="#login-div-title">
        <p id="login-paragraph">Email</p>
        <p id="#login-text-input"><input type="text"></p>
        <p id="login-paragraph">Password</p>
        <p id="#login-text-input"><input type="text"></p>
    </div>
</div>

Answer 1

User753101303 posted

Hi,

Seems a syntax issue. You have 

width: 100%;

which is correct and 

 width="90%";

which is wrong (maybe a confusion with the old attribute based HTML syntax).

Answer 2

User1324715958 posted

Fixed that issue but still not getting the width i need:

New Code:

@{
    ViewBag.Title = "Log_In";
}

<h2>Log In</h2>
<br />
<br />
<br />
<div id="login-div">
        <p id="login-paragraph">Email</p>
        <p><input type="text" id="login-text-input"></p>
        <p id="login-paragraph">Password</p>
        <p><input type="text" id="login-text-input"></p>
    <div id="login-button-div"><p><a href="@Url.Action("Edit","Controller")" id=""><img src="@Url.Content("~/Content/Images/Log_In.png")" /></a></p></div>   
</div>

#login-div{
    margin: auto;
    width: 50%;
    background: #5BCBBC;
    padding: 10px;
}

#login-text-input{
    font-size: 14px;
    color:black;
    width: 100%;
    margin: 5px;
}

Answer 3

User839733648 posted

Hi UOKSoftware,

This is because MVC includes a default CSS file Site.css which has the style.

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

You could comment it and you will see the following effect.

Best Regards,

Jenifer 

Answer 4

User-2054057000 posted

Add this below css code:

#login-text-input input{
    width: 100%;
}

and remove # from id:

<p id="login-text-input"><input type="text"></p>