S. Jashoria S. Jashoria - 2 months ago 63
CSS Question

ionic - input box width

I am having a problem with the input boxes in my login.html. I am not able to increase the width of the input boxes. If I am increasing the width to 100%, the height is increasing with it.

Here is an image showing the width.



I want the width to be almost double of it.
Here is a link to my html and css:
https://jsfiddle.net/ybkjv8uw/

item.item-input {
border: none;
position: relative;

left: 0px;
top: 135px;
background-color: transparent;
}

Answer

.view-content {
  background-color:#85b818;
}
.img-div {

    position: relative;
    left: 110px;
    top: 35px;
    

}

.item.item-input {
	border: none;
	position: relative;
    
    left: 0px;
    top: 135px;
    background-color: transparent;
    width:100%;
}
.item.item-input span{width:auto;}
.item.item-input input{width:68%;}
/*.item-input-inset .item-input-wrapper input {
    padding-left: 4px;
    height: 29px;
    background: transparent;
    line-height: 18px;
    // you should add the following:
    box-sizing: border-box; 
    width: 100%;
}*/
input::-webkit-input-placeholder {
 color: white;
}



label {

    /*display: block; width: 100%;*/
    width:200px;
    float: left;
    /*clear:left;*/
    text-align:right;
    /*padding-right:10px;*/
}

input{
    /*float:left;*/

}

.enter-div {
	text-align: center;
}

.enter-button {
	position: relative;
    top: 170px;
	width: 280px;
	height: 50px;
    border-radius: 25px;
	border: none;
	background-color: green;
	color: white;
}

.foyopass-div {
	position: relative;
	text-align: center;
	top: 200px;
	color: white;
}
<ion-view class="view-content">
      <div class="img-div">
        <img src="img/main_logo_icon.png" style="width : 40% ; height : 20%" > 
      </div>
      <div>
          <label class="item item-input">
            <span class="input-label" ><img src="img/email_icon.png" style="width: 30%" ></span>
            <input type="email" placeholder="Email">
          </label>
      </div>
      <div>
          <label class="item item-input">
            <span class="input-label" ><img src="img/password_icon.png" style="width: 25%"></span>
            <input type="password" placeholder="Password">
          </label>
      </div>
      <div class="enter-div">
      <button class="enter-button">
        Enter
      </button>


      </div>
      <div class="enter-div">
        <a href="" class="foyopass-div">forgot your password?</a>
      </div>
</ion-view>

Comments