W3.css How to make in one line? - html

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>

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)

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

Related

attaching text with a same behaviour on the top of one element a flex row

I have stack of dragable rows like the following.
and I am being asked to add titles (English keyword, French Keywords) on top of input boxes. like this second image. The major challenge here is to have the title aligned with input box while the screen is resized.(so the input boxes get resized, also there is hamburger, and garbage icons that are in the game)
Here is very simplified HTML codes for one row.
<div class="list-row">
<div class="handle">
<button type="button" class="icon-button">
<span class="sprite-grey-burger"></span>
</button>
</div>
<div class="stretch">
<input type="text" class="form-control"/>
</div>
<div class="stretch">
<input type="text" class="form-control"/>
</div>
<a href="#" class="delete-button">
<span class="sprite sprite-garbage-bin-black"></span>
</a>
</div>
and its simplified version of css
draggable-list .list-row {
display: flex;
}
.draggable-list .list-row .handle {
cursor: move;
display: flex;
}
.icon-button{
background-color: transparent;
border: none;
height: 38px;
}
.sprite-grey-burger {
// css to show a burger sign
}
.draggable-list .list-row .stretch {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
margin: 0 0.4em;
}
draggable-list .list-row .delete-button {
margin-left: 0.4em;
}
.sprite-garbage-bin-black {
// css to show garbage bin
}
I think, there should be flex solution, maybe, a new row on the top with the same flexes?!
but I don't know how!

Disabling link when setting position of elements

It sometimes happens to me that when I set position of some element (top: , right: and ...) some of my links will disable and when I put my mouse on it, The hand sign doesn't appear. I want to know why It happens and how can I improve that.
This is my page: [Google link is disabled.]
Can anyone explain my error and solve the problem?
My CSS Code:
#second_imglist {
position: relative;
right: -100px;
}
#squares {
position: absolute;
top: 630px;
right: 400px;
}
#imgset {
position: relative;
top: 30px;
}
Some HTML codes I think they create the problem:
<div class="w3-half">
<div data-ng-include="'variables/logo1.html'"></div>
<div class="w3-row w3-margin-top" id="imgset">
<div data-ng-include src="file"></div>
</div>
</div>
<div class="w3-half w3-center" id="img_controllers">
<div data-ng-include src="includehtml"></div>
</div>
</div>
<div class="w3-center" id="squares">
Google
<i class="fa fa-square" data-ng-click="nextslide(1)"></i>
<i class="fa fa-square-o" data-ng-click=""></i>
</div>
the i tags not inside of the a tag, so that's why hand cursor is not appearing...
and u can try adding cursor: pointer;to your i tags in css
i {
cursor: pointer;
}
should work.

I want to display text which file choose by user using css

i used this below css
.fileContainer [type=file] {
cursor: inherit;
display: block;
font-size: 999px;
filter: alpha(opacity=0);
min-height: 100%;
min-width: 100%;
opacity: 0;
position: absolute;
right: 0;
text-align: right;
top: 0;
}
for my html
<div class=" btn btn-primary fileContainer">
<div class="input-group">
<i class="fa fa-paperclip fa-inverse"></i> Attachment
<input type="file" ngf-select ngf-multiple="true"
ng-model="noteListData.files" name="files">
</i>
</div>
</div>
using this css i am not able to see that text .
help me out.
i want to display button as well as text also.
thank you
It turns out should be the attribute "opacity" instead of "filter". Try to set the "opacity" to 1.

How do I add text-based units like "lbs" floated to right inside of an input element (or outside of it)?

