ionic - input box width

Question

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

Solution 1

.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>

Solution 2

.item.item-input {
     border: none;
     position: relative;
     top: 135px;
     background-color: transparent;
     width:100%;
     }


.item.item-input>span{
  width:auto;
  }
.item.item-input>input{
  width:68%;
}

Comments

[andreas]

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.