What i have:
HTML:
<div class="container">
<div class="text">
Some long text
</div>
<div class="extendable">
<img>
</div>
</div>
CSS:
.container {
float: right;
min-width: 10em;
padding-left: 1em;
.text {
padding: 0.3em;
}
}
Every block has dynamic width and height.
http://jsfiddle.net/vZ4eA/
What i want:
.text shouldn't be able to extend .container if the content gets too big. There should be a forced line break.
.extendable on the other hand should make container bigger if the content exceeds the width (behave normally).
You need to set a fixed width on .text and then use word-break:break-all;
Using jQuery you can set the width of .text to be that of .extendable.
var exWidth = $('.extendable').css('width');
$('.text').css('width', exWidth);
http://jsfiddle.net/vZ4eA/16/
Edit: CSS Only
You could try placing .text inside .extendable.
See here: http://jsfiddle.net/vZ4eA/18/
EDIT 2: CSS:
With some help from this answer https://stackoverflow.com/a/7231607/1399670 I have updated the fiddle to match your requirements.
http://jsfiddle.net/vZ4eA/20/
You can use a max-width for the text along with nowrap
.text{
padding: .3em;
border: 1px solid red;
max-width: 200px;
word-break: break-all;
display: block;
}
Working Example
EDIT:
To respond to one of the comments below, the max-width should probably be a dynamic value in order to work with the dynamic width of the container. You could easily implement this behavior with javascript or jQuery
jQuery
I recommend you check out this plugin to handle the re-sizing of your div
$("#div").resize(function(e){
$(".text").css({"max-width" : $(this).css("max-width") });
});
The only method I can think applicable here would be to set max-width on .text
You'd probably have to dynamically update the max-width of .text as .container resizes; specifically, on page load, and on viewport resize. You can do this using jQuery.
Related
I want to make the button always aligns vertically on the middle of the image responsively. I can make the image responsive using .img-responsive, however I can't make the arrow to be always on the middle of the image. I suspect the issue is because I can't make the height of the arrow's div to be equal the height of the image. Any way to do so?
Here is my jsFiddle..
PS: for those who can come up with better words please change the title.. ^^
CSS only solution. Using the display table and table-cell combo, you can achieve what you are looking for. I had never really tried it before, as far as I know, but searched around a bit and found a solution which gave me a good starting point to achieve what I needed.
The trick is to have a container which will possess the display table property. Inside that wrapper, you will have all your other elements, which will possess the table-cell property, in order to have them behave properly and stack themselves next to each other, as table-cell would to do.
By giving your table-cells a 100% height, they will adapt themselves to the height of the wrapper, giving you the chance to use the handy little table property going by the name: vertical align. Use the middle vertical align property to center perfectly your nav buttons.
Give your image the max-width 100% property for proper responsive behavior. But don't use bootstrap's own image responsive class because it contains css properties we don't want and that messes up our layout.
I reworked the html a bit, so that each element align perfectly, in the correct order.
WORKING EXAMPLE JSFIDDLE
HTML:
<div class="row">
<div class="col-xs-12">
<div class="image-container">
<div class="prev-btn nav-btn"> < </div>
<div class="inner-container">
<img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg" class="center-block">
</div>
<div class="next-btn nav-btn"> > </div>
</div>
</div>
</div>
CSS:
.image-container{
display:table;
height: 100%;
text-align:center;
}
.inner-container{
display:table-cell;
width: 100%;
height: 100%;
padding: 0 15px;
vertical-align: middle;
text-align: center;
}
.inner-container img{
width: 100%;
height: auto;
max-width: 100%;
}
.nav-btn{
font-size:50px;
font-weight:700;
font-family: monospace;
color: #000;
cursor:pointer;
}
.nav-btn:hover{
color: #B6B6B6;
}
.prev-btn{
position: relative;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.next-btn{
position: relative;
height: 100%;
display: table-cell;
vertical-align: middle;
}
Here's a simple solution in Javascript/Jquery. The trick is to adjust the position of each NAV buttons according to the height of the image each time the browser id resized. Dividing the image height by 2 will get you the center of the image, aka the position where you will want your buttons to be. Using only this value will no be enough, you also need to get the center value of your nav buttons. Substracting each values will give you the real position value for your buttons. The ScreenResize function will then update the position each time the image is scaled responsively.
$(function(){
//Call On Resize event on load
screenResize();
//Bind On Resize event to window
window.onresize = screenResize;
});
function screenResize() {
//Adjust Nav buttons position according to image height
$('.nav_btn').css({
'top': (($('.center-block').height() / 2)-($('.nav_btn').height() / 2))
});
}
Also, change the line-height of your buttons to this, it will help:
.nav_btn p{
line-height: 1.25;
}
Finally, use Media-Queries to change buttons font-size and line-height if necessary. Also, like user Valentin said, using images for the nav buttons could also be easier, you wouldn't have to use media-queries.
Example JSFIDDLE
I'm trying to have a toolbar always aligned to the right within a DIV without adding any height. The problem I'm finding is making this work both when the box has 100% width and when the width is determined by content. The HTML looks something similar to this:
<div class="box">
<div class="title">
float right
</div>
<div class="toolbar">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</div>
</div>
I managed to make it work in Firefox, but Chrome wraps the toolbar when there is not enough space for it instead of increasing the width of the container.
.box {
border: 1px solid #ccc;
display: inline-block;
margin: 5px 0 15px;
}
.title {
display: inline-block;
}
.toolbar {
background: #eee;
float: right;
margin-left: 25px;
}
I would like to find a single set of rules to achieve this regardless the width of the container, but I'm out of ideas unless I use some extra class to differentiate both cases. Also, I'm trying to avoid using overflow or clearfix because I don't want the toolbar to affect the height of the box.
In this fiddle I show all combinations I have tried: http://jsfiddle.net/omegak/c4y4t/2/
You can try this, This worked for me.
.title {
float:left;
}
See if this is the desired output
Updated the below css and added clearfix class to the parent div
.title {
float:left;
}
Add the following CSS and clear the floats on first Div.
.title {
float:left;
}
Here is the demo
I got it working in the end with a little hack.
I gave up on trying the title not to be float: left. Then, to prevent the box to have no height I added overflow: hidden to it. Finally, the hack consists on setting margin-bottom: -999px on the toolbar to prevent it from adding any extra height to the box.
Here is the solution: http://jsfiddle.net/c4y4t/8/
I want to create a header with 2 divs in it. The left div needs to be the same height as the right one, but the right one can scale based on its contents.
The left div's contents need to be vertically aligned to the middle.
I tried something like this:
<header>
<div id="test1">
<div>LOGO</div>
</div>
<div id="test2">
<h1>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</h1>
</div>
</header>
Use display: table-cell;
Working Demo
Edit:
In case if you want jQuery Solution it works on all browsers
You can fake this using overflow, padding and margins. It's completely cross browser compatible and doesn't need any JavaScript or anything. Just CSS. For example:
.header {
overflow: hidden;
}
.test {
background: red;
padding-bottom: 2000px;
margin-bottom: -2000px;
float: left;
width: 100px;
margin-right: 20px;
}
DEMO
There is also always faux cols (using a background image) but this is a better method that doesn't need images.
If you don't mind a bit of javascript:
$(document).ready(function() {
setHeight($('#test1'), $('#test2'));
// When the window is resized the height might
// change depending on content. So to be safe
// we rerun the function
$(window).on(resize, function() {
setHeight($('#test1'), $('#test2'));
});
});
// sets height of element 1 to equal the height of element 2
function setHeight(elem1, elem2) {
var height = elem2.height()
elem1.css('height', height);
}
DEMO
display: flex;
in the parent container works for me
Suppose I have an outer container of unknown fixed width, and an inner element, like so:
<div id="outer"><div id="inner">hide me when #outer is too small</div></div>
Is there a way I can make #inner entirely hidden (not just clipped) when #outer is not wide enough to show it in its entirety using pure CSS?
This is possible without JS through floats and adding a helper inner element:
<div class="outer">
<div class="helper"></div>
<div class="inner">hide me when .outer is too small</div>
</div>
and css:
.outer {
overflow: hidden;
}
.helper {
width: 1px;
height: 100%;
float: left;
}
.inner {
float: left;
}
The inner element will now wrap under the helper if it doesn't fit within the width of the outer element, which with .helper having height: 100% and .outer having overflow: hidden results in the inner element not being visible.
You could remove the 1px helper width by using width: 0.01px instead, but I'm not sure if that runs into browser compatibility issues.
This is not possible via pure CSS, since you cannot provide conditions (if you don't use IE .htc files;) ). You need to use JS for that and compare both elements width.
For text you can use: text-overflow:clip|ellispis;
Edit:
#inner {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
could be helpful.
EDIT:
I prepared a fiddle for rampion's solution. Note that the text-overflow with a custom string is only working in FF. Additionally, text-overflow is not standardized yet. W3C currently states it as text-overflow-mode in its working draft. See also an interesting article at MDN.
Christoph's answer is probably best in the general case, but in my case, I knew the text content but not the container width, which let me add an additional layer of trickery:
Altering the HTML slightly:
<div id="first" class="container">
<div><span>first_text_section</span></div>
</div>
<div id="second" class="container">
<div><span>second_text_section</span></div>
</div>
<div id="third" class="container">
<div><span>third_text_section</span></div>
</div>
And using the following CSS:
.container > div {
color: transparent; /* don't show the text-overflow content */
overflow: hidden;
height: 1em;
width: 100%;
}
/* use the actual text to get the measurement right for hiding */
#first > div { text-overflow: "first_text_section"; }
#second > div { text-overflow: "second_text_section"; }
#third > div { text-overflow: "third_text_section"; }
.container > div > span {
color: black; /* do show the span when possible */
}
Then as the width of the container changes, the full text is either hidden or shown appropriately. If the text contained is more than one word, the text is hidden word by word, so that's something to be aware of.
I would consider myself to be an intermediate/advanced CSS/HTML coder but I'm stumped on how to do the following scenario.. I'm starting to think it is impossible but I really want to believe it is..
Let's say the wrapper width is 1000px.
Within it is three columns. The two outside columns are the same width, this width is decided by the center column. The center column is the only one with content, just one line of text with 30px of padding on either side. So if the line of content is 100px with padding, than the other two columns would be (1000-100)/2 each..
Is there a dynamic way to have the two outside columns adjust to the varying width of the center column that is defined by its varying contents, one line of text?
Graphic of what I am trying to accomplish:
The very closest I could come up with was to use display: table; and table-cell. This creates the dynamic effect you're looking for, but I don't think you can get your desired effect without setting an explicit width to the center element.
HTML:
<div id="wrap">
<div id="left">
Left
</div>
<div id="center">
center
</div>
<div id="right">
Right
</div>
</div>
CSS:
#wrap
{
width: 1000px;
display: table;
}
#wrap div
{
display: table-cell;
border: 1px solid #000;
width: auto;
}
#center
{
padding: 0 30px;
text-align: center;
}
You can check out my attempt here, it has some buttons for you to see the different states, width on/off and add text etc. (the jQuery has nothing to do with the solution)
I think this is as close as you're going to get with pure CSS.
Good 'ole tables to the rescue:
http://jsfiddle.net/hgwdT/
Actually I think tables are the devil, but this works as you described. And so here it is using display: table-cell on the child divs, so it is functionally the same using nicer markup:
http://jsfiddle.net/XXXdB/
The center element can indeed have a dynamic width; to prevent the content from being squished, I simply added a white-space: nowrap to the p containing the text.
I also confirmed that this solution works in IE8 and FF, in addition to Chrome.
This not the most elegant solution, but it works. I wanted to go the pure CSS route, but couldn't figure it out. Nice work, jblasco and Kyle Sevenoaks, on figuring that out!
Here is my jsFiddle demo. If you don't mind using a little JavaScript though (utilizing jQuery in my example):
HTML:
<div id="wrapper">
<div class="side"></div>
<div id="middle">One line of text.</div>
<div class="side"></div>
</div>
CSS:
#wrapper {
margin: 0 auto;
width: 1000px;
}
#wrapper div {
float: left;
height: 300px;
}
.side {
background: #ddd;
}
#middle {
background: #eee;
padding: 0 30px;
text-align: center;
}
JavaScript:
var adjustSize = function(){
// Declare vars
var wrapper = $('#wrapper'),
middle = $('#middle'),
totalWidth = wrapper.width(),
middleWidth = middle.width(),
middleOuterWidth = middle.outerWidth(),
remainingWidth = totalWidth - middleOuterWidth,
sideWidth;
if(remainingWidth % 2 === 0){
// Remaining width is even, divide by two
sideWidth = remainingWidth/2;
} else {
// Remaining width is odd, add 1 to middle to prevent a half pixel
middle.width(middleWidth+1);
sideWidth = (remainingWidth-1)/2;
}
// Adjust the side width
$('.side').width(sideWidth);
}