I have a project with materializecss, and I would like to put the label when class="active" (which is always) to the left of the input field. How do I move the label to the left, while shrinking the input field relatively so it all fits nicely in the column?
Here is my jsfiddle of the scenario
You can also use the inline class http://materializecss.com/forms.html
<div class="row">
<form class="col s12">
<div class="row">
<div class="col s12">
First Name:
<div class="input-field inline">
<input id="last_name" type="text" class="validate square-box align-right">
</div>
</div>
</div>
</form>
</div>
As #Alastair said in the comments under the question, I simply removed the labels altogether, and just used a <p></p> in its own div, and placed that div in a col to the left of the input
Related
I have a bootstrap 4 form group with a simple text input. I am using it within a kendo dialog, however the dialog isn't automatically expanding so that the label's text and the input are all on a single line. I have played around with the CSS but can't figure out what is causing the issue. See the below dojo link.
https://dojo.telerik.com/EQuwayex
You can change your "test" div to following. I set a fixed with for the label and then reduced the textbox div to col-md-6.
<div id="test">
<div class="container">
<div class="form-group row">
<label style="width:100px" class="col-form-label">Display Text</label>
<div class="col-md-6">
<input type="text" class="displayText form-control" />
</div>
</div>
</div>
</div>
If you want to control the width of the dialog you can add a width to the Dev element and then change the width of the textbox div element.
<div id="test" style="width:700px">
<div class="container">
<div class="form-group row">
<label style="width:100px" class="col-form-label">Display Text</label>
<div class="col-md-9">
<input type="text" class="displayText form-control" />
</div>
</div>
</div>
</div>
Please note that I am a developer, not a designer.
I need to separate card div for two columns in desktop mode. I mean "This should be in Left Side" should be display on left side and "This should be on right side" should be display on right side.
I use following HTML.
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-block">
<div class="col-md-4">
This should be in Left Side
</div>
<div class="col-md-8">
This should be on right side
</div>
</div>
</div>
If you want to test online here is the jsfiddle (https://jsfiddle.net/uxfjwhpc/1/).
What is my mistake and how to correct it?
The classes col-* works when they are wrapped under row class. You can find the updated code below for card-block div. Hope this helps.
<div class="card-block">
<div class="row">
<div class="col-md-4">
This should be in Left Side
</div>
<div class="col-md-8">
This should be on right side
</div>
</div>
</div>
<div class="row card-block">
<div class="col-md-4">
This should be in Left Side
</div>
<div class="col-md-8">
This should be on right side
</div>
</div>
This will work for you.
I have the same issue with adding Form inside Card in Bootstrap. Here is my implementation.
From the original bootstrap standard form implementation:
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</form>
I need to adjust it to this to work:
<form action="/action_page.php">
<div class="row">
<label for="email" class="col-md-2">Email:</label>
<input type="email" class="form-control col-md-10" id="email" placeholder="Enter email" name="email">
</div>
</form>
I need to change form-group class to row class to make sure form-horizontal class should work fine inside the card of bootstrap.
I have a gorgeous Bootstrap form that works great and is beautifully responsive for mobile. However, some form fields get too narrow when they're on a mobile screen.
For example, here's a few fields from the desktop version, which is awesome:
And here's the same part of that form, but in the mobile view:
As you can see, the fields get a little narrow. I'd much prefer the form to just wrap these fields onto their own lines at 100% width. Is there a way to do that in Bootstrap?
for mobile secreen use class col-xs-12 and for desktop use col-lg-12
for more info visit this site
http://getbootstrap.com/css/
The layout you are looking for is
<div class="row">
<div class="col-md-12 col-sm-12">
</div>
<div class="col-md-4 col-sm-12">
</div>
<div class="col-md-4 col-sm-12">
</div>
<div class="col-md-4 col-sm-12">
</div>
</div>
Fiddle
The Bootstrap framework has various classes to help with this. First of all make sure all of your form fields have the form-control class applied. This makes your controls go to 100% width of the container. Secondly use the col-* classes to specify the sizes at different resolutions. As this is Bootstrap, always think mobile first. For example:
<div class="container">
<div class="row">
<div class="col-xs-12">
<input id="country" class="form-control" />
</div>
<div class="col-xs-12 col-sm-4">
<input id="city" class="form-control" />
</div>
<div class="col-xs-12 col-sm-4">
<input id="state" class="form-control" />
</div>
<div class="col-xs-12 col-sm-4">
<input id="zipcode" class="form-control" />
</div>
</div>
</div>
I am using
Foundation 5's "prefix" class to style labels for HTML input elements. The problem I am having, is that when the text inside of the label becomes too long (either because of the text's length or from resizing the browser window), the label begins to disappear, and allows the input element to take over the rest of the space. This is the code I am using:
<div class="row">
<div class="large-6 columns">
<div class="row collapse prefix-radius">
<div class="small-3 columns">
<span class="prefix">A Test Label</span>
</div>
<div class="small-9 columns">
<input type="text" placeholder="Value">
</div>
</div>
</div>
</div>
Here is a jsfiddle.
The behavior that I would like to have, is that all of the text on the label is always visible, and the input element becomes smaller (or hidden) if needed.
Bootstrap actually handles this situation exactly as I would like (jsfiddle), but I need to emulate this behavior using Foundation.
You can adjust the column classes to specify different widths for different screen sizes.
<div class="row">
<div class="large-6 columns">
<div class="row collapse prefix-radius">
<div class="small-5 medium-4 large-3 columns">
<span class="prefix">A Test Label</span>
</div>
<div class="small-7 medium 8 large-9 columns">
<input type="text" placeholder="Value">
</div>
</div>
</div>
</div>
I've got a couple of elements that I'm really struggling to align horizontally. I've got a JSFiddle example to try and illustrate it. The layout that I'm trying to achieve in particular is looking at the first/left most Email field.
I wish to have both the slider and input field aligned with the label if space, or both of them sitting below the label otherwise.
What I find however is that I end up with the controls wrapping, or large amounts of whitespace (or greyspace even) around the textbox - rather than it filling to take up the space.
Unfortunately I've found that I can't seem to use col classes on the toggle because this causes issues with the rendering of it.
EDIT
So I've tried using a bootstrap library for my sliders instead in the hope that it'll allow for a better layout, and attempted to use bootstrap column sizing. This leaves me with the similar problems as you can see in the following JSFiddle.
I would still prefer to use the first library if I can so bonus if I can solve the problem with the first library.
My HTML looks something like this:
<div id="settingsBar" class="">
<div class="well bs-component col-sm-6">
<form class="form-horizontal">
<fieldset>
<legend style="color: #ccc;">General</legend>
<div class="form-group row">
<label for="txtBackColor" class="col-sm-12 col-md-3 col-lg-4 control-label">Background Colour</label>
<div class="col-sm-12 col-md-9 col-lg-8 row">
<div class="col-xs-1 col-sm-0"></div>
<input id="tglBackColor" type="checkbox" name="tglBackColor" class="bootstrap-toggle form-control" checked data-on-color="success" data-off-color="danger">
<input id="txtBackColor" type="text" class="colorPicker form-control col-xs-10 col-sm-7 col-md-10 col-lg-11" />
</div>
</div>
</fieldset>
</form>
</div>
</div>
The problem I have is that depending on the size, the boxes overlap. What I want is for the final colour box to shrink down to fit on the same line, and the label sits either above or inline if there's enough space.
Bootstrap has col- controls for different sizes.
You can control rendering of collumns by using proper classes, e.g.:
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>
This means, collumn with such class will render over responsivity like 100% of container width (smartphones), 50% of container width (tablets), 33% of container width(small notebook/desktop screens) and 25% of container widht on high resolution displays.
You can also try put div with class="row" before your columns. Class row will cancel left and right padding of collumns. E.g.:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">some div</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">some div</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">some div</div>
</div>
You can find more info about bootstrap basics here