I have the following CSS:
.side-study-box {
background-color: white;
color: black;
border: 3px solid #0072A6;
text-align: center;
height: 220px;
margin-bottom: 15px;
margin-top: 15px;
display: table;
-webkit-box-shadow: 3px 3px 3px #888888;
-moz-box-shadow: 3px 3px 3px #888888;
box-shadow: 3px 3px 3px #888888;
}
.side-study-box p {
position: relative;
width: 100%;
margin: auto;
font-size: 24px;
display: table-cell;
vertical-align: middle;
}
And the following HTML:
<div class="side-study-box span6 ">
<p>SIDE 1</p>
</div>
However the text isn't being centered vertically or horizontally. If I either remove the span6 class from the div or target the span6 as opposed to side-study-box in my css, it works. I do need both classes though... what am I doing wrong?
Sounds to me like another rule which is targeting the span6 class name is affecting things. Try increasing the specificity. Add an #id selector, or prefix them with body. Something like:
body .side-study-box { /*...*/ }
body .side-study-box p {/*...*/ }
Related
I have three inline block elements inside a a container div.
The HTML looks like this:
<div class="container">
<div class="field">Text</div>
<div class="field">Text</div>
<div class="arrow"></div>
</div>
The CSS looks like this:
.container {
padding: 10px;
border: solid 1px #e5e5e5;
border-radius: 3px;
background-color: white;
box-sizing: border-box;
font-size: 0;
}
.field {
font-size: 16px;
display: inline-block;
}
.arrow {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #f00;
vertical-align: middle;
}
I can't see anything wrong with this HTML/CSS, but the arrow does not appear in the middle of the container. Instead, the arrow is near the bottom of the container. Also, when I unset the vertical-align: middle property, the arrow moves farther up in the div, which is weird. If I set vertical-align: top then the arrow does go to the top of the div. Any idea why this is?
Default vertical-align is baseline. This will operate differently than true middle when paired with middle. Try setting all three to middle.
.container {
padding: 10px;
border: solid 1px #e5e5e5;
border-radius: 3px;
background-color: white;
box-sizing: border-box;
font-size: 0;
}
.field {
font-size: 16px;
display: inline-block;
vertical-align: middle;
}
.arrow {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #f00;
vertical-align: middle;
}
<div class="container">
<div class="field">Text</div>
<div class="field">Text</div>
<div class="arrow"></div>
</div>
Change .arrow from inline-block to inline
https://jsfiddle.net/aznfacLe/
I use a div to create a frame around an image. I am trying to get the div and it's containing image to float to the right so that the surrounding paragraphs will wrap around it.
Link to jsfiddle: http://jsfiddle.net/0vnfngws/
Styles:
.imgframe {
margin: 12px;
position: relative;
display: inline-block;
padding: 8px;
border: 1px solid #cbcbcb;
background: #f7f7f7;
box-shadow: 2px 2px 5px 0 #e5e5e5;
-moz-box-shadow: 2px 2px 5px 0 #e5e5e5;
-webkit-box-shadow: 2px 2px 5px 0 #e5e5e5;
}
.imgframe img {
margin: 0;
padding: 8px;
}
.floatright {
float: right;
}
HTML:
<p>This is some text here. I want the paragraph to wrap around the image, not to be positioned above and below it.</p>
<div class="imgframe"> <img src="http://www.hdicon.com/wp-content/uploads/2010/06/Firefox_2004_2.png" alt="#" class="floatright" /> </div>
<p>This is some more text here. I want the paragraph to wrap around the image, not to be positioned above and below it.</p>
All you need to do is add float: right; to your .imgframe.
.imgframe {
float: right;
margin: 12px;
position: relative;
display: inline;
padding: 8px;
border: 1px solid #cbcbcb;
background: #f7f7f7;
box-shadow: 2px 2px 5px 0 #e5e5e5;
-moz-box-shadow: 2px 2px 5px 0 #e5e5e5;
-webkit-box-shadow: 2px 2px 5px 0 #e5e5e5;
}
See the updated JSFiddle.
Two things:
Swap the order of the first p tag and the div tag
Move the floatright class from the img tag into the div tag
Put the class on the containing div, not on the img tag. You are floating the image within the containing div.
This is where I am trying to accomplish this effect:
http://www.smalldot.agency/ccren/goals-page/
As the "val" bar increases in width, it should overlap the "current" text ((which is the same text as "val" but a different color)). I am able to force "current"'s copy on top of the "val" element, but I can't get it to rest underneath instead.
If I place the "current" p class below the "val" div class, the the text from "current" shows up south of the progress bar, rather than beneath it.
Also, the z-index: 0; doesn't seem to be doing anything to fix the problem.
HTML:
<div class="progdiv" style="width:100%;">
<p class="current">1,234</p>
<div class="val" style="width:3%;">1234</div>
</div>
CSS
.val {
height:100%;
border-radius:3px;
line-height: 1.5em;
font-size: 12pt;
background: #019BA9!important;
text-align: left!important;
vertical-align: center;
-webkit-box-shadow: 3px 3px 2px #bbbbbb;
overflow:hidden;
}
.progdiv {
background-color: #FFFFFF!important;
height: 1.5em;
text-align: right;
vertical-align: center;
border: solid 1px #eeeeee;
border-radius: 3px;
-webkit-box-shadow: inset 3px 3px 2px #bbbbbb!important;
text-align: left!important;
overflow: hidden!important;
}
.current {
text-indent: 6px;
height:100%;
border-radius:3px;
font-size: 12pt;
line-height: 1.5em;
text-align: left!important;
vertical-align: center;
color: #019BA9!important;
position:absolute!important;
text-align: left!important;
z-index: 0;
}
Just add position: absolute; to the .val CSS. Also remove the height:100% from both the .val and .current CSS.
I am trying to use bootstrap tagsinput in a form contained in a modal
like this
...
<div class="form-group">
<label for="myTagLabel">Tags:</label>
<input class="form-control" id="myTag" type="text" data-role="tagsinput">
</div>
As you can see in the image above I can't see why the input doesn't have the width of the containing form.
UPDATE
this http://www.bootply.com/f43d1A0YxK reproduces the issue
The reason you are seeing this behaviour is because bootstrap-tagsinput actually hides the original input element, and in its place adds a div. You are seeing a div element styled to look like a Bootstrap input element. So any CSS to affect the original input will not produce any changes.
What you want to change is the .bootstrap-tagsinput class:
.bootstrap-tagsinput {
width: 100% !important;
}
Here's a demo: http://www.bootply.com/1iATJfFM69
Add display: block; to the .bootstrap-tagsinput class in your CSS. As noted by Mohamad this class is not present in your own HTML, but when you inspect element/view source you can see that the input is wrapped in a <div class="bootstrap-tagsinput">.
.bootstrap-tagsinput{
display: block;
}
This will overwrite the display: inline-block; that is being inherited.
Bootply Demo
Cristian almost guessed it
somewhere in js:
$('.bootstrap-tagsinput > input').css('width', '');
and in css:
.bootstrap-tagsinput input {
width: 10em;
}
I see the tagsinput plugin you are using comes with its own css file.
bootstrap-tagsinput.css
These css rules are automatically being added to your input when you add the data-role="tagsinput".
.bootstrap-tagsinput {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
display: inline-block;
padding: 4px 6px;
margin-bottom: 10px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
cursor: text;
}
.bootstrap-tagsinput input {
border: none;
box-shadow: none;
outline: none;
background-color: transparent;
padding: 0;
margin: 0;
width: auto !important;
max-width: inherit; //Try change this to 100% !important;
display: block; // Add this in
}
You need to update these so they don't over rule native bootstrap rule.
The reason behind this problem is, the bootstrap-tagsinput class is using display: inline-block;
the solution is, simply change the display: inline-block; to display: block;
Before change
.bootstrap-tagsinput {
display: inline-block;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
padding: 4px 6px;
margin-bottom: 10px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
cursor: text;
}
After change
.bootstrap-tagsinput {
display: block;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
padding: 4px 6px;
margin-bottom: 10px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
cursor: text;
}
The reason you are seeing this behaviour is because the style actually override the width attribute:
style="width: 3em ! important;"
Remove the style:
$('.bootstrap-tagsinput > input').prop( "style", null );
This should work properly.
Additionally, set the desired width with CSS:
.bootstrap-tagsinput input { width:100%!important; }
I've tried to use the display:table method of centering vertically, but I can't quite get it working. My work so far is here:
http://jsfiddle.net/PTSkR/11/
I'm trying to center that text vertically and horizontally. I think it's a little tougher than normal because I'm using bootstrap spans, but maybe not. Any tips would be awesome!
Code:
.side-study-box {
background-color: white;
color: black;
border: 3px solid #0072A6;
text-align: center;
height: 220px;
margin-left: 10px;
display: table;
padding: 10px;
-webkit-box-shadow: 3px 3px 3px #888888;
-moz-box-shadow: 3px 3px 3px #888888;
box-shadow: 3px 3px 3px #888888;
}
.side-study-box span {
position: relative;
width: 100%;
font-size: 24px;
display: table-cell;
vertical-align: middle;
}
.card-box {
background-color: #f5f5f5;
color: black;
margin-right: 0px;
margin-bottom: 15px;
margin-top: 15px;
padding: 5px 0 5px 0;
}
<div data-bind="visible: !editing()" class="row-fluid card-box">
<div class="span2 card-details-box">
</div>
<div class="span5 side-study-box">
<span>TEST</span>
</div>
<div class="span5 side-study-box">
<span>TEST</span>
</div>
</div>
side-study-box's display:table is being reverted back to display:block. Add an important flag. display:table !important.