Made the following code for the input field and its label:
<input id="username" class=uk-input" type="text">
<label for="username">Enter your username</label>
Is it possible to make input field's label floating like on the illustration by using just UIKit's techniques?
I've searched through UIKit documentation but found nothing related to my question.
If it is impossible with the UIKit then what is the best practice?
The UIKit class uk-form-label can be used here:
<form class="uk-form-stacked">
<div class="uk-margin">
<label class="uk-form-label" for="username">Enter your username</label>
<div class="uk-form-controls">
<input class="uk-input" id="username" type="text" placeholder="...">
</div>
</div>
</form>
More information here: https://getuikit.com/docs/form#layout
Related
I am trying to add a class to my div if there is an error in the ModelState. Is there any way to achieve this?
This is how the Html looks like:
<div class="form-group">
<label class="control-label" asp-for="Vorname">Vorname</label>
<input type="text" class="form-control" asp-for="Vorname">
<span class="form-control-feedback" asp-validation-for="Vorname"></span>
</div>
Now I would like to add the class has-danger to the div arround it if an error occured on the Vorname property. Like this:
<div class="form-group has-danger">
<label class="control-label" asp-for="Vorname">Vorname</label>
<input type="text" class="form-control" asp-for="Vorname">
<span class="form-control-feedback" asp-validation-for="Vorname"></span>
</div>
Edit:
If your form is submitted to the server with no prior on-the-client JavaScript validation (old school! but it works), then you’ve got yourself the easiest of all fixed. You can just add these CSS classes whenever the page loads in the following fashion:
$(document).ready(function() {
$('.input-validation-error').parents('.form-group').addClass('has-danger');
});
This question already has answers here:
What's the point of having hidden input in HTML? What are common uses for this?
(12 answers)
Closed 5 years ago.
Full code:
<form accept-charset="UTF-8" action="/" method="get">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
</div>
<label for="first">First name:</label>
<input id="first" name="first" type="text" value="Steve" /><br/>
<label for="last">Last name:</label>
<input id="last" name="last" type="text" value="Jobs" /><br/>
<input name="commit" type="submit" value="Submit" />
</form>
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
</div>
I'm reading the code from another people. I don't understand why he made a fake input field here. Is it for the css purpose?
Hidden fields are used programatically, to pass information about the current page to the server.
Hidden fields can also be used to pass information back to scripts. This may include security tokens, or the name of the relevant row in the database. The user does not need to see this data, but it is passed back to the server on submission so that scripts function correctly behind the scenes.
I have a rails code like below for input fields.
Name:-<%=text_field_tag "specification[name1]","",:class=>"autocomplete form-control"%>
<br/>
Value:-<%=text_field_tag "specification[value1]","",:class=>"autocomplete form-control"%>
I want a name and one value to be aligned horizantally to each other.
Not sure how do I go about it. I hope the question is clear.
Thanks
There are millions of ways to do this but simplest one is to use them in a table:
<table>
<tr>
<td>Name:-<%=text_field_tag "specification[name1]","",:class=>"autocomplete form-control"%></td>
<td>Value:-<%=text_field_tag "specification[value1]","",:class=>"autocomplete form-control"%></td>
</tr>
</table>
Since you are already using bootstrap, you can use the form-inline class available in bootstrap and then use a form-group class for each label and field. Just add the form-inline class to the form tag.
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
This will show the two fields inline.
You can you it in this way as given in the bootstrap documentation.
Is there a way to style the "popup" when a field is invalid in AngularJS?
I have no idea WHERE this thing is styled? We also have Bootstrap loaded, not sure if it's there. Can't right-click to "find element" either.
That's the browser validation kicking in. Disable it as follows:
<form novalidate></form>
Edit: Example of a form using novalidate with AngularJS's validation:
<form name="form" class="css-form" novalidate>
Name:
<input type="text" ng-model="user.name" name="uName" required /><br />
E-mail:
<input type="email" ng-model="user.email" name="uEmail" required/><br />
<div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
<span ng-show="form.uEmail.$error.required">Tell us your email.</span>
<span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
</div>
</form>
I believe it is no longer possible to style these popups:
Link
I'm having some problems with the bootstrap forms. For some reason they all get messed up.
This is what it should look like:
http://i.imgur.com/vjCZvwc.png
This is how it shows up on my page:
http://i.imgur.com/48qtLc7.png
As you can see, it makes the input box smaller and it places 'br' code behind every line. It also puts a random 'p' in it without any closing tag. (nowhere to be found on the page)
My input code:
<form>
<fieldset>
<legend>Legend</legend>
<label>Label name</label>
<input type="text" placeholder="Type something…">
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox">
<input type="checkbox"> Check me out
</label>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form>
The output code in the browser:
<form>
<fieldset>
<legend>Legend</legend>
<p>
<label>Label name</label><br />
<input type="text" placeholder="Type something…"><br />
<span class="help-block">Example block-level help text here.</span><br />
<label class="checkbox"><br />
<input type="checkbox"> Check me out<br />
</label><br />
<button type="submit" class="btn">Submit</button><br />
</fieldset>
</form>
So my question is; What could possibly be causing this and how do I fix it?
I'm using Bootstrap v2.3.2 as a theme on wordpress and followed this tutorial, so most of my code looks like it.
blog.teamtreehouse (dot) com/responsive-wordpress-bootstrap-theme-tutorial
Thank you for taking the time to read this. :)
This is not a problem with Bootstrap, but with your WordPress editor (or how you're using it).
You'll need to use a plain text editor or reconfigure what your editor does to HTML on save.