I have an input field, and inside it on the right side there is a string that displays information to the user.
<div class="my_div_class">
<input class="my_input_class" type="text" placeholder="Search">
<span class="my_span_class">6000 available</span>
</div>
Using position relative and absolute, I places the span inside the input field.
However, if the user types a long query, the text will be under the span text.
Is there a way to force the input field to do the horizontal scroll when the user reaches a point before the right margin, ideally without using javascript?
You can add some padding-right to the input box.
.my_div_class {
position: relative;
width: 200px;
}
.my_input_class {
width: 100%;
padding-right: 100px;
box-sizing: border-box;
}
.my_span_class {
position: absolute;
right: 0;
top: 0;
}
<div class="my_div_class">
<input class="my_input_class" type="text" placeholder="Search">
<span class="my_span_class">6000 available</span>
</div>
.my_input_class {
padding-right: 1em; // Replace `1em` with the desired amount of padding
}
Related
What would be correct approach to aligning placeholder to the top of the field, while input text appearing normally in the middle?
Any way to do that with CSS on input/::placeholder only, or should i rather construct a wrapper with span that would disappear when active and input field below it?
Here's a fiddle of what i've got now: https://jsfiddle.net/ejsLfvdn/1/
And that's what it should look like up to customers will:
The input masks are not the case here, i'm only struggling with the placeholder being aligned to the top, while input should appear normally in the middle. The placeholder MUST disappear after filling input.
I don't think that you will be able to do this by directly targeting the placeholder pseudo class (::placeholder).
Only a small subset of CSS properties can be applied to this element and position is not one of them:
https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder
I think you will need to take the approach of a wrapper with span and input and position appropriately.
You could use something like this with the only issue being the input must have the required attribute.
* {
box-sizing: border-box;
}
.input {
display: flex;
flex-flow: column-reverse nowrap;
border: 1px solid gray;
width: 220px;
}
.input input:valid + label {
opacity: 0;
}
.input input {
width: 100%;
padding: 10px;
border: none;
}
<div class="input">
<input required id="username" name="username" type="text" />
<label for="username">Username</label>
</div>
I hope I achieved what you need.
btw, I used jquery to hide the placeholder while typing and display it again if the field is empty.
$('.form-control').keyup(function(){
var val = $(this).val();
if(val == ""){
$('.placeholder').show();
}else{
$('.placeholder').hide();
}
});
.input-cont{
position: relative;
}
.form-control{
border: 1px solid #DDD;
border-radius: 5px;
height: 40px;
padding-left: 8px;
}
.placeholder{
position: absolute;
top: 5px;
left: 8px;
color: #3dc185;
font-size: 12px;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<form>
<div class="input-cont">
<span class="placeholder">Imię</span>
<input class="form-control" type="text" name="name">
</div>
</form>
</body>
</html>
You can use translateY(-100%) on your placeholder to move the text upwards and then give your textbox some padding at the top to reveal the text:
.placeholder-offset {
font-size: 20px;
padding-top: 25px;
}
.placeholder-offset::placeholder {
color: red;
transform: translateY(-100%);
}
<input type="text" placeholder="Username" class="placeholder-offset" />
I need to hide a newsletter form when the user press the sign up button ("Cadastrar" in portuguese) and this is already happening as you may check on my website. However, the success message is rendered with unnecessary line breaks. Why?
I need to fill the entire height of the footer (without fixing the height in the child div, if possible), but the text should be vertically centered in the red box.
You'll probably find easy to check the problem by going to my website, filling the email address field and clicking the button bellow, but here is the HTML rendered there.
<div id="mc4wp-form-1" class="form mc4wp-form mc4wp-form-3571 mc4wp-ajax mc4wp-form-success">
<form method="post" lpformnum="1" _lpchecked="1">
<input type="email" name="EMAIL" class="text" placeholder="Seu email" required="">
<input type="submit" class="bt" value="Cadastrar"><span class="mc4wp-ajax-loader" style="display: none; vertical-align: middle; height: 16px; width: 16px; border: 0px; margin-left: 5px; background: url(/img/ajax-loader.gif) 50% 50% no-repeat;"></span>
<div style="position: absolute; left: -5000px;">
<input type="text" name="_mc4wp_required_but_not_really" value="" tabindex="-1">
</div>
</form>
<div class="mc4wp-response">
<div class="mc4wp-alert mc4wp-success">Obrigado, seu cadastro foi efetuado com sucesso! Por favor verifique seu e-mail.</div>
</div>
</div>
Here is an attempt to reproduce on jsfiddle.
Possible solution add float: left; property to mc4wp-error selector
.mc4wp-error {
background-color: #FEE7ED;
color: #F41952;
border-color: #F41952;
float: left; <----Add this
}
Reason why text is breaking
Newsletter, input and button pushing and breaking the text
Remove float:left from
footer form {
width: 100% !important;
float: left !important; <---Remove this
}
.mc4wp-alert {
position: absolute;
top: 0px;
min-height: 200px;
}
Mobile view and CSS changes max-width:480px
#media (max-width: 480px) {
footer form {
float: left !important; <---Remove this
}
.mc4wp-alert {
position: absolute;
top: inherit;
min-height: 200px;
bottom: -90px;
}
}
If you change:
.mc4wp-alert {
...
...
position: relative;
}
to position: fixed;, you will find that the space is actually occupied by the email text-box and the button. The solution is to use position: absolute;. I tested it in Chrome and IE11.
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;
}
Probably thi is a simple question. But I'm new with css and javascript.
I have a button below the textarea and I want the button to move along with the textarea when I extend it!
How can I do this?
To align button to textarea corner and keep it in same relative position while expand contract, try the following :
First of all, the HTML code :
<form>
<textarea></textarea>
<p>
<input type="reset"/>
<input type="submit" value="Submit"/>
</p>
</form>
Then, add css property :
form {
position: relative;
display: inline-block;
}
form textarea {
min-width: 140px;
}
form p {
margin: 0;
padding: 0;
display: block;
text-align: right;
}
Finally, here is the JsFiddle.
Enjoy your day!
I have an input of type button that is used to validate a form an input of type text.
I have seen that, for example, bootstrap lets you append some values to input. I am wondering how would I do append this input of type button into my input of type text.
I have added a screenshot of how I am thinking of it to be, but I am not sure which CSS strategy I would choose.
Thanks
It is nothing but a submit button with a text field
Demo
HTML
<div class="wrap">
<input type="text" />
<input type="button" value="Demo" />
</div>
CSS
.wrap {
display: inline-block;
position: relative;
}
input[type=text] {
padding: 10px;
width: 300px;
padding-right: 60px;
}
input[type=button] {
padding: 2px;
position: absolute;
right: 5px;
top: 5px;
}