I have used this in my CSS to create an smaller input field:
.input-xs {
height: 22px;
padding: 2px 5px;
font-size: 12px;
line-height: 1.5; /* If Placeholder of the input is moved up, rem/modify this. */
border-radius: 3px;
}
But of course I need to adjust the input-group-addon as well or it will look like this.
To prevent this and make the input-group-addon smaller, I have added this to my CSS.
.input-group-xs > .form-control,
.input-group-xs > .input-group-addon,
.input-group-xs > .input-group-btn > .btn {
height: 22px;
padding: 2px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
But it looks like this now.
Any suggestions to get it aligned again?
Complete code
<div class="input-group-xs form-group" id="div_exp_aantal['.$i.']">
<input type="number" min="0" class="form-control input-xs" id="exp_aantal['.$i.']" name="exp_aantal" placeholder="Huidige aantal" value="'.$row_list['aantal_huidig'].'" onkeyup="validate_exp(this, '.$i.')" onmousemove="validate_exp(this, '.$i.')">
<span class="input-group-addon">stuk</span>
</div>
If I were you, I'd add the class name "input-group" before the "input-group-xs" in order to add the base css.
.input-group {
position: relative;
display: table;
border-collapse: separate;
}
So your code should look like this:
<div class="input-group input-group-xs form-group" id="div_exp_aantal['.$i.']">
<input type="number" min="0" class="form-control input-xs" id="exp_aantal['.$i.']" name="exp_aantal" placeholder="Huidige aantal" value="'.$row_list['aantal_huidig'].'" onkeyup="validate_exp(this, '.$i.')" onmousemove="validate_exp(this, '.$i.')">
<span class="input-group-addon">stuk</span>
</div>
Related
I'm redoing some of the UI stuff in my app and want to replace the following:
What I have
with this:
What I want
Currently the HTML looks as follows:
<div class="row required">
<label for="NumericFieldStartKm-numericfield">Kilometer at start</label>
<input id="NumericFieldStartKm-numericfield" value="" class="required numbercontrol mbsc-comp" min="1" max="" readonly="">
</div>
The CSS looks like this:
.row.required {
border-left: 7px solid #C30000;
padding-left: 7px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
margin-left: 4px !important;
}
Of course I could add a div and shape that div as a pill and put that in front of the label and input, but that would require me to change a ton of code. When I make the same change with CSS that saves me hours worth of work so that's why I'd prefer to do it through some CSS magic.
I found a few things regarding the use of ::after or other pseudo elements, but I have no clue if I can even achieve what I'm trying to achieve using CSS only.
Here's an example using a ::before pseudo-element to draw the border.
We use float: left for the pseudo-element and set a fixed width for .row so that the elements after the floated pseudo-element are stacked vertically.
.row.required {
width: 200px;
}
.row.required::before {
content: "";
float: left;
height: 40px;
margin-right: 4px;
border-left: 7px solid #C30000;
border-radius: 6px;
}
<div class="row required">
<label for="NumericFieldStartKm-numericfield">Kilometer at start</label>
<input id="NumericFieldStartKm-numericfield" value="" class="required numbercontrol mbsc-comp" min="1" max="" readonly="">
</div>
So I'm making a fill in the blank with text in between (See my previous question), now I have a problem where I evenly spaced the text in-between with margin-left and margin-right however if I put let's say 1 instead of 0 it looks like 1 : and with 0 it's normal 0: but since 1 is fewer pixels it doesn't look very good, I could always just leave it like that and hope nobody notices but I'd like to probably make it as clean looking as possible.
See for yourself here
If not here's the code,
.text1 {
display: inline-block;
font-size: 4vmin;
margin-right: -22px;
margin-left: -4px;
user-select: none;
text-align: right;
}
.fill-out {
outline: none;
border: 0;
margin-left: 18px;
display: inline-block;
}
#box1 {
width: 13px;
}
#box2 {
width: 13px;
}
#box3 {
width: 21px;
}
<div>
<input class="fill-out" id="box1" type="text" placeholder="00" maxlength="2" />
<span class="text1">:</span>
<input class="fill-out" id="box2" type="text" placeholder="00" maxlength="2" />
<span class="text1">.</span>
<input class="fill-out" id="box3" type="text" placeholder="000" maxlength="3" />
</div>
```
Type in only 2's then run again and type in 1's
Try using monospaced fonts.
because i don't think you will have the result you want with the default font.
see on wikipedia the difference wiki.
I'm using custom datepicker (https://github.com/eternicode/bootstrap-datepicker) inside my form (http://jsfiddle.net/Misiu/a3NV4/22/)
I would like that daterangepicker to take 100% width like all other form elements, but can't get that to work.
My only workaround was to use datepicker css for bootstrap 2. I should use these rules:
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
#import url('http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker3.css');
but instead I'm using (there is missing 3 at end of second line):
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
#import url('http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker.css');
this is what I get when I use bootstrap 3 css:
also on small screen inputs in picker don't have equal width:
I would like to switch entirely to bootstrap 3, but this tiny but is stopping me from doing so.
You could add the col-xs-12 class to your input-group. This will force the group to always be as wide as it's parent container.
<div class="form-group">
<label class="col-sm-3 control-label">Dates range</label>
<div class="col-sm-9">
<div class="input-daterange" id="datepicker">
<div class="input-group col-xs-12">
<input type="text" class="input-small form-control" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-small form-control" name="end" />
</div>
</div>
</div>
</div>
Updated Fiddle
The problem was datepicker custom .input-group-addon css.
.input-daterange .input-group-addon {
width: auto; /*remove this line*/
min-width: 16px;
padding: 4px 5px;
font-weight: normal;
line-height: 1.428571429;
text-align: center;
text-shadow: 0 1px 0 #fff;
vertical-align: middle;
background-color: #eeeeee;
border: solid #cccccc;
border-width: 1px 0;
margin-left: -5px;
margin-right: -5px;
}
after removing width: auto both bugs were fixed, please see: http://jsfiddle.net/Misiu/a3NV4/24/
I'm a new user to StackOverflow. Looking forward to be part of your wonderful community. My question is as follows:
I want to use a Twitter Bootstrap modal box on my website. However, I'm facing problems getting the CSS to work on the modal box. I wrote the following HTML code:
<div id="playModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<span class="login"><strong>Login</strong></span>
</div>
<div class="modal-body">
<form class="form-horizontal" accept-charset="utf-8" method="post" action="#">
<fieldset>
<div class="control-group">
<label class="control-label" for="play_form_username">Username</label>
<div class="controls">
<input type="text" id="play_form_username" name="username" placeholder="Enter your username" required />
</div>
</div>
<div class="control-group">
<label class="control-label" for="play_form_password">Password</label>
<div class="controls">
<input type="password" id="play_form_password" name="password" placeholder="Enter your password" required />
</div>
</div>
</fieldset>
<span>Forgot your password?</span>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Play!</button>
</div>
</form>
</div>
<div class="modal-footer">
<span>Not a member yet? Join Now!</span>
<!--need to find a way to get this modal box to disappear if registerModal is called-->
</div>
</div>
Next, I want to configure the design of the page. I am using LESS to write code which is converted to CSS through SIMPLESS. I tried passing my desired CSS configuration through the modal div ID in the following LESS code:
#playModal{
width: 300px;
.modal-backdrop,
.modal-backdrop.fade.in{
opacity: 1;
filter: alpha(opacity=100);
}
.modal-header{
.login{
font-family: arial;
font-size: 60px;
font-weight: bolder;
}
}
.modal-body{
max-height: 200px;
}
}
This compiles successfully to CSS, but when I analyse the webpage using Firebug, it appears that none of the CSS has been passed for the modal box. Instead, if I use pass the CSS configurations by class, similar to the following, it works.
.modal{
width: 315px;
margin-left: 0px;
left: 50%;
top: 58px;
.modal-header{
padding: 7px 15px;
.login{
color: #203665;
font-size: 20px;
font-weight: bolder;
line-height: 24px;
}
}
}
Why is it that the CSS rules are not passed when referring to the modal box by ID? Isn't ID be more specific than class? Note: even when i use !important on the code using ID, it doesn't work.
It will be greatly appreciated if someone can help me out- though it's probably because I did something stupid. (The context why I need to use ID and not just class is: I'm needing to add a second modal box, and I want it to have different size, field sizes etc.) Thanks.
EDIT: (Answers my own silly question)
After dabbling around with the code, I found that the following works:
//Settings for all models
.modal-backdrop.fade.in{
opacity: 0.9!important;
filter: alpha(opacity=90)!important;
}
//Settings for playModal
#playModal{
width: 315px;
margin-left: 0px;
left: 50%;
top: 58px;
.modal-header{
padding: 7px 15px;
.login{
color: #203665;
font-size: 20px;
font-weight: bolder;
line-height: 24px;
}
}
.modal-body{
padding: 10px;
.control-group{
margin-bottom: 10px;
.control-label{
width: 65px;
text-align: left;
}
.controls{
margin-left: 75px;
}
}
span a{
display: block;
margin-top: 0px;
padding-top: 15px;
float: left;
&:hover{
text-decoration: none;
}
}
.form-actions{
display: block;
float: right;
margin: 0px;
padding: 0px;
border: 0px;
background-color: #FFFFFF;
.btn{
font-size: 18px;
line-height: 24px;
}
}
}
.modal-footer{
padding: 7px!important;
}
}
I think what I did wrong was to put the .modal-backdrop.fade.in inside the #playModal, it dawns on me now that .modal-backdrop.fade-in would be referring to the area outside of the #playModal div.
So all in all it was just a trivial mistake that got me worked up for so many hours. Sorry to waste everyone's time. What a way to start on StackOverflow. But anyway thanks everyone for trying to help me out. Please vote to close this post.
You're using the wrong case.
You give the element the id, playModal
Your css refers to #playmodal
Css is case-sensitive.
I'm having a problem with getting my radio buttons laid out (and checkboxes) correctly in IE8 .. Firefox, Chrome, Opera all working however ..
Here is a screenshot of the problem
The code is below:
.row input (line 471) {
float: left;
display: inline;
width: 16px;
height: 16px;
margin-top: 0pt;
margin-right: 5px;
margin-bottom: 0pt;
margin-left: 0pt;
}
.row label (line 479) {
float: none;
font-weight: normal;
font-size: 12px;
line-height: 16px;
}
div.panes label (line 70) {
font-size: 95%;
font-weight: bold;
color: #222222;
line-height: 150%;
padding-bottom: 3px;
display: block;
}
<label for="AdditionalResponses_0__Response" id="AdditionalResponses_0__Response_Label">Single answer</label>
<div class="row " id="AdditionalResponses_0__Response">
<input id="AdditionalResponses_0__Response_one" name="AdditionalResponses[0].Response" type="radio" value="one" />
<label for="AdditionalResponses_0__Response_one" id="AdditionalResponses_0__Response_one_Label">one</label>
<input id="AdditionalResponses_0__Response_two" name="AdditionalResponses[0].Response" type="radio" value="two" />
<label for="AdditionalResponses_0__Response_two" id="AdditionalResponses_0__Response_two_Label">two</label>
<input id="AdditionalResponses_0__Response_three" name="AdditionalResponses[0].Response" type="radio" value="three" />
<label for="AdditionalResponses_0__Response_three" id="AdditionalResponses_0__Response_three_Label">three</label>
<input id="AdditionalResponses_0__Response_four" name="AdditionalResponses[0].Response" type="radio" value="four" />
<label for="AdditionalResponses_0__Response_four" id="AdditionalResponses_0__Response_four_Label">four</label>
</div>
Sorry for the one long line, but that's how I got it through the source..
Try removing the height or float from .row input.
Avoid adjusting the line-height if you can, as well.
Looks like another case of IE Stepdown: Preventing Menu Stepdown
Are you trying to align them vertically or horizontally?
If vertically, add this to your css
.row label {
display: block;
}
and change your markup so that your inputs are wrapped by the labels. You wouldn't have to use the for="" attribute this way.
<label>
<input id="AdditionalResponses_0__Response_one" name="AdditionalResponses[0].Response" type="radio" value="one" />
one
</label>
If horizontally, add
.row input, .row label {
float: left;
display: block;
}
Im not sure but - did you try the clear property?
in your case the value would be left i think
w3 source