HTML input element not taking 100% width

Question

My angular code on gitHub is using ngRoute, where the page1.html gets loaded in ngView.

I have input element in page1.html with its css set to 100% thus is expected to fill the width of the view but it is only taking about 70% or so.

If the main element width set to 100%, the footer buttons disappear, image 2. Not sure why? Thanks

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    height: 1%;
}

header > button {
    height: 1.5em;
    width: 1.5em;
    font-size: 1.5em;
    top: 0;
}

label.pageTitle {
    display: inline-block;
    width: calc(100% - 5em);
    text-align: center;
}

header {
    border-bottom: 1px solid black;
    width: 100%;
    position: fixed;
    top: 0;
}

main, .mainMenu {
    position: absolute;
    top: 2.5em;
}

main {
    z-index: -2;
}

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

footer > button {
    font-size: 1em;
    padding: 0.5em 1em;

}
input {
    font-size: 1em;
    padding: 0.25em;
    margin: 0.25em;
    width: 100%;
}

header, footer {
    background-color: white;
}

.horizontal-style {
    display: table;
    width: 100%
}
.horizontal-style li {
    display: table-cell;
    padding: 2px;
}
.horizontal-style button {
    display: block;
    border: 1px solid black;
    text-align: center;
    background: #dfdfdf;
}

footer button {
    width: 100%;
    border-radius: 6px;
    font-size: 1.5em;
}

.mainMenu {
    padding-left: 1em;
    background-color: #dfdfdf;
    width: 70%;
    border-radius: 0 6px 10px 0;
}

ul {
    list-style-type: none;
}

ul li img {
    vertical-align: middle;
    padding-right: 0.25em;
}

a {
    display: block;
    padding: 1em 0em;
}

//   page1.html
<section>
    <input type="text" placeholder="page1-input1">
</section>

//   index.html

<!doctype html>
<html lang="en" ng-app="appModule">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <meta name="viewport" content="width=device-width" />

    <base href="http://localhost:63342/students/">

    <!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>-->
    <!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script>-->
    <script src="angular.js"></script>
    <script src="angular-route.js"></script>

    <script src="app.js"></script>

    <script src="services/routing.js"></script>
    <script src="services/menuToggle.js"></script>

    <script src="controllers/menuToggleCtrl.js"></script>
    <script src="controllers/mainMenuCtrl.js"></script>
    <script src="controllers/page1Ctrl.js"></script>
    <script src="controllers/page2Ctrl.js"></script>
</head>

<body>
<header ng-controller="MenuToggleCtrl">
    <button class="menuLeft" type="button" ng-model="clicked" ng-click="menuToggle()">&#9776;</button>
    <label id="pageTitle" class="pageTitle">Select item from list</label>
    <button class="menuRight" type="button">&#8942;</button>
</header>

<section class="mainMenu" ng-controller="MainMenuCtrl" ng-if="!clicked">
    <ul>
        <li ng-repeat="item in menuItems">
            <a href="#/{{item.name}}">
                <image ng-src="images/{{item.image}}.png"></image>
                {{item.name}}
            </a>
        </li>
    </ul>
</section>

<main ng-view></main>

<footer ng-controller="MenuToggleCtrl" ng-if="clicked">
    <ul class="horizontal-style">
        <li><button type="button">NO</button></li>
        <li><button type="button">EXTRA</button></li>
        <li><button type="button">YES</button></li>
    </ul>
</footer>

</body>
</html>

Maybe its parent element is not 100% width. (<section>) I can't really fix it without a working plunkr/codepen/jsfiddle. — RaidenF
– RaidenF, Commented Jan 28, 2016 at 11:15
link where you can git it, sorry I don't know how to plunkr it. — Fred J.
– Fred J., Commented Jan 28, 2016 at 11:20

Steele Rocky · Accepted Answer · 2016-10-11 22:52:48Z

6

Try to set the min-width of the input field to 100% something like this in your CSS code:

input {
    font-size: 1em;
    padding: 0.25em;
    margin: 0.25em;
    width: 100%;
    min-width: 100%; }

this should solve the issue when input is not getting 100% width of its parent.

answered Oct 11, 2016 at 22:52

Steele Rocky

6518 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Siva · Accepted Answer · 2016-01-28 11:30:21Z

The input element is getting inserted inside 'main' container. Hence, set the width to 100% for the main tag.

