I am working on an app that uses Bootstrap. I have a column along the right side of the page (similar to the "asked", "viewed", "hot meta posts", "jobs" area on this question's page). In that column, I need to add some controls that will allow the user to enter a range of values. I want these controls to fill up the available space. They need to look something like this:
[textbox] - [textbox]
start finish
In an attempt to create this, I have the following:
<div class="row">
<div class="col-xs-5">
<input type="text" class="form-control" />
</div>
<div class="col-xs-1">
-
</div>
<div class="col-xs-5">
<input tpe="text" class="form-control" />
</div>
</div>
This creates an ugly looking page. The reason its ugly is because the control doesn't fill the whole width (because only 11 of the 12 available columns are used). In addition, too much space is given to the column with the dash. For those reasons, I then tried the following:
<ul class="list-inline">
<li><input type="text" class="form-control" /></li>
<li>-</li>
<li><input type="text" class="form-control" /></li>
</ul>
This approach took up the available width. However, my textboxes are stacked on top of each other now. Is there a way to accomplish what I'm trying to do with CSS? If so, how?
Thank you!
Try the following code i hope it will solve the issue,
<div class="input-group">
<input class="form-control" type="text" placeholder="Start">
<div class="input-group-addon">-</div>
<input class="form-control" type="text" placeholder="Finish">
</div>
Related
So I am creating a simple login page and I am trying to style it using Googles Material Design, I came across MUI which a CSS3 framework that does just what I want except one simple thing, when I type in the username the floating label does float up and looks cool, but as soon as I move away from that input field the floating label sinks back down which looks incredibly ugly and obviously is not what I want.
I have created a jsfiddle to replicate the problem here.
<form class="" action="php/process_login.php" method="post">
<legend>Login</legend>
<div class="mui-textfield mui-textfield--float-label">
<input type="text" name="username" id="username" class="">
<label>Username</label>
</div>
<div class="mui-textfield mui-textfield--float-label">
<input type="password" name="password" id="password" class="">
<label>Password</label>
</div>
<div class="form-group">
<input type="submit" class="mui-btn mui-btn--raised" value="Login">
</div>
</form>
I have followed a simple guide that demonstrates how this should work here (Floating Labels) and it works well.
Could anyone suggest how I can fix this please?
You have to load also MUI javascript with
<script src="//cdn.muicss.com/mui-0.9.3/js/mui.min.js"></script>
Working Demo.
You haven't embed the Javascript file, paste this in of your top of you page in the head section:
<script src="//cdn.muicss.com/mui-0.9.3/js/mui.min.js"></script>
I have bootstrap columns that has two labels and two inputs From and To, So From input is showing text correct but To input is not showing complete text when i load data dynamically.How can i fix this issue using bootstrap or I have to use css helper class to make it work.
when we use low resolution monitors problems occurs most of the time e.g 1366 x 768
main.html
<div class="col-md-6 fieldHeight">
<div class="form-group">
<label for="issueFromDate" class="col-md-5">Issue Date
Range:</label>
<div class="col-md-7">
<div class="row">
<div class="col-md-5 changeWdh">
<input type="text" class="form-control"
ng-model="riskAssessmentDTO.issueFromDate"
name="issueFromDate" id="issueFromDate" disabled />
</div>
<div class="col-md-1">
<label class="control-label padd15"> To:</label>
</div>
<div class="col-md-5 changeWdh">
<input type="text" class="form-control"
ng-model="riskAssessmentDTO.issueToDate" name="issueToDate"
id="issueToDate" disabled />
</div>
</div>
</div>
</div>
</div>
I suggest you read more into the bootstrap grid system. You could use a mix of the different col- classes in order to make sure everything fits on the screen depending on the resolution. See this example:
Zoom and unzoom to see the grid system in action
Also, a date field always contains a maximum amount of characters. Therefore, you could set a min-width to the input
I'm still young when it comes to coding, and I've heard multiple things about organization. Some use section's and some use div's, some use a div for buttons, other use the inputs in css to change it. As someone who likes to do his code clean and simple to understand, yet correct, this sometimes bothers me.
What is the best way to make a login form, with the for example the maximum of remember me and a button, with a text under saying "You don't have an account yet? Register here".
Should I use divs, sections, or both? What are the orders of the divs/sections? Container, Login, buttons?
Example:
<div class="container">
<div class="login">
<form>
<input text>
<remember me>
<div class="buttons">
<input submits>
</div>
</form>
</div>
</div>
Is this correct? Is there a way of doing it more organized?
What the most correct, used, simple and clean way to make it?
Bootstrap makes it really easy to do forms w/ minimal styling, with the exception of font sizes, colors, etc, but they add extra elements, like the form-group so you don't have to add extra CSS. I like to always use article, header, section, footer, etc whenever I can.
I understand that div is basically a "whatever" element. Bootstrap uses divs throughout their examples, but just b/c it's a div on THEIR example, doesn't mean you cannot use something else.
It also depends a whole lot on your layout. Perhaps you have the login on one page, but you have background images, centering the login form, etc, so this will determine which types of elements that you use.
<div id="login">
<div class="form-group">
<input type="text" class="form-control" name="username" />
</div>
<div> class="form-group">
<input type="password" class="form-control" name="password" />
</div>
<div class="form-group form-inline">
<input type="checkbox" />
<label>Remember Me</label>
</div>
<div class="form-group">
<input type="submit" value="Login" />
</div>
</div>
This could easily be turned into
<article id="login">
<section class="form-group">
<input type="text" class="form-control" name="username" />
</section>
<section class="form-group">
<input type="password" class="form-control" name="password" />
</section>
<section class="form-group form-inline">
<input type="checkbox" class="form-control" />
<label>Remember Me</label>
</section>
<footer class="form-group">
<input type="submit" value="Login" />
</footer>
</article>
I tend to like the latter, but it's your decision really.
It all depends on 'what you use' and 'what you want to end with'.
If you want to add a complex css stylesheet or most of the work will be done on the server side, then you should better have a detailed composition.
In another hand, if you plan to use javascript and few css, the clearest the best.
To me, the login part (or its container, ie a header) of your page should be a section. The divs should be used to organize the inner-elements.
"The tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document."
[http://www.w3schools.com/tags/tag_section.asp]
I depends really basicly what you can handle better.
I am using windows to create a simple HTML form, and I cannot figure out how to create the sub-labels for the various inputs. The picture (link in comment below) shows what I am trying to produce. Is this a Safari only thing? The closest I came was using CSS display:block which allowed me to move the label on top of the input.
You can accomplish that by wrapping each group of label & input within e.g. div, like so:
<div class="form-line">
<div class="form-field">
<input class="form-field-input" id="input1" type="text" placeholder="Your value..." />
<label class="form-field-label" for="input1">
Text 1
</label>
</div>
<!-- other groups go here -->
</div>
Here's the CodePen example
To do this you'd need something like
<input type='name' class='my-input'>
<label for="name">
<span class="label">First</span>
</label>
and then style that.
I'm doing a layout for an account page. And I'm thinking my code looks horrible because I am trying to avoid using tables. Here is a screen shot of what I want to get:
Right now, I'm using something like this (see jsfiddle): http://jsfiddle.net/uaUtq/7/
Here it is for quick review:
<ul class="info_list">
<li>
<label>First name</label>
<div><input type="text" /></div>
</li>
<li>
<label>Email</label>
<div>
<p>john#gmail.com (Default)</p>
<input type="text"/></div>
</li>
<li>
<label></label>
<div>
<input type="checkbox" />Tickbox
</div>
</li>
</ul>
It feels ugly and complicated. What way would you advise to do it?
Thanks
There's nothing wrong with using an unordered list for what you're doing. Other options you could think about are just using a form, then just wrapping your label-input pairings in divs for layout purposes:
<form>
<div>
<label for="firstName">First Name</label>
<input type="text" id="firstName" />
</div>
<div>
<label for="email">Email</label>
<input type="text" id="email" />
</div>
// etc.
</form>
Don't mess with too many tags.
Just use <div>...</div> and leave the styling part to CSS
(that's its original purpose anyway : to separate "content" from "design")...
i think you should use div instead of li
like this
<div>
<div class="label">First Name</div>
<div class="element"><input type="text"/></div>
</div>
<div>
<div class="label">Email</div>
<div class="element"><input type="text"/></div>
</div>
and write CSS class for label and control to proper alignment i.e. margin, padding, float, etc.
You should use a table. A table is the only way to make the columns aligned so that the first column occupies just the width it needs (the width of the longest label). Any other approach forces you to make a guess on the width, and the results will inevitably vary, and the code will not be robust (the width needs to be adjusted whenever the length of the longest label changes).
(This is a repeating question, and you’ll find many versions of it at StackOverflow, with varying answers. The issue is very simple once you stop listening to ideological arguments that are not backed up with facts.)