css - HTML input element not taking 100% width -

-

my angular code on github is using ngroute, page1.html gets loaded in ngview.

i have input element in page1.html css set 100% expected fill width of view taking 70% or so.

if main element width set 100%, footer buttons disappear, image 2. not sure why? enter image description here

* {      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;  }    {      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 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>

the input element getting inserted inside 'main' container. hence, set width 100% main tag.

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

here 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;  }    {      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 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>


Comments

Post a Comment

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

-
i beginner in autocad plugins .i have created array of circle using following code. now, have hatch circles in array .how that??how hatch circles @ once? moreover, how can return hatch method , use hatch objects.sorry language.thanks in advance. [assembly: commandclass(typeof(beamsection.class1))] namespace beamsection { public class class1 { //class1 obj = new class1(); [commandmethod("beamatsupport")] public void addlightweightpolyline() { // current document , database document acdoc = application.documentmanager.mdiactivedocument; database accurdb = acdoc.database; promptpointresult ppr = acdoc.editor.getpoint("\nselect starting point "); var ucs = acdoc.editor.currentusercoordinatesystem; point3d startingpt = ppr.value.transformby(ucs); list<double> radius = new list<double>(); radius.add(0.5); ...
Read more

ios - UITEXTFIELD InputView Uipicker not working in swift -

-
hello trying pop uipickerview view programmatically when user clicks on textfield. have tried doesn't doing anything. isn't working. nothing happening when click textfield class userprofiletableviewcontroller: uitableviewcontroller,uitextfielddelegate,uipickerviewdelegate,uipickerviewdatasource { var itempicker: uipickerview! = uipickerview() @iboutlet weak var gendertxtfield: uitextfield! var gender = ["male","female"] override func viewdidload() { super.viewdidload() gendertxtfield.delegate = self itempicker!.delegate = self itempicker!.datasource = self itempicker!.backgroundcolor = uicolor.blackcolor() self.gendertxtfield.inputview = itempicker } func numberofcomponentsinpickerview(pickerview: uipickerview) -> int{ return 1 } // returns # of rows in each component.. func pickerview(pickerview: uipickerview, numberofrowsincomponent component:...
Read more