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!
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 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.
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;
}
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/