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>
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>
Currently the page is just two divs sitting side by side inside a containing section. I had two trailing <br> tags on qtr_calc, which were pushing down sem_calc. Shouldn't qtr_calc be able to have as many newlines at the bottom as I like without affecting sem_calc? If not, is there a workaround?
Somebody had a similar issue here, but there no explanation of why this is able to occur and the answer that helped them does not help me.
The divs' html:
<section id="content">
<div id="qtr_calc">
<label for="qtr_cred_hrs">Quarter class credit hours:</label><br />
<input type="text" id="qtr_cred_hours" /><br /><br />
<label for="qtr_grade">Letter grade:</label><br />
<input type="text" id="qtr_grade" /></div>
</div>
<div id="sem_calc">
<label for="sem_cred_hrs">Semester class credit hours:</label><br />
<input type="text" id="sem_cred_hours" /><br /><br />
<label for="sem_grade">Letter grade:</label><br />
<input type="text" id="sem_grade" /></div>
</div>
</section>
The divs' CSS:
#qtr_calc {
float: left;
margin: 3em;
padding: 2em;
border: 1px double #F2F2F2; /* inside border */
outline: 1px solid #BFBFBF; /* outside border */
}
#sem_calc {
float: left;
top: 0;
margin: 3em;
padding: 2em;
border: 1px double #F2F2F2; /* inside border */
outline: 1px solid #BFBFBF; /* outside border */
}
And here's a pastebin with the rest of the page, in case it helps somehow.
You have an extra closing div tag here:
<input type="text" id="qtr_grade" /></div>
Demo
Remove extra closing Div's and top:0; and try to give them width say 20%. That should solve you problem.
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 am using a wrapper but I am pretty confused. I want the two resultbox divs to be in line with the submit div.
Take a look here:
http://jsfiddle.net/QtVwr/
What am I doing wrong?
I'm not very familiar with CSS.
Part of the problem is that there are issues with your HTML. Here's a start:
make sure all the divs are closed.
remove the floats from your css
add display:inline-block;
remove the inline styles from your HTML.
correct the .wrapper class to be .wrapper1 (matching the HTML)
So, this is more what you want, I assume:
.wrapper1 {
height:70px;
width: 800px;
background: #ffffff;
border: 1px solid grey;
color: #BDBDBD;
}
.resultbox {
width: 300px;
background: #ffffff;
color: #BDBDBD;
display: inline-block;
}
.submit {
height:15px;
width: 32px;
margin-top:10px;
background: #ffffff;
border: 1px solid;
color: #BDBDBD;
display: inline-block;
}
and the HTML
<div class="wrapper1">
<div class="resultbox" style="" >
<div class="locationresult" style="" form action="weezyresults.php" method="post">
<input type="text" name="search" size="36" value="" style="" />
</div>
</div>
<div class="resultbox" style="" >
<div class="locationresult" style="" form action="weezyresults.php" method="post">
<input type="text" name="search" size="36" value="" style="" />
</div>
</div>
<div class="resultbox" style="width:35px;" >
<div class="submit"></div>
</div>
</div>
Example: http://jsfiddle.net/QtVwr/2/
You will still need to fiddle with it. But this is a start.
To make div inline you should use the following CSS style:
.mydiv{ display: inline; }
Note: Change width of your wrapper (make it smaller) and you will see the results
There are several issues with the code you have provided.
you have defined css rules for a class wrapper but use class wrapper1 in your html
class wrapper doesn't have enough width for both of the result boxes plus the submit
There are extra quotes on the second result box style="margin-left: 5px; margin-top: 3px;""
form tags are malformed and being intertwined with your div tags
form tags aren't closed
locationresult div tag isn't closed
floats need to be cleared
here is a fiddle
http://jsfiddle.net/e3dg6/
The width of your results boxes combined exceeds the width of your wrapper. You need to either make the wrapper wider or reduce the width on the resultboxes.
Why do you have the submit div within a resultbox div?
Why the margin-left:10px, only with the first div?
I'd do it like this:
<div id="wrapper">
<div class="resultbox"></div>
<div class="resultbox"></div>
<div id="submit"></div>
</div>
And set the width and height of the wrapper, and let the other divs float. It's just a longshot, not exactly sure what you're trying to accomplish. I just think your nesting is not okay.
If anyone can suggest a better place than stackoverflow for css questions please let me know.
I have an outer div with background and border and then I need to have two columns within the colored box. Some reason when I place the floating divs inside the outer div, the outer div does not grow.
Here is my HTML:
<div class="tip_box">
<h3>Send</h3>
<hr />
<form id="email_form">
<div class="three-columns">
<div class="contact_form_input">
<h6>Your Name</h6>
<input type="text" name="name_text_box" class="form_input" id="name_text_box" />
</div>
<div class="contact_form_input">
<h6>Your Email</h6>
<input type="text" name="email_text_box" class="form_input" id="email_text_box" />
</div>
</div>
<div class="three-columns">
<div class="contact_form_input">
<h6>Recipient Name</h6>
<input type="text" name="name_text_box" class="form_input" id="Text1" />
</div>
<div class="contact_form_input">
<h6>Recipient Email</h6>
<input type="text" name="email_text_box" class="form_input" id="Text2" />
</div>
</div>
</form>
</div>
<p>This is where your message will go. Anything you want, as long as you want. Make it personal; make the recipient know you care.</p>
Here is my CSS:
.three-columns {
width: 290px;
float: left;
margin-right: 45px;
}
.tip_box {
padding: 20px;
margin: 20px 0px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 10px;
border-radius: 7px;
padding-left: 55px;
background: #eee;
font-style:italic;
background: #eff7d9 url(../images/icons/tip.png) no-repeat scroll 10px 15px;
border: 1px solid #b7db58;
color: #5d791b;
}
Screenshot:
http://dl.dropbox.com/u/2127038/cssissue.png
Non-float blocks containing float blocks will not automatically expand, since float blocks are taken outside the normal flow (or at least specially outside the flow). One way to correct that is to specify the overflow property to hidden or auto.
.tip-box { overflow: auto; }
See quirksmode for more.
Add following HTML after <div class="tip_box"></div>:
<div class="clear"></div>
Here is the CSS:
.clear{
clear:both;
}
It will surely work.
.tip_box { overflow:hidden; zoom:1; }
this establishes new block formatting context in ie7+ and other browsers, triggers haslayout in ie6 to contain floats
You're going to need what is commonly known as a clearfix. In this case a overflow: hidden on the containing element will do - see: http://www.jsfiddle.net/yijiang/zuNwH/2
.tip_box {
overflow: hidden;
}
As an aside, you might also want to use label elements instead of h6 to markup labels for your form elements, and use a list instead of individual divs for containing each label - input pair, and reduce the amount of class attribute you use by relying on more complex selectors for your CSS file.
<li>
<label for="recipient_email">Recipient Email</label>
<input type="text" name="email_text_box" id="recipient_email" />
</li>
In this case I wouldn't float the divs left, I would make them display: inline or inline-block.
Your 3 columns will turn into 2 columns, then 1 column if the browser window shrinks.