Is it possible to insert units inside an input element? Inside the <input> element is preferred, but outside is acceptable.
You can use something like this.
Outside box:
<input></input><span style="margin-left:10px;">lb</span>
Inside box:
<input style="padding-right:20px; text-align:right;" value="50"></input><span style="margin-left:-20px;">lb</span>
Fiddle
You can make use of bootstrap input-group component.
Note: The example below uses bootstrap 4 classes
<div class="input-group">
<input type="number" class="form-control">
<div class="input-group-append">
<span class="input-group-text"> m </span>
</div>
</div>
Here is the result below:
I would do this by nudging an extra element (like a span) over the input using position: relative and left: -20px.
Then some padding-right on the input element to ensure that the user's input wont overlap on the new element.
Example here:
https://jsfiddle.net/peg3mdsg/1/
If you want the units to show up right beside the number, you can try this trick (https://jsfiddle.net/ccallendar/5f8wzc3t/24/). The input value is rendered in a div that is positioned on top of the input, with the value part hidden. That way the units are positioned correctly. Just make sure to use the identical styles (font sizes, colors, padding etc).
const input = document.getElementById("input");
const hiddenValue = document.getElementById("hiddenValue");
const unitsValue = document.getElementById("unitsValue");
input.addEventListener("input", () => {
hiddenValue.innerHTML = input.value;
// Only show units when there is a value?
// unitsValue.innerHTML = (input.value.length > 0 ? " km" : "");
});
.wrapper {
position: relative;
width: 80px;
}
#input {
border: 2px solid #fee400;
background-color: #373637;
width: 100%;
font-family: serif;
font-size: 18px;
line-height: 25px;
font-weight: normal;
padding: 3px 3px 3px 10px;
color: white;
}
.units {
position: absolute;
top: 0;
left: 0;
right: 10px;
bottom: 0;
pointer-events: none;
overflow: hidden;
display: flex;
/* Match input styles */
font-family: serif;
font-size: 18px;
line-height: 25px;
font-weight: normal;
/* includes border width */
padding: 5px 5px 5px 12px;
color: white;
opacity: 0.8;
}
.invisible {
visibility: hidden;
}
#unitsValue {
/* Support spaces */
white-space: pre;
}
<div class="wrapper">
<input id="input"type="number" value="12" />
<div class="units">
<span class="invisible" id="hiddenValue">12</span>
<span class="units-value" id="unitsValue"> km</span>
</div>
</div>
Since you are using bootstrap, you can use input-groups component and override some of the bootstrap styling :
HTML
<div class="input-group unity-input">
<input type="text" class="form-control" placeholder="Enter unity value" aria-describedby="basic-addon2" /> <span class="input-group-addon" id="basic-addon2">
lbs
</span>
</div>
CSS
.input-group {
top:40px;
width:auto;
}
.unity-input .form-control {
border-right:0!important;
}
.unity-input .input-group-addon {
background:white!important;
border-left:none!important;
font-weight:bold;
color:#333;
}
Fiddle
Here: (numbers are arbitrary and you can play around with those, what's important is to float the input and the negative margin on the span holding the measurement unit)
CSS:
#form>span {
display: inline-block;
padding-top: 5px;
margin-left: -16px;
}
#form>input {
padding: 5px 16px 5px 5px;
float:left;
}
HTML:
<div id="form">
<span class="units">lb</span>
<input type="text" placeholder="Value" />
</div>
JSFiddle DEMO
The problem I have found with all of the previous answers is that, if you change the length of the units (for example, "€/month" instead of "lb") the <span> element won't be correctly aligned.
I found a better answer in another post, and it's really simple:
Html
<div class="wrapper">
<input></input>
<span class="units">lb</span>
</div>
CSS
.wrapper{
position: relative;
}
.units {
position: absolute;
right: 14px (or the px that fit with your design);
}
This way, you can even put a long unit such as "€/month" and it will still be correctly positioned.
using bootstrap:
<label for="idinput">LABEL</label>
<div class="input-group mb-3">
<input class="form-control" name="idinput" type="text" pattern="(-?[0-9]+(\.[0-9]+)?)" [(ngModel)]="input"/>
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">m3/s</span>
</div>
</div>
The only thing you can try with strictly css and html is placeholder and text align left. with jquery you could you the .addClass command.
http://jsfiddle.net/JoshuaHurlburt/34nzt2d1/1/
input {
text-align:right;
}

How to generate the following control using html and css

I am trying to create the following control with HTML / CSS. I need advice on the best way to implement this with solely HTML and CSS. I was able to implement it using different anchor () tags. But I am not sure that this is the best approach since it all has the same purpose.
The link, blue circle, and cart icon should take you to a different page.
Also - for the icon I am implementing font-awesome. http://fortawesome.github.io/Font-Awesome/icons/
Any advice and suggestions would be appreciated!
Here is a picture:
Here is my HTML so far - but I dont think it's the best approach...
<div id="check_out_utility" class="float_right">
<a id="check_out_utility_link" class="white_link float_left" href="#">Check Out</a>
<div id="shopping_cart" class="float_right">
<i class="fa fa-shopping-cart fa-3x white_color"></i>
</div>
</div>
Again, thanks
You may use absolute positioning within the cart icon.
I build a quick example from scratch
HTML:
<a class="cart" href="#">
Checkout
<span class="fa fa-2x fa-shopping-cart">
<span class="badge">3</span>
</span>
</a>
CSS:
.cart {
background-color: #2F4178;
display: inline-block;
width: 200px;
height: 20px;
text-decoration: none;
color: #FFF;
padding: 20px;
}
.cart .fa {
position: relative;
}
.cart .badge {
display: inline-block;
background-color: #478BFF;
border-radius: 50%;
padding: 3px;
color: #FFF;
width: 10px;
height: 10px;
text-align: center;
font-size: 11px;
position: absolute;
bottom: 0;
left: 0;
}
fiddle: http://jsfiddle.net/jqac30Lz/