I have a carousel in Bootstrap that displays 4 columns of thumbnails. Here's the carousel in question. If you move to the third page, you can see that the container increases in height in order to accommodate the contents of the thumbnail captions. I've been trying many things such as setting bottom margins, min heights, etc. to get the position of the "View Details" button constant across the entire carousel.
My question is what is the best way to approach this issue? I was thinking somehow making the thumbnail caption height a minimum of 4 or so lines, but I tried that(probably the wrong way) to no avail.
When I add
.caption h4 {
min-height: 2.2em; /* 2 lines as line-height is 1.1 */
}
I get all "View details" at the same level. However, that obviously doesn't treat the problem of captions being even higher. It only works if no caption is higher in fact. (But it IS ok, if you know for sure nothing is going to be higher than your multiple.)
So, instead I apply this little bit of CSS to put a limit from the other side.
.caption h4 {
max-height: 4.4em; /* 4 lines as line-height is 1.1 */
height: 4.4em; /* making it a multiple allows usage of overflow */
overflow: hidden; /* without cutting a line in the middle */
}
If you want to set a max-height equal to the height of the highest of captions dynamically, than you would have to use a little bit of JS:
(function(d) {
var captions = d.querySelectorAll('.caption h4'),
height = 0;
for(var i = 0; i < captions.length; i++) {
height = Math.max(height, captions[i].offsetHeight); // or clientHeight depends on you box model
}
var style = d.createElement('style');
style.type = 'text/css';
style.innerHTML = '.caption h4 { max-height: '+ height +'px; height: '+ height +'px; }'; // they don't need overflow as none of them can overflow;
d.getElementsByTagName('head')[0].appendChild(style);
})(document);
You add this script at the end of body, so that the DOM is already loaded (or somehow trigger it onload).
Important: this snippet is not supported by older browsers because of the querySelectorAll.
And that does the trick when I run it on your site.
Related
I am using Fullcalendar Scheduler, and the problem is when i have many resources, it becomes not good, like this:
The live demo with litle resources: http://fullcalendar.io/js/fullcalendar-scheduler-1.3.3/demos/vertical-resource-view.html
I have an idea, it's adding an horizontal scroll, but i don't know the way, can you guys help me out ?
Thank you very much and have a great day.
.fc-view-container {
overflow-x: scroll;
}
.fc-view.fc-agendaDay-view.fc-agenda-view{
width: 500%;
}
/* **For 2 day view** */
.fc-view.fc-agendaTwoDay-view.fc-agenda-view{
width: 500%;
}
Use the combination of this configure options :
dayMinWidth: 150,
stickyFooterScrollbar : true,
dayMinWidth : guarantees your horizontal titles are visible.
stickyFooterScrollbar : guarantees horizontal scrollbar is visible.
Paresh's answer works for views with many columns, but has the limitation that views with few columns will have very wide columns.
Fullcalendar's render algorithm calculates equal column widths based on the view width, and there doesn't appear to be a simple way of setting the column widths using CSS.
Instead we need to enable scrolling on the x-axis:
.fc-view-container {
overflow-x: scroll;
}
then use jQuery to calculate the overall width of the view. Here I am using a minimum column width of 100px:
var columnCount = $('.fc-agendaDay-view th.fc-resource-cell').length;
var viewWidth = $('.fc-view-container').width();
var minViewWidth = 18 + columnCount * 100;
if (minViewWidth > viewWidth) {
$('.fc-view.fc-agendaDay-view.fc-agenda-view').css('width', minViewWidth + 'px');
}
We only change the width of the view and enable scrolling if it exceeds the current width of the view. This has the effect of setting a minimum column size of 100px.
The jQuery needs to run after the calendar.render(); call.
I'm having some issues with scrollbars on element with position: absolute. The behavior I'm experiencing is that chrome 21 and firefox 15 displays scrollbars inside the box, resizing it's content thus hiding some of the text, however opera 12 and internet explorer 9 displays it also on the inside, but without resizing it's content and resizing the box instead (which is in my opinion correct, since the box doesn't have width defined). Is there any solution to make this look the same in those 4 browsers?
JsFiddle: http://jsfiddle.net/Kukkimonsuta/GaMD7/2/
Edit: as Siva Charan pointed out, it works correctly when overflow-y is set to "scroll" however that shows scrollbar always which is not desired
Edit: my final solution based on answers from Siva Charan and anonymous down voting is lame
http://jsfiddle.net/Kukkimonsuta/GaMD7/15/
function updateAutoScroll(element) {
var $element = $(element);
if (element.scrollHeight > element.clientHeight)
$element.css("overflow-y", "scroll");
else
$element.css("overflow-y", "auto");
}
The only way to do this dynamically across all browsers is with JavaScript, for simplicity I used jQuery.
http://jsfiddle.net/iambriansreed/mYuQx/
$(function(){
// loops through each container
$('.container').each(function(){
if(this.scrollHeight>this.clientHeight)
$(this).children().wrapAll(
'<div style="padding-right:'+scrollbarWidth()+'px;"/>'
);
});
// gets the browsers current scrollbar width
function scrollbarWidth() {
var parent, child, width;
if(width===undefined) {
parent = $('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');
child = parent.children();
width = child.innerWidth() -
child.height(99).innerWidth();
parent.remove();
}
return width;
};
});
Add overflow-y: scroll; to .container.two
.container.two {
top: 250px;
overflow-y: scroll;
}
Refer LIVE DEMO
UPDATE:
If you are comfortable, you can use text-overflow: ellipsis; and replace to actual space
This is more of a workaround than an actual solution, but it might be good enough. Basically, first wrap the contents of container two in another div, and add some right padding to it. Make sure you also set width: 100% in .item.
Here's a modified version of your demo: little link.
This isn't perfect, but I hope it helped!
I'm looking for a way to have a HTML container fit the width of one of its children.
OK I know, this is how it already works by design.
But! I also need another children to collapse with a "text-overflow: ellipsis". Problem is: to apply such a property, you need this children to be in "display: block" mode, which makes it enlarge the container width.
Is there any secret time to achieve what I'm looking for.
Here is a JsFiddle in case you don't get it or want to give it a try.
Edit : by the way, and this is important, I'm targetting specifically Internet Explorer 10.
As watson said, there is no "shrink-to-fit" css rule. So, you have two choices:
Set the size of the .overflow elements manually and statically. So, instead of width:100%, you put width:330px.
Use javascript to resize the .overflow elements dynamically. (I'm assuming you have more than one.) You said you wanted to shrink to the biggest internal div. Let's say you have several divs you might want to shrink to, but you want to shrink to the largest of them. First, you set them all to a class like this:
.good-width{
border: solid 2px salmon;
width:auto; /* necessary for some browsers' offsetWidth */
display:inline-block; /* gives it the width of the contents */
}
And you put javascript something like this at the top of the page:
var goods = document.getElementsByClassName('good-width');
//collect the widest one's width
var maxwidth = 0;
for(var x = 0; x < goods.length; x++) {
if(goods[x].offsetWidth > maxwidth) {
maxwidth = goods[x].offsetWidth;
}
}
//set the width of the overflow divs to match
var overflows = document.getElementsByClassName('overflow');
for(var y = 0; y < overflows.length; y++) {
overflows[y].style.width = maxwidth + 'px';
}
If I misunderstood, and you're trying to match specific overflows to specific good-widths, you should assign each element an id and do things that way:
document.getElementById('overflowID').style.width = document.getElementById('good-widthID').offsetWidth + 'px';
If it were my website, I would actually combine both #1 and #2, in order to have it look at least decent for those who don't have javascript. That is, you set a static width to the overflow things that isn't too far off, then allow the javascript to overwrite it if it can.
I have a responsive fluid design portfolio with 3 columns. Something is wrong with the CSS that I am having trouble pinpointing.
If I have exactly 3 items on a row, it appears fine. However, if the last item ends on a line with only 1 or 2 columns, then the whole format gets distorted. This can be seen by resizing the browser.
If you can help me pinpoint the CSS fix for this, I will appreciate it GREATLY.
The example page is here: http://bit.ly/KzfN2g
I believe this is the main css style that is the culprit of the problem, however I could be wrong:
.mosaic-block-three {
margin-right:3%;
width:29.3%;
background:url("../img/progress.gif") no-repeat scroll center center #F5F5F5;
border:1px solid #FFFFFF;
box-shadow:0 0 4px 0 #888888;
float:left;
margin:10px 40px 30px 0;
overflow:hidden;
position:relative;
width:291px;
}
whoa, holy registered trademark batman! i would put a
<sup>®</sup>
if i were you :) but to the question at hand...
why do you have so many lists with only one item? you've also got some styles in there that aren't defined, but i think your biggest problem is that you have items within
<li>
that are floated while the containing elements are not.
try floating .portfolio-three-item then clearing the contents within it. having floated elements inside non-floated elements (without using a clearing class or
<br clear="all" />
confuses the browser and it doesn't look as though any of the contents need to be floated.
I was able to accomplish this using simple jQuery to get the height of the image on page load and declare the height in css, then get the height of the image on window resize and redeclare it in css
$j(document).ready(function() {
// Set portfolio image item height after images load,
$j(".mosaic-backdrop img").load(function(){
var portfolioItemHeight = $j(".mosaic-backdrop img").height();
$j(".portfolio-three-item").css("height", portfolioItemHeight);
});
// reset portfolio image item height each time window is maximized
if(screen.width > 1200) {
$j(".mosaic-backdrop img").load(function(){
var portfolioItemHeight = $j(".mosaic-backdrop img").height();
$j(".portfolio-three-item").css("height", portfolioItemHeight);
});
}
// reset portfolio image item height each time window is resized
$j(window).resize(function() {
var portfolioItemHeightReized = $j(".mosaic-backdrop img").height();
$j(".portfolio-three-item").css("height", portfolioItemHeightReized);
});
});
Thank you, #kristina childs, for helping me realize it was that the height was not set properly!
ok there are several similar questions but not quite anything that I want.
I have few ajax requests on page and I want to show the image in the center of the screen, and its all working OK.
Just to make it look more prominent, I wanted to place that image on a div with translucent background, so its more obvious for the end users. Now comes the tricky part.
I made the div with css like this:
.divLoadingBackground
{
filter: Alpha(Opacity=40); -moz-opacity:0.4; opacity: 0.4;
width: 100%;
height: 100%;
background-color: #333;
position: fixed;
top: 0px;
left: 0px;
}
This fills the page up alright, or, I should say, this fills the viewport. If I scroll the page down, the page is again normal. I want this div to span the ENTIRE LENGTH of the page, no matter how long the page is.
Here is an example mockup of the problem I made to quickly demonstrate:
As you can see, I took the example of SO for the mockup ;) image 1 shows that its okay when it appears. image 2 shows that it goes up with the page on scroll.
I'm a c# developer and css is as alien to me as ancient latin.
How to make this divLoadingBackground div to fill out the entire length of the page?
Many thanks for any help.
If you need any additional info, please comment!
One thing I dont see in your css is z-index. Fixed, although, fixes this problem, sometimes, based on how other divs are positioned, your divLoadingBackground div could end up in one of the divs.
try adding
z-index: 9999;
or something similar and see if it works.
Would have put this in a comment, but it seems I have too low rep to comment.
Where is the .divLoadingBackground div located in the DOM tree? Since it has fixed position, it shouldn't scroll with the page. This makes me belive that the element is too deeply nested. Try putting it right in the body level of the page and see if that helps.
Also, are you sure that some other css directive isn't changing the position attribute to absolute or something?
Also, make sure to use the right DOCTYPE. That has some impact on fixed position elements.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Oh, and ofcourse, fixed position isn't supported in IE6 and below.
I believe you will need JavaScript/jQuery to dynamically set the height of the div in question to the height of the page once rendered.
And if you're entering the world of web, it's time to learn that new language "CSS" as well as perpahs-not-quite-as-daunting JavaScript.
When I needed such a functionality some years ago, I examined how Google Calendar did it.
Basically, they use a timer-driven JavaScript file that checks for the height of the window and adjust the height of a contained DIV tag accordingly (or of an IFRAME tag, just any container tag that you like).
Here is a code snippet from a page I worked on:
<script type="text/javascript">
document.getElementsByTagName("body")[0].style.height = "100%";
document.getElementsByTagName("html")[0].style.height = "100%";
document.getElementsByTagName("body")[0].style.minHeight = "100%";
document.getElementsByTagName("html")[0].style.minHeight = "100%";
function height()
{
try
{
height_iframe();
}
catch(err)
{
}
}
window.onload=height;
// --
var ie6WorkaroundIFrameResize = 1;
function height_iframe()
{
var any = false;
var offset = 300;
var c = document.getElementById("iframecontent");
if ( c!=null )
{
c.style.height = (GetClientHeight()-offset)+"px";
any = true;
var d = document.getElementById("iframeie6");
if ( d!=null )
{
d.style.height = (GetClientHeight()-(offset+ie6WorkaroundIFrameResize))+"px";
any = true;
ie6WorkaroundIFrameResize = 0;
}
}
if ( any )
{
setTimeout( 'height_iframe()', 300 );
}
}
function GetClientHeight()
{
return document.documentElement.clientHeight;
}
</script>
Basically, the script regularly checks for the height of the window via the GetClientHeight() function and adjusts the element in concern ("iframecontent") accordingly.
I subtract some offsets of fixed-height headers and footers.
AFAIK you would need to set the size of this divthrough javascript. I would recommend using jQuery, in this way :
//$(document).height() gives the size of the document
//(as opposed to $(window).height() that would give the size of the viewport
$("div#overlay").css('height',$(document).height());