I need to manage units associated to number input in html forms.
Forms are generated from xml files (that I can change if necessary) :
Voltage : <input type="number"/> V
Some layout may visually separate unit (V) from input : I want them to be tied together.
Ideally, unit is displaied inside the input, like an always visible placeholder.
I thought about using pseudo-element ::after but
In case you weren’t aware, an doesn’t allow ::before or ::after pseudo elements. None of the different input types do.
https://www.scottohara.me/blog/2014/06/24/pseudo-element-input.html
Does anyone have a good practise to easily support this ? (html or css)
This should give you a head start :
.input-with-unit {
white-space: nowrap;
}
.input-with-unit > input {
width: 100%;
padding-right: 2rem;
}
.input-with-unit > label {
position: absolute;
margin-left: -1rem;
margin-top: 0.125rem;
}
<div class="input-with-unit" style="width: 12rem;">
<input type="number" />
<label>V</label>
</div>
<div class="input-with-unit" style="width: 9rem;">
<input type="number" />
<label>A</label>
</div>
Related
What I expect to happen is the h3 within the <Card> component to be styled.
I have created the styles for the h3 element within the <Card> component. The .card styles are applied but not the .card h3 styles are not.
I've searched the docs thinking this might be a scoping issue but couldn't find anything. Any ideas where I'm going wrong?
Features.astro
<ul>
{features.map(feature =>
<li>
<Card>
<h3>{feature.title}</h3>
<p>{feature.body}</p>
</Card>
</li>
)}
</ul>
Card.astro
<div class="card">
<slot />
</div>
<style>
.card {
background: red;
}
.card h3 {
background: black;
color: white;
display: inline-block;
padding: .5rem;
margin: 0;
}
</style>
<style> tags are scoped by default, this means they only apply styles to elements directly inside the file. Because your <h3> element is actually in the Features.astro file it is outside the scope of Card.astro. If you want to style <h3> from inside Card.astro you would have to use the global styling
I have a strange issue i cannot explain. i am using the play framework and when i try to run the View below it only works when i REPEAT the form action below... it works but i know it's not right. appreciative if anyone can help explain or correct.
#(errorMessage: String = "")(implicit messages: Messages)
#helper.form(routes.ApplicationHomeController.login) {
#main(title = messages("single.title")) {
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="userbox">
<form action="#{routes.ApplicationController.doLogin()}" method="post"></form>
<form action="#{routes.ApplicationController.doLogin()}" method="post">
<div style="color: red">#errorMessage</div>
<h1 id="logintxt" style="background-color: rgb(11, 146, 9);
background-position: initial;
background-repeat: initial;">Driver Service <b>ß</b>eta</h1>
<div id="submit_giff" style="display: none;">
<hi> Authenticating: <img src="/assets/images/loader-bar.gif" align="absmiddle"> </hi>
</div>
<input id="name" name="userName" placeholder="Username" style="opacity: 1;
background-color: rgb(255, 255, 255);
background-position: initial;
background-repeat: initial;">
<input id="pass" name="password" type="password" placeholder="Password" style="opacity: 1;
background-color: rgb(255, 255, 255);
background-position: initial;
background-repeat: initial;">
<p id="namealert" style="display: none;
opacity: 1;">Username:</p>
<p id="passal" style="display: none;
opacity: 1;">Password:</p>
<input id="loginbtn" style="opacity: 0.2;
cursor: default;" type="submit" value="Login">
</form>
</div>
<script src="/assets/javascripts/login.js"></script>
}
}
Two immediate observations.
One: #helper.form(...) will write a <form> element into the HTML that ultimately gets generated. Your view then includes other literal <form>s nested inside the first form. Nested forms are invalid HTML. You have one form submitting to routes.ApplicationController.doLogin and the other submitting to routes.ApplicationController.login. Who knows which of these the browser will actually submit to? We can't really predict because nested forms are invalid.
Two: you have your #main(...) view nested inside your #helper.form(...). I assume your main view contains <html>...</html>. This is going to result in HTML that starts with a <form> element, inside which is the <html> element. This is horribly invalid markup too.
My guess is one or both of these issues are your problem.
Try taking your generated HTML and running it through an HTML validator like https://validator.nu/. Fix any issues the validator finds, don't nest forms, and decide which (single) route the login form should actually submit to.
I am trying to make a responsive header/navigation form that has the following properties:
Has some type of label that is inline and vertically centered with the input box when the viewport is above a certain width.
At small viewport sizes, the label should center itself vertically above the input & button and the input/button combo should be 100% of the screen width.
Have a visually combined input and button, like the ones used in Bootstrap that won't split into separate lines
Either fill the width of the screen or be centered as the whole unit (header+input+button) when they're all on the same line
I have used this JS fiddle as a the starting point for the form to break the labels into a separate line on small widths and have successfully gotten it to work and for the label to center above the input at small viewports as well.
My code so far is
CSS
form > div {
clear: both;
overflow: hidden;
padding: 1px;
margin: 0 0 10px 0;
}
form > div > fieldset > div > div {
margin: 0 0 5px 0;
}
form > div > label,
legend {
width: 25%;
float: left;
padding-right: 10px;
text-align: right;
vertical-align: center;
}
form > div > div,
form > div > fieldset > div {
width: 75%;
float: right;
}
form > div > fieldset label {
font-size: 90%;
}
fieldset {
border: 0;
padding: 0;
}
#media (max-width: 600px) {
form > div {
margin: 0 0 15px 0;
}
form > div > label,
legend {
width: 100%;
float: none;
margin: 0 0 5px 0;
text-align: center;
}
form > div > div,
form > div > fieldset > div {
width: 100%;
float: none;
}
input[type=text],
input[type=numeric],
textarea,
select {
width: 100%;
}
}
HTML
1st Attempt
<header class="page-header row center-block">
<div class="center-xs">
<form class="main-form input-group" action="/caulcuate" method="post">
<label for="number" class="control-label"><h1 class="h1">BIG Label Header</h1></label>
<input type="number" name="number" min="10" max="6856" step="1" id="number" class="main-input"
placeholder="number goes here" required autofocus>
<span class="input-group-btn">
<button id="calculate" class="btn btn-lg btn-primary" type="submit">
100?
</button>
</span>
</form>
</div>
</header>
Attempt 2
<header class="page-header">
<form action="#">
<div>
<label class="desc" id="title1" for="numberhere"><h1>BIG Label Header</h1></label>
<div>
<input type="number" name="numberhere" min="10" max="6856" step="1" id="numberhere" class="main-input"
placeholder="number goes here" required autofocus>
<!--<span class="input-group-btn">-->
<button id="calculate" class="btn btn-lg btn-primary" type="submit">
100?
</button>
<!--</span>-->
</div>
</div>
</form>
</header>
Specific problems I'm having
In Attempt 2, I commented out the <span> that Bootstrap uses to group the button and input field because it will otherwise always put the button on a separate line.
In both attempts, the header label is not vertically centered with respect to the input box. I had it centered in an earlier iteration of Attempt 1, but I can't seem to get it back.
Attempt 1 just isn't centered properly at any size where the header row isn't taking up the full screen width. Attempt 2 does center consistently but the label header is too far from the input box at large screen sizes, so it's only centered in that there is roughly equal whitespace between the page border and the contents of the header.
Ideas for solution
Currently, the HTML in Attempt 1 seems like it is closer to what I want in terms of the label header and the button both being smooshed right up against the input box. Attempt 2, however, actually is responsive at small screen sizes.
It seems that maybe if I nest enough <div>s and am clever with their classes, I'll eventually get something that works about right, but would probably be fragile.
The other solution I thought of is to create two separate <header>s and wrap them in a pair of <div>s and use a #media query to change between which <div> is visible. This seems less fragile than using a ton of nested tags but also requires some code duplication. However, it seems like it might be the simplest option so far.
Somewhat related to switching between which <div> to display depending on the screensize, I suppose there probably is some jQuery way to do this and maybe CSS is currently the wrong tool for the heavy lifting in this case.
P.S. I wish I knew more about vector illustration so I could give an example of exactly what I'd want without all the descriptive text.
I would like to have a form which has a horizontal layout on the first level, but then within one row there can be a form "inline" which I want to have a vertical (the default) layout. Is there an easy way to achieve this?
Note: .form-inline doesn't do what I'm looking for, as it doesn't put the inside labels on top of the inputs.
So far I have something like this:
<div class="form-horizontal">
<div class="control-group">
<label class="control-label">
outer label
</label>
<div class="controls ### SOMETHING TO CLEAR/OVERRIDE form-horizontal ###">
### INLINE FORM WITH SAME STRUCTURE IS HERE ###
</div>
</div>
</div>
Boostrap can't do this by default, but I've included this in my fork https://github.com/jasny/bootstrap/blob/master/less/jasny-forms.less#L40
Please consider using Jasny's extensions to Bootstrap http://jasny.github.com/bootstrap
or just use this CSS
.form-vertical .form-horizontal .control-group > label {
text-align: left;
}
.form-horizontal .form-vertical .control-group > label {
float: none;
padding-top: 0;
text-align: left;
}
.form-horizontal .form-vertical .controls {
margin-left: 0;
}
.form-horizontal .form-vertical.form-actions,
.form-horizontal .form-vertical .form-actions {
padding-left: 20px;
}
.control-group .control-group {
margin-bottom: 0;
}
With the HTML
<form class="form-horizonal">
# Horizal controls here
<div class="form-vertical">
<div class="control-group">
<label class="control-label">Label</label>
<div class="controls">Something here</div>
</div>
</div>
</form>
Here is #jasny-arnold-daniels CSS updated for Boostrap 3. In 3 form-group replaces control-group, form-control replaces control. Also needs #user9645 's change to width. New CSS is:
.form-vertical .form-horizontal .form-group > label {
text-align: left;
}
.form-horizontal .form-vertical .form-group > label {
float: none;
padding-top: 0;
text-align: left;
width: 100%
}
.form-horizontal .form-vertical .form-control {
margin-left: 0;
}
.form-horizontal .form-vertical.form-actions,
.form-horizontal .form-vertical .form-actions {
padding-left: 20px;
}
.form-group .form-group {
margin-bottom: 0;
}
You do not need to write custom CSS for Bootstrap 3. Instead of putting your class of form-horizontal on the form tag, only put a wrapper div with that class around the form elements that you want to be horizontal (and supporting column-size classes for the horizontal items).
For example, this would work:
<form>
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">I'm a horizontal form element</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="form-group">
<label>I'm a vertical form element</label>
<input type="text" class="form-control">
</div>
</form>
This works because the vertical form is automatically used for a form with no class explicitly stated. That 'lack of a class' can be seen in the docs here.
I was unsure exactly what you were looking for but I tried to guess.
I made a form with a two vertical lines the second line with multiple form elements.
I used inline-block to do this.
http://jsbin.com/icoduh/1/edit
Is it possible to apply a css(3) style to a label of a checked radio button?
I have the following markup:
<input type="radio" id="rad" name="radio"/>
<label for="rad">A Label</label>
What I was hoping is that
label:checked { font-weight: bold; }
would do something, but alas it does not (as I expected).
Is there a selector that can achieve this sort of functionality? You may surround with divs etc if that helps, but the best solution would be one that uses the label ''for'' attribute.
It should be noted that I am able to specify browsers for my application, so best of class css3 etc please.
try the + symbol:
It is Adjacent sibling combinator. It combines two sequences of simple selectors having the same parent and the second one must come IMMEDIATELY after the first.
As such:
input[type="radio"]:checked+label{ font-weight: bold; }
//a label that immediately follows an input of type radio that is checked
works very nicely for the following markup:
<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>
... and it will work for any structure, with or without divs etc as long as the label follows the radio input.
Example:
input[type="radio"]:checked+label { font-weight: bold; }
<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>
I know this is an old question, but if you would like to have the <input> be a child of <label> instead of having them separate, here is a pure CSS way that you could accomplish it:
:checked + span { font-weight: bold; }
Then just wrap the text with a <span>:
<label>
<input type="radio" name="test" />
<span>Radio number one</span>
</label>
See it on JSFiddle.
I forget where I first saw it mentioned but you can actually embed your labels in a container elsewhere as long as you have the for= attribute set. So, let's check out a sample on SO:
* {
padding: 0;
margin: 0;
background-color: #262626;
color: white;
}
.radio-button {
display: none;
}
#filter {
display: flex;
justify-content: center;
}
.filter-label {
display: inline-block;
border: 4px solid green;
padding: 10px 20px;
font-size: 1.4em;
text-align: center;
cursor: pointer;
}
main {
clear: left;
}
.content {
padding: 3% 10%;
display: none;
}
h1 {
font-size: 2em;
}
.date {
padding: 5px 30px;
font-style: italic;
}
.filter-label:hover {
background-color: #505050;
}
#featured-radio:checked~#filter .featured,
#personal-radio:checked~#filter .personal,
#tech-radio:checked~#filter .tech {
background-color: green;
}
#featured-radio:checked~main .featured {
display: block;
}
#personal-radio:checked~main .personal {
display: block;
}
#tech-radio:checked~main .tech {
display: block;
}
<input type="radio" id="featured-radio" class="radio-button" name="content-filter" checked="checked">
<input type="radio" id="personal-radio" class="radio-button" name="content-filter" value="Personal">
<input type="radio" id="tech-radio" class="radio-button" name="content-filter" value="Tech">
<header id="filter">
<label for="featured-radio" class="filter-label featured" id="feature-label">Featured</label>
<label for="personal-radio" class="filter-label personal" id="personal-label">Personal</label>
<label for="tech-radio" class="filter-label tech" id="tech-label">Tech</label>
</header>
<main>
<article class="content featured tech">
<header>
<h1>Cool Stuff</h1>
<h3 class="date">Today</h3>
</header>
<p>
I'm showing cool stuff in this article!
</p>
</article>
<article class="content personal">
<header>
<h1>Not As Cool</h1>
<h3 class="date">Tuesday</h3>
</header>
<p>
This stuff isn't nearly as cool for some reason :(;
</p>
</article>
<article class="content tech">
<header>
<h1>Cool Tech Article</h1>
<h3 class="date">Last Monday</h3>
</header>
<p>
This article has awesome stuff all over it!
</p>
</article>
<article class="content featured personal">
<header>
<h1>Cool Personal Article</h1>
<h3 class="date">Two Fridays Ago</h3>
</header>
<p>
This article talks about how I got a job at a cool startup because I rock!
</p>
</article>
</main>
Whew. That was a lot for a "sample" but I feel it really drives home the effect and point: we can certainly select a label for a checked input control without it being a sibling. The secret lies in keeping the input tags a child to only what they need to be (in this case - only the body element).
Since the label element doesn't actually utilize the :checked pseudo selector, it doesn't matter that the labels are stored in the header. It does have the added benefit that since the header is a sibling element we can use the ~ generic sibling selector to move from the input[type=radio]:checked DOM element to the header container and then use descendant/child selectors to access the labels themselves, allowing the ability to style them when their respective radio boxes/checkboxes are selected.
Not only can we style the labels, but also style other content that may be descendants of a sibling container relative to all of the inputs. And now for the moment you've all been waiting for, the JSFIDDLE! Go there, play with it, make it work for you, find out why it works, break it, do what you do!
Hopefully that all makes sense and fully answers the question and possibly any follow ups that may crop up.
If your input is a child element of the label and you have more than one labels, you can combine #Mike's trick with Flexbox + order.
label.switchLabel {
display: flex;
justify-content: space-between;
width: 150px;
}
.switchLabel .left { order: 1; }
.switchLabel .switch { order: 2; }
.switchLabel .right { order: 3; }
/* sibling selector ~ */
.switchLabel .switch:not(:checked) ~ span.left { color: lightblue }
.switchLabel .switch:checked ~ span.right { color: lightblue }
/* style the switch */
:root {
--radio-size: 14px;
}
.switchLabel input.switch {
width: var(--radio-size);
height: var(--radio-size);
border-radius: 50%;
border: 1px solid #999999;
box-sizing: border-box;
outline: none;
-webkit-appearance: inherit;
-moz-appearance: inherit;
appearance: inherit;
box-shadow: calc(var(--radio-size) / 2) 0 0 0 gray, calc(var(--radio-size) / 4) 0 0 0 gray;
margin: 0 calc(5px + var(--radio-size) / 2) 0 5px;
}
.switchLabel input.switch:checked {
box-shadow: calc(-1 * var(--radio-size) / 2) 0 0 0 gray, calc(-1 * var(--radio-size) / 4) 0 0 0 gray;
margin: 0 5px 0 calc(5px + var(--radio-size) / 2);
}
<label class="switchLabel">
<input type="checkbox" class="switch" />
<span class="left">Left</span>
<span class="right">Right</span>
</label>
asd
html
<label class="switchLabel">
<input type="checkbox" class="switch"/>
<span class="left">Left</span>
<span class="right">Right</span>
</label>
css
label.switchLabel {
display: flex;
justify-content: space-between;
width: 150px;
}
.switchLabel .left { order: 1; }
.switchLabel .switch { order: 2; }
.switchLabel .right { order: 3; }
/* sibling selector ~ */
.switchLabel .switch:not(:checked) ~ span.left { color: lightblue }
.switchLabel .switch:checked ~ span.right { color: lightblue }
See it on JSFiddle.
note: Sibling selector only works within the same parent. To work around this, you can make the input hidden at top-level using #Nathan Blair hack.
UPDATE:
This only worked for me because our existing generated html was wacky, generating labels along with radios and giving them both checked attribute.
Never mind, and big ups for Brilliand for bringing it up!
If your label is a sibling of a checkbox (which is usually the case), you can use the ~ sibling selector, and a label[for=your_checkbox_id] to address it... or give the label an id if you have multiple labels (like in this example where I use labels for buttons)
Came here looking for the same - but ended up finding my answer in the docs.
a label element with checked attribute can be selected like so:
label[checked] {
...
}
I know it's an old question, but maybe it helps someone out there :)