I have html like
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label class="control-label">Values</label>
<div class="form-inline">
#Html.Kendo().NumericTextBoxFor(m => m.Min).Decimals(2);
#Html.Kendo().NumericTextBoxFor(m => m.Max).Decimals(2);
</div>
</div>
</div>
</div>
Kendo's numeric text box has .k-numerictextbox class. and i have CSS
.form-group .k-numerictextbox {
width: 100% !important;
}
with this settings currently CSS is getting applied to NumericTextBox.
I dont want CSS to apply on NumericTextBox if its under form-inline class
For this specific html structure (there is always one element between .k-numerictextbox and .form-group which either is or not .form-inline) then
.form-group *:not(.form-inline) .k-numerictextbox {
width:100%;
}
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label class="control-label">Values</label>
<div class="form-inline">
<input class="k-numerictextbox" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label class="control-label">Values</label>
<div class="form-not-inline">
<input class="k-numerictextbox" />
</div>
</div>
</div>
</div>
(keep in mind that it is a fragile rule, because if there is yet another container of the .k-numerictextbox inside the .form-group it will not work)
I would remove using !important since it's probably not needed. Add another rule with more specificity (including the .form-inline would be a good way to do this:
.form-group .k-numerictextbox {
width: 100%;
}
.form-group .form-inline .k-numerictextbox {
width: auto;
}
Related
I have the following code:
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Score Content:</label><label id="lbl_lblcontent"></label>
</div>
</div>
</div>
How do I put some padding between the 2 labels using bootstrap. Note that lbl_lblcontent is dynamically created.
In css you could something like this to add 10px padding to the right of only the first label...
.form-group label:first-child {
padding-right: 10px;
}
This is pretty archaic but you can simply add nbsp;'s if you do not want to go the CSS route.
Code:
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Score Content:</label> <label id="lbl_lblcontent"></label>
</div>
</div>
</div>
I have this html code:
<form>
<div class="form-group">
<label>Label1</label>
<input/>
</div>
<div class="form-group">
<label>Longer label 2</label>
<textarea>Some text</textarea>
</div>
</form>
How can I display this in a nice grid without setting a fixed width for the labels and without changing the html code?
The result should look like this:
Label1 Input
Longer label 2 TextArea
CSS-Tables
.form-group {
display: table-row;
padding-bottom: 1em;
}
label {
display: table-cell;
vertical-align: top;
padding: 0 .5em .5em
}
<form>
<div class="form-group">
<label>Label1</label>
<input/>
</div>
<div class="form-group">
<label>Longer label 2</label>
<textarea>Some text</textarea>
</div>
</form>
Flexbox is your best friend. Bootstrap grids are based on them too.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
<form style="display:flex; flex-wrap: wrap;">
<div class="form-group">
</div>
<div class="form-group">
</div>
</form>
you can then style your form-group according to your needs like flex-grow flex-order...
You should use bootstrap for this. It will be very helpful creating this kind of layout.
When the content is wide enough to have this all on the same row without line breaking (probably need to go full page with the snippet), the right label text is aligned slightly higher than the left label text. I'm trying to get the text of the two labels aligned to the same baseline.
I've tried to use vertical align in various ways, tried to set the height the same as the left on the right group, but I can't get anything to work.
Of course I could just set a fixed margin, but is there a responsive way to do this?
.main {
margin-top: 20px;
}
#left-input {
width: 100px;
}
.vmiddle {
/* does nothing ? */
vertical-align: middle;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container main">
<div class="row">
<div class="col-xs-6 ">
<div class="form-inline">
<div class="form-group">
<label>Left Label:</label>
<input id="left-input" type="text" class="form-control" value="Some Value" />
</div>
</div>
</div>
<div class="col-xs-6 vmiddle">
<div class="form-inline">
<div class="form-group">
<label>Right Label: Higher</label>
</div>
</div>
</div>
</div>
</div>
Since the second one is technically not a label, you can use Bootstrap's Static form control instead. It's designed to align with form-control and .btn elements.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container main">
<div class="row">
<div class="col-xs-6 ">
<div class="form-inline">
<div class="form-group">
<label>Left Label:</label>
<input id="left-input" type="text" class="form-control" value="Some Value" />
</div>
</div>
</div>
<div class="col-xs-6 vmiddle">
<div class="form-inline">
<div class="form-group">
<p class="form-control-static"><strong>Right Label</strong></p>
</div>
</div>
</div>
</div>
</div>
Add a margin utility class that's half the height of Bootstrap's padding.
<style>
.m-t-7 {
margin-top: 7.5px;
}
</style>
<div class="col-xs-6">
<div class="form-inline">
<div class="form-group">
<label class="m-t-7">Right Label: Higher</label>
</div>
</div>
</div>
Yup.
First, give the right label an id so you can select it individually.
<label id="right">Right Label: Higher</label>
then, in your css add:
#right{
padding-top:2px; /*Insert your own value for paddin*/
}
and to make it dynamic, remove the padding when the left label stacks. Find the pixel width of the browser when this happens, and then create a media query for the event:
#media(max-width:300px){
#right{
padding-top:0;
}
}
Another idea which may not be possible in your layout, would be to limit the width of the content so it never gets wide enough for this.
Yes. Just try to remove the margin bottom of the <label>Right Label: Higher</label>. Please leave a comment if this wont work.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container main">
<div class="row">
<div class="col-xs-6 ">
<div class="form-inline">
<div class="form-group">
<label>Left Label:</label>
<input id="left-input" type="text" class="form-control" value="Some Value" />
</div>
</div>
</div>
<div class="col-xs-6 vmiddle">
<div class="form-inline">
<div class="form-group">
<label style="margin-bottom: 0;">Right Label: Higher</label>
</div>
</div>
</div>
</div>
</div>
Im trying to copy the following picture with bootstrap
Here's the link if you want to see it https://slack.com/create#teamname
The image does fit the entire page, even though you scroll down , it won't show any extra picture, while mine does have.
My attempt is
<body>
<div class="container">
<div id="Page1">
<h1>Full Name</h1>
<div class="row">
<div class="col-md-5">
<h1></h1>
<form>
<input type="text" placeholder="Enter your Full Name" class="form-control">
Show page 2
</form>
</div>
<div class="col-md-7">
<img src="/img/space.jpg">
</div>
</div>
</div>
</div>
</body>
I add some custom css to the image
img {
width:100%;
height:730px;
}
and I got the following the result
How do i match the first picture in code?
I'm not a frontend guy , if anyone could help me would be really helpful.
Here's the JSFIDDLE --> https://jsfiddle.net/3soreoac/
http://codepen.io/anon/pen/wKQQxb
<div class="left col-md-6"></div>
<div class="right col-md-6"><img class="full" src="https://slack.global.ssl.fastly.net/66f9/img/signup/step1-illi#2x.png"></div>
.rightfull {
width: 100vh;
height: 100vh;
}
.left {
background-color: blue;
}
.right {
background-color: green;
}
This may help
HTML
<div class="container">
<div id="Page1">
<div class="row">
<div class="col-md-5 col-xs-5 leftpanel">
<h1>Full Name</h1>
<form>
<input type="text" placeholder="Enter your Full Name" class="form-control"> Show page 2
</form>
</div>
<div class="col-md-7 col-xs-7">
<img src="https://metrouk2.files.wordpress.com/2014/01/459405755-e1389347715754.jpg">
</div>
</div>
</div>
</div>
CSS
img{
width:100%;
height:732px;
}
.leftpanel{
background-color:grey;
height:732px;
}
Fiddle:here
I would like the button to also be inside the div with 'border-blue', but it doesn't. If I remove 'pull-right' from the button's class, it will be in. So, how to keep the button inside the div, and also float it to the right.
http://www.bootply.com/KRnvb6Kk4W
HTML :
<form id="LoginForm">
<div class="container-fluid">
<div class="row-fluid">
<div class="centering text-center col-lg-3 border-blue">
<div class="drop-shadow raised">
<input type="text"/>
</div>
<br />
<div class="drop-shadow raised">
<input type="text"/>
</div>
<br />
<div>
<span id="spMsg"></span>
<button type="submit" class="btn-login-base pull-right">
<i class="fa fa-share-square"></i>
</button>
</div>
</div>
</div>
</div>
</form>
CSS :
.border-blue {border:1px solid blue;}
.row-fluid
{
height: 100%;
display:table-cell;
vertical-align: middle;
}
.centering
{
float:none;
margin:0 auto;
padding:0;
}
.btn-login-base
{
width:32px;
height:34px;
padding:0;
background:transparent;
border:none;
}
//bootstrap's .pull-right{float:right !important;}
Add .clearfix class to .border-blue, like this:
<div class="centering text-center col-lg-3 border-blue clearfix">
It will force the container not to collapce because of the inner floated elements.