I've a little problem using bootstrap and adding dynamically element on my page.
I've a form where I lwant to dynamically add new inputs. All that work fine but the rendering is not that good because it seems that there is some missing margin padding between the label and the select.
I use bootstrap as main css.
Here is an exemple : http://jsfiddle.net/4Uf2U/1/
<div class="form-inline">
<label>Label</label>
<select><option>Option</option></select></div>
Does anyone have an idea why this happen and how to correct this ?
It is because of the select. The one that is not dynamic is formatted like so:
<div class="form-inline">
<label>Label</label>
<select><option>Option</option></select>
</div>
And the dynamic ones are one liners like so:
<div class="form-inline"><label>Label</label><select><option>Option</option></select></div>
So use one way and the style (appearance) will be the same.
Here is an updated jsFiddle: click
Related
I'm using the
U.S. Web Design System (USWDS)
in a project I'm working on, and I'm struggling with something that seems superficially like it should be quite simple: How can I align form labels so they appear to the left of their corresponding inputs, instead of above them?
Some other CSS libraries call this a horizontal form but I've also seen it referred to as "inline" fields.
According to this answer it's possible to achieve the result I want using modern CSS Grid layout, but so far I haven't figured out how to make that play nicely with the USWDS styling, which does not use CSS Grid.
Can anyone help me to either:
Create a horizontal form using some combination of USWDS components and utility classes, or if that's impractical...
Produce a horizontal form by overriding the USWDS styling with custom CSS, but without causing too much conflict or breaking with the standard?
Below is a simplified snippet of my HTML:
<link href="https://cdn.jsdelivr.net/npm/uswds#2.8.0/dist/css/uswds.min.css" rel="stylesheet" />
<form class="usa-form">
<div class="usa-form-group">
<label class="usa-label" for="somefield1">Sample label</label>
<input class="usa-input" type="number" name="somefield1" value=0 />
</div>
<div class="usa-form-group">
<label class="usa-label" for="somefield2">Another label</label>
<input class="usa-input" type="number" name="somefield2" value=0 />
</div>
</form>
You can use flex on the usa-form-group to get them positioned next to each other as shown in this Code Sandbox, with some other minor touchups to the element margins https://codesandbox.io/s/nostalgic-moon-q7i7f?file=/styles.css
I would like to create a form using BootStrap 4 that looks like the forms that BootStrap 3 allowed one to create easily. i.e. I would like a bold label right-aligned within a specific size (e.g. col-sm-4), and next to it I would like an input field whose width is controlled by an enclosing div tag with a class like col-sm-4 (as an example). How can I do this? I have spent an hour or so now battling with .css and BS4 to create this, but have been unable to achieve the effect I desire. Any hints would be great.
The code below will produce the effect I wish for but will not allow me to have different sized inputs (they all default to the same size)
css:
div.form-inline label.col-sm-3 {
justify-content: flex-end;
font-weight:650;
}
html:
<div class="form-inline">
<label for="INcity" class="col-form-label col-12 col-sm-3">City</label>
<div class="col-sm-4"><input type="text" name="INcity" class="required form-control" id="INcity"></div>
</div>
If I instead use form-group, then I can alter the size of the input fields using the enclosing tags, but then the css (even when I change it to be .form-group instead of .form-inline) fails to align the label correctly and set it to bold. So I guess I'm looking for either the correct .css or an example of how to achieve the whole effect simply (as it was with BS3). I must be missing something obvious because I can not believe that the BS4 developers would make it so difficult to achieve the same look as BS3 allowed without any of the .css hacks etc that I am having to do. Though I do notice that every one of the examples given in the BS4 documentation has the label left-aligned, so perhaps they have decided to make that formatting decision for every BS4 user, but that seems a bit unlikely (and unfriendly).
In order for col-* to work they MUST be inside a .row or .form-row.
There's no need for any extra CSS:
https://codeply.com/go/0Vkxbmgb4c
<div class="form-row">
<label for="INcity" class="col-form-label col-12 col-sm-3 font-weight-bold text-right">City</label>
<div class="col-sm-4">
<input type="text" name="INcity" class="required form-control" id="INcity">
</div>
</div>
https://getbootstrap.com/docs/4.0/components/forms/#form-grid
If you have several of these that you are converting from BS3 to BS 4, then the way that ZimSystem has suggested as an answer will be extremely tiresome to implement - being as you will have to change every single instance of this. Just create some css (as it seemed you were actually asking for) with the following .css and use find and replace to replace every instance of control-label with col-form-label. This approach is much easier than the approach suggested above, and uses a more modular approach (in that you only have to write the css markup once - modularity should be every programmer's approach in my opinion). Ensure this css is loaded AFTER BS4 css has loaded.
.col-form-label
{
font-weight:600;
text-align:right;
}
I have made 2 Divisions out of bootstrap property <div class="col-md-12" > on the same page. In the first one, I have added a different Background and some hover property, now in the second one I have to make a "Sign Up" Div but with other properties with the same <div class="col-md-12" > ie. Full page width row. But the changes are happening on both the Divisions.
Can somebody Help ?
I am using Visual Studio 13 for aspx webpage.
Sorry if it is a silly question.
Thanks In Advance.
You can append another class to the ones you want to style:
<div class="col-md-12 styleme">
Content
</div>
CSS:
.styleme {
background-color: #000;
}
This way, you can style the div using your own custom class as opposed to overriding BootStrap's native one.
NOTE: ensure to place the custom style in your own custom CSS file and ensure it is referenced in your site AFTER the BootStrap CSS file.
I have this dropdown list but problem is when i run it in IE it goes up and down if i select something from bottom or middle.How can fix so that it expand it always bellow:
https://jsfiddle.net/tq1bhfno/ (you need to run it in IE)
<div class="col-lg-2 col-md-2">
<div class="select-wrapper">
<select name="gametype" id="gametype" ng-model="selectGameType">
<option>TEST1</option>
<option>TEST2</option>
<option>TEST3</option>
<option>TEST4</option>
<option>TEST5</option>
<option>TEST6</option>
<option>TEST7</option>
</select>
</div>
</div>
Drop-downs are rendered by the Browser/OS. You cannot control this type of behaviour using CSS or JavaScript.
What about the dropdown itself?
As in, the thing that shows the choices when activated. As far as I know, there is no way to style these in any browser. Not even bold or italic. The closest thing to style you can get is grouping them by using . This is probably mostly a UI thing, but it might be a security thing too. You wouldn't want people doing tricky things with fonts that make it unclear what option is selected.
Read More About Dropdown Default Styling
See the behavior without any CSS:
https://jsfiddle.net/tq1bhfno/2/
Only the HTML:
<div class="col-lg-2 col-md-2">
<div class="select-wrapper">
<select name="gametype" id="gametype" ng-model="selectGameType">
<option>TEST1</option>
<option>TEST2</option>
<option>TEST3</option>
<option>TEST4</option>
<option>TEST5</option>
<option>TEST6</option>
<option>TEST7</option>
</select>
</div>
It is the same.
bottom: 100%;
add this attribute to your css for dropdown. This forces to show everything below.
I'm trying to adapt bootstrap's standard practices to speed up some of my development but have a quick question related to showing and hiding cols.
I have the following simple layout
<div class="row" id="contactGrid">
<div class="col-sm-2">Sidebar</div>
<div class="col-sm-10">Content</div>
</div>
When I use AngularJS to show/hide the Sidebar col I expect the Content col to stretch the entire width of the container but it doesn't it says at 'col-10'. Do I need to programmically change the class/width to col-sm-12 when I hide the sidebar?
Thanks for your help, I'm sure this is an easy one!
The element with the class col-sm-10 will always have 10/12 of the width of it's parent row. Therefore you need to update it on the fly, when your sidebar changes to hidden. As you already use AngularJS you might have a variable defining if your sidebar should be visible or not. This variable may also define your class conditionally for your content div.
<div class="row" id="contactGrid">
<div class="col-sm-2" ng-show="booleanVariable">Sidebar</div>
<div ng-class="{col-sm-10: booleanVariable, col-sm-12: !booleanVariable}">Content</div>
</div>
Daniel,
Your answer is the reason I'm trying to learn the BS/NG style of UI. It's just knowling where the shortcuts begin and end. To polish it off I used a ternary expression in the ng-class. showFilterSidebar is my hide/show variable. Thanks Again!
<div ng-class="showFilterSidebar ? 'col-sm-10' : 'col-sm-12'">
Yes you need to change class to col-sm-12 and hide for col-sm-2 to avoid problems with floatin .