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.
Related
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>
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 have a problem with my web form fields not lining up properly.
see screenshot: http://awesomescreenshot.com/00cw0c80e
The label is longer than normal BUT I need it to be that long. If I shorten the label, it lines up find as expected.
Anyone can help?
Thanks! :)
ps. I've looked at various samples in the net but no go.
my css
input.issu {
margin-bottom: 8px;
width: 220px;
}
label.issu {
display: block;
float: left;
margin-bottom: 8px;
padding-left: 10px;
padding-right: 10px;
width: 270px;
text-align: left;
vertical-align: top;
}
select.issu {
margin-bottom: 8px;
width: 240px;
}
br.issu {
float: clear;
}
my html code (I've tried with and without div tags)
<div>
<label for="departingFrom" class="issu">Direct flight into Singapore from (please name city)<span class="red">* required</span></label>
<input id="departingFrom" name="departingFrom" class="issu" value="" type="text">
<br class="issu">
</div>
<div>
<label for="additionalInfo" class="issu">Additional info(e.g. accompanying family members)<span class="red">* required</span></label>
<input id="additionalInfo" name="additionalInfo" class="issu" value="" type="text">
<br class="issu">
</div>
add overflow:hidden property to container div of label and input as follow. It will work fine.
css:
div{
overflow:hidden
}
Use a table, putting the labels in one column, input fields in another. Then set vertical-align on the cells as desires (there are different interpretations on what “lining up” means in a case like this).
I'm trying to layout field labels and values like this:
Name: Bob
Age: 25
Occupation: Code Monkey
The relevant HTML is
<div class="field">
<span class="reset">End Time:</span>
<span>05:00pm</span>
</div>
<div class="field">
<span class="reset">Items:</span>
<span></span>
</div>
<div class="field">
<span class="reset">Repeats:</span>
<span>Never</span>
</div>
And the relevant CSS is:
div.field {
margin-bottom:10px;
}
span.reset {
display: block;
float: left;
margin-right: 0.5em;
text-align: right;
}
Unfortunately, the "Repeats" field is being shown on the same line as the "Items" field. I verified that this only happens when the value of the "Items" field is empty <span></span>.
I tried added clear: left to span.reset, and while this stops two fields appearing on the same line, it totally messes up the alignment of the labels and fields.
Is there any way I can fix this problem without drastically changing the XHTML?
Thanks,
Don
Add this to your CSS clear: left;:
div.field {
clear:left;
margin-bottom:10px;
}
This will force it to the next line below.
If you want all these to line up you're going to have to give the label (reset?) a fixed width either directly or indirectly. Try this:
div.field { overflow: hidden; }
div.field span { margin-left: 150px; display: block; }
span.reset { float: right; width: 150px; margin-left: 0; text-align: right; }
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