I need to finish simple form, but I'm loosing my mind dealing with CSS, etc. Here is a picture that shows what is wrong
As you can see, Label is position like 1px to the left and button is bigger than input. I'v used same input-group-addon with textarea, using this style
.input-group{
width: 100%;
}
.input-group-addon{
width: 220px !important;
}
.textarea-addon{
border-bottom-left-radius: 0px !important;
border-top-right-radius: 4px !important;
border:1px solid #ccc !important;
border-bottom: none !important;
}
And it works perfect, but using it with text input just looks ugly. Here is the code
<div class="col-sm-12">
<span class="input-group-addon textarea-addon">Account numbers</span>
<div class="input-group input-group-sm form-inline panel">
<input type="text" ng-model="model.accountNumber" id ="accountNumber" class="form-control" style="width:80%"> </input>
<input type="button" ng-click="add(accountNumber)" value="Add" class="btn btn" style="width:20%"></input>
</div>
</div>
Hope this will helpful for you, I have put new class to your code
.inputgroup_flex {
display: flex;
align-items: stretch;
border-width: 0;
}
.inputgroup_flex #accountNumber {
height: 36px;
}
https://codepen.io/Thakur92411/pen/QZLqNZ
Related
I created a to-do list with jQuery (see CodePen). I wanted the '+' button to be joined with the input box in which you add a to-do list item and for the two to be the same height.
Getting the button to match took a lot of trial and error with the padding. Setting its height to 1.5em to match the input box didn't work, even after setting it to box-sizing: border-box.
Is there a more efficient, accurate way to achieve this?
Here is the relevant CSS:
input[type=text] {
border: 1px solid #ccc;
height: 1.6em;
width: 28.23em;
color: #666;
height: 1.5em;
}
.button {
/* Needed to display button next to input box */
display: inline-block;
vertical-align: bottom;
box-shadow: inset 0px 1px 0 0 #fff;
/* Starts at top, transitions from left to right */
background: linear-gradient(#f9f9f9 5%, #e9e9e9 100%);
border: 1px solid #ccc;
font-size: 0.7em;
font-weight: bold;
/* First value sets top and bottom padding; second value sets right and left */
padding: 0.53em 0.7em;
text-shadow: 0 1px #fff;
text-align: center;
color: grey;
}
And HTML:
<form name="listForm">
<input type="text" name="listItem"/ placeholder="Add new">
</form><!-- Comment removes gap between inline-block elements
--><button class="button">+</button>
If you are using bootstrap, you can achieve this using input-group, please see: Bootstrap 4 input groups
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Add new" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">+</button>
</div>
</div>
If you want to implement it yourself, you need to put the input and button inside the form. To set their height to be equal, you can set the height of the button to be equal to the height input (1.6 em) + padding of the input (1px top + 1px bottom = 2px):
input[type="text"] {
border: 1px solid #ccc;
height: 1.6em;
width: 28.23em;
color: #666;
}
button.button {
margin-left: -30px;
height: -webkit-calc(1.6em + 2px);
height: calc(1.6em + 2px);
width:25px;
color: grey;
border:none;
}
<form name="listForm">
<input type="text" name="listItem" placeholder="Add new">
<button class="button">+</button>
</form>
reduce the width of the input by 1 em. And set button to float right, It should work.
I'm trying to achieve the following:
Create 3 input elements in a row
Each should have a logo to the left of it, centered perfectly.
Each should have a border-bottom that spans the logo as well.
Like the following image:
However with my current code the images can't be centered and the border doesn't span them. Here's my code:
input {
border: none;
width: 250px;
background-color: #393d49;
border-bottom: 1px solid #767D93;
padding: 10px;
}
form img {
width: 24px;
height: 24px;
}
<form>
<img src="assets/images/envelope.png" alt="Envelope icon indicating user's E-Mail.">
<input type="email" placeholder="E-Mail"><br>
<img src="assets/images/locked.png" alt="Lock icon indicating user's Password.">
<input type="password" placeholder="Password"><br>
<img src="assets/images/avatar.png" alt="Avatar icon indicating user's Name.">
<input type="text" placeholder="Username"><br>
</form>
As it was suggested, I would also use the font-awesome library. But if your not comfortable with that idea, here is how you can do without.
form, .form-row, input {
background-color: #051024;
}
.input-icon, label, input {
display: inline-block;
}
form {
padding: 0.8em 1.2em;
}
.form-row {
padding: 0.8em 0;
padding-bottom: 0.2em;
}
.form-row:not(:last-child) {
border-bottom: solid #18273a 1px; /* Only the last row has a border */
}
.input-icon {
width: 15px;
height: 15px;
margin: 0 10px;
}
label {
max-width:4em; /* Or the maximum width you want your lebel to be */
min-width:4em; /* Same */
color:white;
font-weight: 100;
}
input {
border:none;
padding: 0.8em 0.5em;
color: #6691c9;
font-size: 15px;
outline: none; /* No glowing borders on chrome */
}
<form>
<div class="form-row">
<!-- Put your image here, like so -->
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-email">Email</label>
<input id="form-email" type="email">
</div>
<div class="form-row">
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-password">Password</label>
<input id="form-password"type="password" placeholder="(8 characters min)">
</div>
<div class="form-row">
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-user">User</label>
<input id="form-user" type="text"><br>
</div>
</form>
If you're feeling adventurous
Try bootstrap, it has all you need to create cool web sites (it also includes the font-awesome library).
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;
}
Im having trouble getting rid of the border at the bottom of my website, www.goodlord.co. It is a single page scroller.
The last image is the problem I need to extend it to the end of the whole website but each time i do that the website its self extends. I would really appreciate any help.
Tom
This is the Style Sheet for the section css.
section{ background: #fff; }
body{ -webkit-font-smoothing: antialiased; #fefefe; }
#main-container{ overflow: hidden; }
input{ -webkit-appearance: none; }
input:focus{ outline: none; }
.nopad{ padding: 0px; }
.offix{ overflow: hidden; }
.pad-normal{ padding-top: 66px; padding-bottom: 34px; }
.pad-large{ padding-top: 60px; padding-bottom: 60px; }
.pad-end{ padding-top: 60px; padding-bottom: 60px; }
.pad-large-top{ padding-top: 99px; }
.pad-large-bottom{ padding-bottom: 99px; }
.pad-top{ padding-top: 66px; }
.pad-bottom{ padding-bottom: 66px; }
.space-top{ margin-top: 22px; }
.space-top-large{ margin-top: 44px; }
::selection {color:#fff;background:#444444;}
::-moz-selection {color:#fff;background:#444444;}
This is the index for the section.
<a id="contact-scroll"></a>
<section id="contact" class="text-divider bg-cover pad-end">
<img alt="Slider Background" class="divider-bg" src="img/estate.jpg" />
<div class="divider-overlay"></div>
<div class="row divider-content">
</div>
<div class="row divider-content">
<div class="medium-8 medium-centered columns">
<form id="contact-form" class="text-center">
<h1 class="text-white">Get in touch</h1>
<input id="form-name" type="text" placeholder="Name" />
<input id="form-email" type="text" placeholder="Email" />
<input id="form-msg" type="text" placeholder="Message" />
<div class="text-right">
<span id="details-error" class="text-white">*Error: Please complete all fields correctly</span>
<span id="form-sent" class="text-white">Thankyou, your enquiry has been sent!</span>
<div class="btn white-btn clear-btn"><h6 class="alt-h text-white">Clear</h6></div>
<div id="form-btn" class="btn white-btn"><h6 class="alt-h text-white">Send</h6></div>
</div>
</form>
</div>
</div>
Having a look, that last white border is actually padding, not border.
the final section with ID '#work' has the '.pad-large' class on it. remove it and the final image should butt up right to the bottom of the page.
You might need to restore the top padding of the item, as .pad-large adds 60px padding to the top and bottom of the item.
I have created 4 column grid in my html form. i want to have last label and textbox field to be align right side of the page.
I have tried using float:right property but it doesn't seem to work
In fiddle example it is not in single line.
.row {
margin: 10px;
}
.elements {
padding: 10px;
margin-left: 50px;
margin-top: 10px;
border-bottom: ridge;
border-bottom-color: #1f6a9a;
padding-left: 0;
}
.field {
font-size: 15px;
color: #b6d6ed;
}
label {
display: inline-block;
}
input {
background-color: transparent;
border: 0px solid;
height: 25px;
width: 60px;
color: #b6d6ed;
text-align: center;
}
/* I Tried Below Line to Right Align */
.row > .elements:nth-child(2) {
float:right;
}
<div class="row">
<span class="elements">
<label class="field" for="Title">Title</label>
<input id="Title" name="Title" type="text">
</span>
<span class="elements">
<label class="field" for="DateOfBirth">Date of Birth</label>
<input id="DateOfBirth" name="DateOfBirth" type="text" value="" class="hasDatepicker">
</span>
</div>
jsfiddle
Float the first span to the left:
.row > .elements:first-child {
float: left;
}
See it here: http://jsfiddle.net/3DtqB/2/
You have to put the elements class into a <div class=".."></div> and add an CSS command
.elements {
float: right;
margin-top: -[x]px
}
Also you should use two id's instead of a class elements like left_box and right_box and add the commands to the right box.
Simple fix, just add white-space:nowrap; to the .elements class.