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.
Related
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
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');
});
How do I set clr-error when the input is invalid. I've set the input field to be required.
But on page load the clr-control-error message always shows and the exclamation-circle never shows even when i click into input and click away
<form class="clr-form clr-form-horizontal">
<div class="clr-form-control clr-row">
<div class="clr-control-container clr-col-4">
<div class="clr-input-wrapper">
<clr-icon shape="search"></clr-icon>
<input type="text" id="search" class="clr-input" [(ngModel)]="model" name="search" required/>
<clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
<clr-control-error>Search Input is required</clr-control-error>
</div>
</div>
</div>
</form>
what you've got is the HTML/CSS version of form controls, which don't have built in validation. We've not yet created an input-group functionality that also works with Angular, so you'll have to manually toggle the display of the error message. You can see a few demos of this here: https://github.com/vmware/clarity/blob/master/src/dev/src/app/forms/input-group/input-group.html
Here is a demo based on your example of something that works with our markup, but currently requires some manual effort on your end. Eventually this will be supported in an Angular component, but not at the moment.
https://stackblitz.com/edit/clarity-light-theme-v1-0-xfaw9m?file=src/app/app.component.html
<form class="clr-form clr-form-horizontal">
<div class="clr-form-control clr-row">
<div class="clr-control-container clr-col-6" [class.clr-error]="search.invalid && search.touched">
<div class="clr-input-wrapper">
<div class="clr-input-group">
<clr-icon class="" shape="search"></clr-icon>
<input type="text" id="search" class="clr-input" [(ngModel)]="model" name="search" required #search="ngModel" />
</div>
<clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
<div class="clr-subtext" *ngIf="search.invalid && search.touched">Search Input is required</div>
</div>
</div>
</div>
</form>
I'm trying to style input type file using Laravel -> Form::file:
<div class="col-md-3">
{{ Form::file('images[]', ["class"=>"required","multiple"=>true]) }}
</div>
It should look like that:
I've searcched in web for some solutions and there are possibilities with js but in some of them it's commented that it's not always working in all browsers.
What should be the right way to do that?
you can solve this through "label" tag.
<label for="form-file">Upload a file</label>
<input type="file" name="file" id="form-file" class="hidden" />
Just hide the input with css or move it somewhere -9999px to the left, and style the label element to whatever you desire. When user will click on label it will show the upload popup.
I hope this help.
EDIT:
Here is example.
With "Form::file" you can just add label and add ID parametr to your function.
Here's you can attach your file in laravel
<div class="row p-t-20">
<input id="file-upload" type="file" name="banner_url" value="{{old('banner_url')}}" />
{!! $errors->first('banner_url', '
<p class="text-warning errorBag">:message</p>') !!}
<label for="file-upload" id="file-drag">
<div id="file-cont">
Select a file to upload
<br />OR
<br />Drag a file into this box
</div>
<br />
<br /><span id="file-upload-btn" class="btn btn-success">Add a file</span>
</label>
<progress id="file-progress" value="0">
<span>0</span>%
</progress>
<output for="file-upload" id="messages"></output>
this is the easy and the stylish way to input your file in laravel
please share anyone who needs this thanks
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.