I've got the following JS Fiddle to demonstrate what I'm trying to accomplish:
http://jsfiddle.net/sVKU8/2/
1) I assume this first part is easy - Is there a way to update the parent label class to automatically have it's width set based on the total width of the two child <div>s so the border only wraps around the green and red <div>s? I thought setting width: auto was supposed to do that, but my CSS skills are apparently lacking.
2) What I'd like to accomplish next would be to remove the width attribute from my label-text class and have the width set (or grow automatically, if possible) whenever I apply text to that <div> via JavaScript without text wrapping (i.e. keeping the original height of the label class).
I wasn't sure if I needed to try to calculate the width based on the actual text, or if there is a way to just apply the text with a width setting that will allow it to grow.
Any input or suggestions would be greatly appreciated!
Add this property to your css :
.based-on-text{
display: inline-block;
}
This way, the div will act like a block but will have exactly the width it needs instead of taking the whole parent level width !
click here
CSS alternative without additional JS using traditional floating elements approach
This fiddle (Click HERE) shows using inline-block on the div text-label and a little JS to set the width on the outer box with the border.
This is the javascript. Pretty ugly. There's probably a better way:
$(".label").css("width",
parseFloat( $(".label-image").css("width"))
+ parseFloat( $(".label-text").css("width"))
);
Related
I have a bunch of inputs in bootstrap that have input-group-addon tags as labels. On my page, I have labels of various lengths of text, but I want all the labels to be the same width for the visual effect. I'm trying to manually set the width of these span elements to the largest one I have on the page (for this example, say 75px).
Making my own CSS class doesn't do the trick, bootstrap overrides it somehow that I don't understand.
Making my own .input-group-addon.myClass CSS class doesn't work either. The browser shows that this isn't overridden by another style, but I don't see it actually effecting the span element.
Lastly, simply adding a style="width:75px" to the span doesn't work either.
I'm at a loss as to how I can ovveride this style to make all my span's line up regardless of text length.
Code example: http://www.bootply.com/SvJAiwVavY
I looked at your sample code. From Bootstrap, the .input-group-addon class has a display property set to table-cell, so there is no need to do anything other than set an appropriate width. If you set a width that is smaller than the contained text, it's not going to look like it has changed. Try changing your example code to the following:
.input-group-addon.test {
width: 200px !important;
}
You may want to change your text-align to something other than center, but that's up to you.
I am making a webpage with an image at center and i wanted a password field(textbox on the image) like this.
I used Some CSS3 animations in the image so is there's any way that i could place my text box on the image without affecting any css animation??
As he said in the comment sample code would be nice, however you could try using absolute position in your css for the image this will allow overlapping, I cannot give any specific code but it will be similar to what is below.
{
position:absolute;
}
in the above case use :
position:absolute
what it does is simply disassociates the elements from is siblings and can be placed anywhere holding a reference to its parents.
Means if you want to position the element , use left/right of its parent.
I'm trying to make a HTML "showcase". I am thinking of using elements like this:
<div id="index-showcase-tabs">
<div id="index-showcase-tabslide">
<div class="index-showcase-tab" id="showcase-tab-1">Item1</div>
<div class="index-showcase-tab" id="showcase-tab-2">Item2</div>
...
<div class="index-showcase-tab" id="showcase-tab-N">ItemN</div>
</div>
</div>
The showcase items are floated left, and I don't know their precise width, nor the number of them.
Problem is: if the combined width of the items is bigger than the container (index-showcase-tabs), I don't want them to break line (which they do by default). I want them in one line, and I want to hide the overflow and then let the user scroll them with javascript (not by scrollbar...).
How would I do that?
PS: There's not much css for the items yet. I only gave the slider a specific heigth:
#index-showcase-tabslide
{
height: 34px;
}
Edit: Here you can see my problem.
Edit2: explaining more with a fiddle: http://jsfiddle.net/TbSfj/19/
For this, you cannot use float: left. Instead use display: inline - this will have the same effect for what you want to accomplish, and it will not be constrained to the parent div in the DOM model.
check out this sexy control:
http://jsfiddle.net/SoonDead/U6QdQ/20/
this way made for my project, but I think it does what you want.
The tricks are:
Because you use a lot of characters that can "linebreak" and even forcefully disable linebreaks have different results in 1-2 browsers, I would recommend against it.
Instead make the overflowing width wide enough to hold all the elements easily, so if javascript is disabled it will not look ugly.
(I know that you are fine with jquery, so I use it within the example, also the outerWidth property in simple js has bugs in webkit (tends to be 0 in some cases).)
So you need to sum up the elements' outerWidth() and set the content holder's width, so you can use scrollLeft, and not overscroll.
There is no other trick, just a scrollTo function because calculating positions are not that trivial if you are new to jquery and you might want to use that.
I have a table that I'm styling with CSS. Yes I know, tables are bad and all that. I want the "grid" of TD's to all have the height of the row they are positioned in.
http://jsfiddle.net/p87Bv/1/
You'll see if they have varying content, they look all jumbled up! Would prefer not to use Javascript.
tables are not automatically bad. tables are perfect for displaying tabular data... even though that doesn't seem to be what you are doing.
move the style from the div to the table cell...check out my updated fiddle for some CSS changes. i think you could remove the divs from the markup now that they aren't being used for anything via CSS
http://jsfiddle.net/p87Bv/5/
All you have to do is give you tds a height, and then give the divs inside a height: 100%.
Here's the fiddle: http://jsfiddle.net/p87Bv/2/
It's hard to understand your question. Maybe you can clarify - is this what you're looking for? Also notice how the overflowing text is in a scrollable div - more on that later.
Link: http://jsfiddle.net/ZFHUm/
If it is, it's as simple as adding the height CSS property. Also, it's always good to address the text overflow, especially in this manner, in case the text inside the table row (div) is larger than the div itself. Add these to the 'table td div' property to achieve the affect in the new fiddle:
height:200px;
/* or whatever height you'd like them to be */
overflow:auto;
/* makes all overflowing text have a scrollbar */
I have a set width and the height is set to auto.
Each row is a div, inside is a div for each column. and there is a <p> tag inside the column divs where text should be.
The CSS involved is very basic, just some padding and set width/heights...
and float left.
Something I'm missing?
It's actually expected behavior for your code. You have a single "word" in your "cell", with no spaces in it. So browser doesn't know where to wrap and automatically extends the box. You should add word-wrap: break-word CSS rule to .orderHistoryTable selector (or to orderHistoryTable div.row1 if you want this behavior only on this cell)
http://jsfiddle.net/d2Amf/
Did you try setting the CSS overflow property?
http://www.quirksmode.org/css/overflow.html
I live and breath by the Clearfix method. It will solve many of your layout problems w/ divs. It might solve this issue you're having, or might not, but overall it's great to use when doing div heavy layouts. I use Jeff Starr's method from Perishable Press: http://perishablepress.com/press/2009/12/06/new-clearfix-hack/