main, .mainMenu {
    position: absolute;
    top: 2.5em;
    width: 100%;
}

Here is the fix

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    height: 1%;
}

header > button {
    height: 1.5em;
    width: 1.5em;
    font-size: 1.5em;
    top: 0;
}

label.pageTitle {
    display: inline-block;
    width: calc(100% - 5em);
    text-align: center;
}

header {
    border-bottom: 1px solid black;
    width: 100%;
    position: fixed;
    top: 0;
}

main, .mainMenu {
    position: absolute;
    top: 2.5em;
    width: 100%;
}

main {
    z-index: -2;
}

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

footer > button {
    font-size: 1em;
    padding: 0.5em 1em;

}
input {
    font-size: 1em;
    padding: 0.25em;
    margin: 0.25em;
    width: 100%;
}

header, footer {
    background-color: white;
}

.horizontal-style {
    display: table;
    width: 100%
}
.horizontal-style li {
    display: table-cell;
    padding: 2px;
}
.horizontal-style button {
    display: block;
    border: 1px solid black;
    text-align: center;
    background: #dfdfdf;
}

footer button {
    width: 100%;
    border-radius: 6px;
    font-size: 1.5em;
}

.mainMenu {
    padding-left: 1em;
    background-color: #dfdfdf;
    width: 70%;
    border-radius: 0 6px 10px 0;
}

ul {
    list-style-type: none;
}

ul li img {
    vertical-align: middle;
    padding-right: 0.25em;
}

a {
    display: block;
    padding: 1em 0em;
}

//   index.html

<!doctype html>
<html lang="en" ng-app="appModule">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <meta name="viewport" content="width=device-width" />

    <base href="http://localhost:63342/students/">

    <!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>-->
    <!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script>-->
    <script src="angular.js"></script>
    <script src="angular-route.js"></script>

    <script src="app.js"></script>

    <script src="services/routing.js"></script>
    <script src="services/menuToggle.js"></script>

    <script src="controllers/menuToggleCtrl.js"></script>
    <script src="controllers/mainMenuCtrl.js"></script>
    <script src="controllers/page1Ctrl.js"></script>
    <script src="controllers/page2Ctrl.js"></script>
</head>

<body>
<header ng-controller="MenuToggleCtrl">
    <button class="menuLeft" type="button" ng-model="clicked" ng-click="menuToggle()">&#9776;</button>
    <label id="pageTitle" class="pageTitle">Select item from list</label>
    <button class="menuRight" type="button">&#8942;</button>
</header>
<!--
<section class="mainMenu" ng-controller="MainMenuCtrl" ng-if="!clicked">
    <ul>
        <li ng-repeat="item in menuItems">
            <a href="#/{{item.name}}">
                <image ng-src="images/{{item.image}}.png"></image>
                {{item.name}}
            </a>
        </li>
    </ul>
</section>
-->

<main ng-view>
  <section>
    <input type="text" placeholder="page1-input1">
</section>
  </main>

<footer ng-controller="MenuToggleCtrl" ng-if="clicked">
    <ul class="horizontal-style">
        <li><button type="button">NO</button></li>
        <li><button type="button">EXTRA</button></li>
        <li><button type="button">YES</button></li>
    </ul>
</footer>

</body>
</html>

Please see my update, setting main width to 100% makes the footer shrink as in the second image. the mainMenu needs to remain at 70%, thx :), Why did you comment the section in the html file?
You can just specify the width: 100% to only for the main tag. I commented out the section in the html file because it was overlapping the input element with i add both. The scroll bars are introduced after adding 100% width to main tag, since input has some border, margin and padding which increase the input width more than available.

Simeon Vanov · Accepted Answer · 2016-01-28 11:16:24Z

2

Well you mainMenu is set to width 70% and when you assign a child of mainMenu width 100% it takes the whole width of its parent, so eventually your input will be long as you parent container which means 70%. If you want it to be 100% of the screen you have to make the mainMenu 100%.

answered Jan 28, 2016 at 11:16

Simeon Vanov

3714 silver badges13 bronze badges

1 Comment

Fred J. Over a year ago

No, the section element with class mainMenu is NOT the parent of the input element which is the child of a different section element in a different file page1.html which does not have the same class.

Collectives™ on Stack Overflow

HTML input element not taking 100% width

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related