I have created a scrollbar and it works perfectly fine in google chrome and firefox but not in IE. I have a feeling it has to do with the line-height property.
My Code:
Html:
<div id="scrollbar"><br /></div>
Css:
#scrollbar {
margin-top: 10px;
height: 220px;
float: right;
overflow-y: scroll;
line-height: 403px;
}
Here is my jsfiddle.
Anyway to get this to work in IE?
Change the <br/> to a . IE picks up the non-breaking space a bit better than just a <br> tag.
http://jsfiddle.net/s9sycey1/3/
I figured it out. Instead of <br /> I used <span class="hidden">/</span> and I set my css to .hidden { visibility: hidden }. Here is my updated jsfiddle.
I am trying to put two components on the same line and have wrapped it like this. I am trying to keep this as reusable as possible and so I am trying to get as general of a solution as possible.
HTML:
<div class="form-group">
<span class="component-parent">
<label for="driversLicense.num">Driver's License #</label>
<input type="text" class="form-control" id="driversLicense.num"></input>
</span>
<span class="component-parent">
<label for="driversLicense.state">State</label>
<select id="driversLicense.state" class="form-control"></select>
</span>
</div>
CSS:
label {
display: block;
}
.component-parent {
display: inline-block;
}
.form-control {
width: 100%;
padding: 6px 12px;
}
The width: 100% is inherited from Bootstrap and if I remove it it cause all kinds of problems with rest of my layout.
The problem is the input is underneath the select and I would like them to have a little bit of space in between them. If I remove width: 100% then it looks correct and if I remove my padding then the two components touch with no space in between them but then my insertion point is in the wrong place.
Here is a fiddle showing the phenomena.
Is there some way to change the CSS of the form-group that will solve this problem? I can add an additional container(s) if need be but I would rather not change the CSS or html of either of the component-parent elements or their children.
It was an issue with the padding you were applying to the select! I added
box-sizing:border-box;
which solved this problem, you will however need to float the spans to clear the gap!
Let me know if you have another question! :) all the best!
DEMO
http://jsfiddle.net/graHw/6/
I ended up adding a new span in between the two component-parent elements. The span has a margin-left that is equal to the horizontal padding.
Here is the new fiddle
Tried in linux chrome 27.0.1453.93 and windows chrome 27.0.1453.94. Example at http://jsfiddle.net/SruNd/4/.
CSS
.main {
width : 100px;
border : 1px solid #000;
word-wrap: break-word;
}
HTML
<div class='main'>
<fieldset>
<div>
http://www.aaa.com/bbb/ccc/ddd/eee/fff/ggg
</div>
</fieldset>
</div>
I've also tried this where the word-wrap property is applied directly to the inner div and the fieldset is a block element.
It seems to me like a chrome bug as I've also tried this in FireFox and it wraps as it should on the slashes, and without the fieldset it also does this correctly in Chrome.
I tried to submit a chrome bug report however the page is not accepting my submission right now due to a malformed HTTP request error.
If someone has any insight please help. Thank you.
Use this on fieldset tag:
fieldset
{
min-width: auto;
}
In fact, this is due to the chrome's default property for fieldset :
min-width: -webkit-min-content;
You need to set a min-width and a max-width to the div. Example:
JSFiddle
HTML Code
<div class='main'>
<fieldset>
<div class="content">
http://www.aaa.com/bbb/ccc/ddd/eee/fff/ggg
</div>
</fieldset>
</div>
Css code
.content{
width : 100%;
border : 1px solid #000;
word-wrap: break-word;
}
Same source, no difference, but Vertical Align only works on jsfiddle. Please help me to answer.
This is HTML Source, it doesn't work on Chrome:
<html>
<head>
<title>Demo</title>
<style>
.checkboxOfField
{
display: inline-block;
width: 100%;
background-color: red;
height: 40px;
line-height: 40px;
}
</style>
</head>
<body>
<span class="checkboxOfField">
<input style="text-align: center; vertical-align: middle" type="checkbox" />
</span>
</body>
</html>
And this is jsfiddle link: http://jsfiddle.net/UghzT/
It works on Chrome. Thanks.
Probably because of Quirksmode?
Add a Doctype!
Why adding the style to the input? It isn't doing anything.
The input has a type="checkbox" attribute. Thus text-align:center; is a bit strange because there will never be text inside. Even the vertical-align property does not belong there. There isn't anything inside the checkbox to align...
The CSS code you have will do in order to align everything in the span in the middle.
Check this jsFiddle. I deleted the ´style` attribute and it still works great.
I'd like to have a line that starts right after my text on the same line, I've tried with the following simple code
<html><body>My Text<hr/></body></html>
It seems that <hr> is not an option because it is always on a new line and I'd like the line to start at the right of my text.
Any help ?
The <hr> has default styling that puts it on a new line. However that default styling can be over-ridden, in the same way as it can for any other element. <hr> is in essence nothing more than an empty <div> with a default border setting.
To demonstrate this, try the following:
<div>Blah blah<hr style='display:inline-block; width:100px;' />dfgdfg</div>
There are a number of ways to override the styling of <hr> to acheive your aim.
You could try using display:inline-block; along with a width setting, as I have above. The down-side of this approach is that it requires you to know the width you want, though there are ways around this - width:100%;, and the whole line in a container <div> that has overflow:hidden; might do the trick, for example:
<div style='overflow:hidden; white-space:nowrap;'>Blah blah<hr style='display:inline-block; width:100%;' /></div>
Another option would be to use float:left;. You'd need to apply this to all the elements in the line, and I dislike this option as I find that float tends to cause more problems than it solves. But try it and see if it works for you.
There are various other combinations of styles you can try - give it a go and see what works.
Using FlexBox Property this can be achieved easily.
.mytextdiv{
display:flex;
flex-direction:row;
align-items: center;
}
.mytexttitle{
flex-grow:0;
}
.divider{
flex-grow:1;
height: 1px;
background-color: #9f9f9f;
}
<div class="mytextdiv">
<div class="mytexttitle">
My Text
</div>
<div class="divider"></div>
</div>
Try this:
<html><body>My Text<hr style="float: right; width: 80%"/></body></html>
The inline CSS float: right will keep it on the same line as the text.
You'll need to adjust the width if you want it to fill the rest of the line.
Using inline or float, as far as I tested it doesn't work properly even if this was my first thought. Looking further I used the following css
hr {
bottom: 17px;
position: relative;
z-index: 1;
}
div {
background:white;
position: relative;
width: 100px;
z-index: 10;
}
html
<div>My Text</div><hr/>
Demo http://jsfiddle.net/mFEWk/
What I did, is to add position relative in both elements (to give me the advantage of z-index use). Also from the moment I had position:relative for hr I moved it from the bottom:17px. This move it above the div that contains the text. Applying z-index values and adding background:white for the div puts the text above the the line. Of course don't forget to use a width for the text, otherwise will take the whole width of the parent element.
<div style="float: left">Some text</div>
<hr style="clear: none; position: relative; top: 0.5em;">
Exactly what you want.
Try this. It works
<p style="float:left;">
Hello Text
<hr style="float:left; width: 80%"/>
</p>
You can also use this to draw a line between texts like
Hello -------------------------- Hello
The OP never specified the purpose of the line, but I wanted to share what I ended up doing when I was making an html template where the user needed a line to write on after the document was printed.
Because the hr tag defaults to its own line and defaults to being centered in the line, I decided to use a div and style it instead.
HTML
This is my text.<div class='fillLine'></div>
CSS
.fillLine {
display:inline-block;
width: 200px;
border-bottom: 1px solid black;
}
JSFiddle Demo
Style Div for Line After Text
Hope that helps anyone who had the same goal as me.
hr {
width: {so it fits on the same line as the p tag};
}
p {
float: left;
width: {enough to accomodate the hr};
}
That sort of make sense?
<p>My text</p>
<hr />
Here's one potential approach, but it has some assumptions/requirements. Your question should be edited to give more specific information about what you're building.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Blah</title>
<style type="text/css">
body {
background-color : white;
font-family : Arial;
font-size : 16px;
}
.wrap {
background: transparent url(px.png) repeat-x 0px 85%;
/* Different fonts or text sizes may require tweaking of that offset.
px.png is a one-pixel(though can be thicker if needed) image in whatever color you want the line */
}
.inner {
background-color : white;
/* Should match the background of whatever it's sitting over.
Obviously this requires a solid background. */
}
</style>
</head>
<body>
<div class="wrap"><span class="inner">Here is some text</span></div>
</body>
</html>
I used the following technique:
Give the container div a background-image with a horizontal line.
Put an element (like <h3>) in the container div (I have it on the right so float: right; )
Use the following css:
.line-container {
width: 550px;
height: 40px;
margin-top: 10px;
background-image: url("/images/horizontal_line.png");
}
.line-container h3 {
padding-left: 10px;
float: right;
background-color: white;
}
Below code did the job for me
HTML File:
----------
<p class="section-header">Details</p><hr>
CSS File:
----------
.section-header{
float: left;
font-weight: bold
}
hr{
float: left;
width: 80%;
}
INLINE:
-------
<p style="float: left;font-weight: bold">Details</p><hr style="float: left;width: 80%;">