I need to split input to few cells. I want to draw few blocks and in each user press, one of the blocks will fill. Something like this:
What is the right way to do it?
This is the code of the form:
<div class="wrap-log-in-form" *ngIf="step == 'pass'">
<input type="text" class="spliting-input" maxlength="6">
<div class="buttens-log-in">
<input type="button" value="אמת">
<input type="button" value="קבל הודעה בטלפון">
</div>
</div>
You can use a CSS background image on the input and try to use letter-spacing to get the text to fall in the correct areas, BUT this is really hard and not a great solution.
The issue is each device and browser displays characters slightly differently so the spacing is always off just a bit. This is pretty hacky but works if you only have access to the CSS.
A better solution
Use Javascript to parse the input and split each character into its own element with unique placement and background styling.
Related
I am trying to make an input field with a (right-aligned) label in semantic ui. The documentation shows an example of a cornered label that works fine (http://semantic-ui.com/elements/input.html) , but when I try to use a plain label it breaks the layout of the input field
I made a fiddle that explains my attempt (http://jsfiddle.net/26fqd39d/ ).
The following code works fine (taken from the documentation): It shows an input field with a label on the right which fits in the layout of the input field.
<div class="ui labeled input">
<input type="text" value="#"></input>
<div class="ui corner label"><i class="copy icon"></i></div>
</div>
I don't want to use a cornered label though, since there is not enough room for my scenario (I would like to display some units in this label, like km, mi, etc).
I change it to use a regular label:
<div class="ui labeled input">
<input type="text" value="#"></input>
<div class="ui label"><i class="copy icon"></i></div>
</div>
As you can see in the fiddle, the label breaks on the new line.
How can I create an input field with a right-aligned label using semantic-ui ? An explanation of why this doesn't work will also help me understand how to build layouts using semantic-ui.
Thanks.
I played around a bit and found a work-around that uses right (or left) aligned icons instead of labels. Hope this helps.
<div class="ui right icon input">
<input type="text" placeholder="Copy copy copy">
<div class="icon"><i class="copy icon"></i></div>
</div>
http://jsfiddle.net/12pjjrp7/4/
I'm not quite familiar with Semantic but you could keep your corner class and override the right borders like so:
.ui.action.input > .button {
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
Use !important as it should be overriding the current style and don't forget to be specific with your class selector (so it only affects the buttons you want to). or use a style attribute.
I am trying to code an input form with instructions throughout. I would like the text to not be selectable, but of course I would like the input to be selectable so that the users can modify their text easily.
My HTML looks something like this:
<div id="form">
<header> Some header text </header>
Instructions on what to do.
<form>
<label>first name:</label><input type="text" name="fname" />
<label>last:</label><input type="text" name="lname" />
<label>email:</label><input type="text" name="email" />
</form>
<div id="extras"> A bunch of separate notes and maybe a textarea box</div>
</div>
and my CSS looks something like this:
#form{ user-select:none; }
#form form input{user-select:auto}
A couple of notes:
I included all the css for various browsers in my actual code.
I tried user-select:text, and it did not work.
I have many bits of text separated into different sections, so I very much prefer to remove the ability to select as the default behavior and just apply the ability to select to the inputs. Applying code to make each little bit of text unselectable would be a pain.
Even if I did the above fix, I would still be curious about this issue.
Anyone know why this is happening?
There's no such thing as user-select: auto; You should use user-select: text;
Your given code works, so you may want to include the rest of the code or link to it.
Something like this:
Where the user would click on any area of the button and it would select that radio button.
Any suggestions?
As far as I can tell, radio buttons as self closed, and can't wrap around other elements.
The best way is to just wrap the <input> in its <label>, as clicking a label also has the effect of focusing its associated input:
<label>
<input name="transfer" type="radio">Bank Deposit
</label>
No javascript required: Demo: http://jsfiddle.net/GTGan/
If you need to style the label text separately, just wrap it in a <span>.
use Bootstrap, to create buttons around radiobuttons:
<label class="btn btn-lg btn-default">
<input type="radio"> Something
</label>
Have you tried using the LABEL tag? For accessibility sake we should be using label tags to associate labels to form controls all of the time. Not only does that help tie things together for screen readers, but it also makes the label as well as the control clickable.
You can read a bit more detail and find an example here:
http://webaim.org/techniques/forms/screen_reader#labels
You could use javascript for achieving this effect by giving it an onClick event, or you could just use jQuery in combination with some gui-plugins. I'd prefer this solution for cross-browser compatibility.
I saw some results via the related questions but didn't actually seem to show what I want.
Looking for a way to simply style the button in all major broswers easily.
<input type="file" name="file" id="file" size="29" class="formButton" />
<span class="smalltext">(.txt only)</span>
I want the browse button to use the CSS, I have seen some results that put a fake button on top of the real one, is that really the best approach to take?
Currently, there's no way to consistently style a file input field across browsers. You could use one of the various "tricks" out there (which as you mentioned simply overlay the button), but beware that you might interfere with keyboard access to the field.
Don't try this!
Even if you get it working, there's still browsers like Safari that use non-standard file selection widgets!
It's best to let the native file widget show through.
The best solution I've found is to either overlay your own as you've mentioned, or use something like Dojo, which effectively does the same thing. As far as I know, you can't style the file input button.
Actually, with JqueryUI you can do it by simply:
Javascript for rollover (not required):
$(".fg-button:not(.ui-state-disabled)")
.hover(
function(){
$(this).addClass("ui-state-hover");
},
function(){
$(this).removeClass("ui-state-hover");
}
)
Button Code:
<input type="submit" name="something" id="something" value="Submit" class="fg-button ui-state-default ui-corner-all">
Not that due to IE being a Microsoft product, the rounded corners gracefully degrade.
I can change the width of an upload field with the size attribute:
<input type="file" size="20">
But CSS's width, which works fine for regular input fields and other forms controls, seems to have no effect here, even on Firefox:
<input type="file" style="width: 20em">
Is there another way to accomplish this?
I'm not sure if this will help but this article seems to go quite in-depth into various ways of styling a file-input:
http://www.quirksmode.org/dom/inputfile.html