1

I have few elements, 2 i and 1 input. The layout I using w3-col from a frameworks called w3.css, and a font icon library called FontAwesome. Since s7 + s5 = s12, why my elements still drop to the new row? The 3 elements in div s5 expected should be in the same line. Hope you guys can help me on this.

<div class="w3-row w3-section">
    <div class="w3-col s7">
        <label><b>Apple</b></label>
    </div>
    <div class="w3-col s5">
        <i id="plus" class="fa fa-plus" style="font-size:24px"></i>
        <input id="noOfApple" class="w3-input w3-border-0" type="text" name="noOfApple" value="1" size="3">
        <i id="minus" class="fa fa-minus" style="font-size:24px"></i>
    </div>
</div>
haxxxton
  • 6,422
  • 3
  • 27
  • 57
HenryLoke
  • 67
  • 1
  • 12

2 Answers2

1

w3.css doesnt currently support "input-group"s. I use the term input groups, because this is the term that Twitter Bootstrap uses to refer to what you're looking for. What we can do, is examine the Bootstrap input-group code, and extend w3.css's code to include similarly prefixed versions. Unfortunately, w3.css uses the class w3-input-group already, so we will use w3-inline-input-group.

HTML

<div class="w3-row w3-section">
    <div class="w3-col s7">
        <label><b>Apple</b></label>
    </div>
    <div class="w3-col s5 w3-inline-input-group">
        <i id="plus" class="fa fa-plus w3-input-group-addon"></i>
        <input id="noOfApple" class="w3-input w3-border-0" type="text" name="noOfApple" value="1" size="3">
        <i id="minus" class="fa fa-minus w3-input-group-addon"></i>
    </div>
</div>

CSS

.w3-inline-input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}
.w3-inline-input-group .w3-input {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
}
.w3-inline-input-group .w3-input:focus {
    z-index: 3;
}
.w3-input-group-addon,
.w3-inline-input-group .w3-input {
    display: table-cell;
}
.w3-input-group-addon
{
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}
.w3-input-group-addon {
    font-size: 24px;
    font-weight: normal;
    line-height: 1;
    text-align: center;
}

JSFIDDLE

NOTE: JsFiddle doesnt allow inclusion of non-https external files, so please scroll to the BOTTOM of the css pane to find the new/above css

PS. If you havent come too far in your project, and you're going to be working with form elements a lot, I would strongly suggest looking into the Twitter Bootstrap CSS framework (you can customise an export of the library, to exclude all JS if you want to build all your own stuff, but again, they have a lot of very useful out-of-the-box code that I would recommend). It's a great place to start, and is far more widely used that w3.css (at least in terms of jobs asking for a knowledge of it)

haxxxton
  • 6,422
  • 3
  • 27
  • 57
0

Markup you had written is correct. Your own code might be overwriting s7 and s5 class property float: left;

If you found it's overwriting then correct this.

Also add this style for input component

`.s5 {
  position: relative;

}

.s5 input {
   padding: 8px 15px;
}
.s5 i {
  z-index: 1; 
}
.s5 #plus { 
  position: absolute;
  left: 0;
  top: 5px
}
.s5 #minus { 
  position: absolute;
  right: 0;
  top: 8px
}`

Here is live example of your code :)

http://codepen.io/kaushik/pen/JERMwg

Rajbir Sharma
  • 111
  • 6
  • You are not including the FontAwesome library that OP is using http://codepen.io/anon/pen/VPKyOe – haxxxton Jan 16 '17 at 07:17
  • @haxxxton Yes! When you run the code, you will notice the input and - drop to new line. That what I mean. – HenryLoke Jan 16 '17 at 07:30
  • You need to write style for this component add below style in your css file. s5 { position: relative; } .s5 input { padding: 8px 15px; } .s5 i { z-index: 1; } .s5 #plus { position: absolute; left: 0; top: 5px } .s5 #minus { position: absolute; right: 0; top: 8px } now see codepen code may be that's what you wanted. http://codepen.io/kaushik/pen/JERMwg?editors=0110 – Rajbir Sharma Jan 16 '17 at 07:44