I have a chart that's in a div that's set to overflow-y: scroll. The tooltips spill out of the chart to the right and part of them can't be seen.
Apparently, CSS doesn't allow overflow-y: scroll and overflow-x: visible at the same time, hence the obscuration of the tooltips. I also had the same problem with a calendar but it has a setting that changes the direction that it expands.
Is there a way that I can reposition or offset the tooltips such that they expand to the left?
Here's a pic...
I thought this hack would work but it results in the div containing the charts becoming horizontally scrollable.
https://stackoverflow.com/a/39554003/221683
The tooltip shoud be outside the oveflow box if you want to show wider area of it. You can calculate its position in js on mouseover or any other action - without the code I do not know what are you showing, how, and why it is not working as you describe. "the code works fine" - apparently not, if you asked your question...
<style>
.container { position:relative; }
.tooltip { position:absolute; }
</style>
<div class='container'>
<div class='tooltip'>Hi mum, this is long as hell tooltip, not overflowed</div>
<div class='chart'>
... chart data
</div>
</div>
Related
I'm porting chrome extension to Firefox and I'm testing on Nightly 51a.. version.
When I click the popup options icons it opens and scrollbars appear and after half a second those disappear.
How to correct this?
At the moment I've given a hyperlink in the top in the optins popup with this code which when clicked opens full view html in a new tab and this works just fine:
<a style="font-size:1.5em;" href="options.html" target="_blank">Open Full Window</a>
The popup that is being shown for a browser_action is, currently, being set to a maximum of 800x600 pixels (at least in my testing). However, your content is being rendered at a much larger size while having the scroll bars not shown to the user (either not rendered at all, or positioned outside of the view into the document provided by the panel).
There are multiple ways to solve this. However, I was not able to find one that did not result in specifying an explicit height and width for the <body>, or a sub element (e.g. a <div> enclosing all content). Several ways showed the scroll bars, but left them disabled.
The simplest way to get the scroll bars to show up, is to change your HTML from:
<body>
to:
<body style="height:580px;width:800px;">
Obviously, you could also change this in your CSS (banks/options.css). From:
body{
min-width:500px;
min-height: 500px;
}
To:
body{
height: 580px;
width: 800px;
min-width: 500px;
min-height: 500px;
}
However, neither of those allow for the possibility that the panel will be shown with different dimensions (e.g. on other sized screens, or if Firefox changes what it is doing).
Thus, my prefered solution is to use JavaScript. In options.js add something like:
function setBodyHeightWidth(){
let width=window.innerWidth;
let height=window.innerHeight;
height -= 20; //Adjust for Save button and horizontal scroll bar
//document.body.style.width=width; //Does not work
//document.body.style.height=height; //Does not work
document.body.setAttribute('style','height:' + height + 'px;width:' + width + 'px;');
}
function onDOMLoaded(){
setBodyHeightWidth();
//Anything else you need to do here.
}
document.addEventListener('DOMContentLoaded', onDOMLoaded);
Using a significantly trimmed down version of the code for your extension (i.e. I removed all your JavaScript, and most of the non-visible HTML), the above code makes it look like:
I am testing this in IE 11:
Codepen
I am attempting to have the md-tab-body of my md-tabs control flex to the bottom of the page. I have had to include this css rule to get that somewhat working:
#tab-content-0 > div, #tab-content-1 > div, #tab-content-2 > div, #tab-content-3 > div {
height: 100%;
}
If you look at the codepen above, you will see that I get a scroll bar when I do so. What am I doing wrong? I want the tab content to flex to the bottom of the page, the first interior container to just take up however much space it needs and the second interior container to flex to the bottom of the tab content, and if it needs more space, it should have a scrollbar inside.
How do I accomplish this? I think the issue has something to do with the CSS rule above, but I cannot get it to flex at all without it.
Chekc out this pen. I am sure you can do the styling as you did in the other tabs. For this example I just used simple md-tab with label and other simplified elements.
http://codepen.io/next1/pen/qZRpEB
<div>
<div style="display:inline-block;">
<div style="display:none"></div>
</div>
</div>
I'm trying to understand this inline-block behaviour. This is a simplified version of a layout issue I ran into with some responsive elements in my header and menu bars. If the intermediate div is anything but inline-block, the entire nested block will have no height (or visibility, I'm not sure). However, if the intermediate div is an inline-block, it appears to display none with the innermost child (it's shaded in Firebug code, so I'm assuming it's hidden), however the the parent div maintains some sort of default height.
The best work-around I've found, which also sheds some light on where the default height is coming from, is to give the outer div a line-height of 0 or 1px. It still shows a 2-3px height which I can live with for my particular design. However, I can imagine cases where this work-around won't work, so it seems a bit like a hack.
I'm interested in understanding why this particular structure is behaving this way. So far, with my tests, it appears to be unique in terms of not collapsing when its children have no display. When understood properly, is it a bug or the logical result of the way the nested displays are interacting? Is there a better way to control it than with line-height? Can it be forced to display no height at all?
I'm not interested in JS solutions, or solutions which suggest work-arounds involving avoiding inline-blocks. Adding CSS to the existing proposed structure is fine. In my mind, the best solution would show no height for the structure with the least consequences for elements displayed inside the structure when display is not set to none. My question is as much theoretical as it is practical.
Is it a bug or the logical result of the way the nested displays are interacting?
Inline elements (inline-block and inline - which both recreate your issue), have white space after them. This has the same effect as a single SPACE U+0020 character, by HTML specifications. This is what causes your parent div to have a height.
Is there a better way to control it than with line-height? Can it be forced to display no height at all?
It depends, really, on what you consider 'better'. You could float the 'middle' element, instead of displaying it inline. (This may require you to clear the floats in the parent element - there is a common fix for this called clearfix)
Here is sample code showing this method in effect:
HTML:
<div class="parent">
<div class="middle">
<div class="final">asdf</div>
</div>
</div>
CSS:
.middle{ float:left; }
.final{ display:none; }
/* Shading to show sizes of divs */
div { border:1px solid; background:rgba(0,0,0,.2); }
/* Clearfix */
.parent:before,
.parent:after {
content: " ";
display: table;
}
.parent:after {
clear: both;
}
Live example: http://jsfiddle.net/16xp2m3L/2/
I am using the YUI multi page calendar on my website. I would like to center this on my web page but I am unsure of how to do this due to the complex CSS I am not used to. I have tried adding margin-left & margin-right: auto but this is not working.
An example of this multi-page calendar can be found here: http://developer.yahoo.com/yui/examples/calendar/calgrp_clean.html
Would somebody be able to help me center this calendar?
Thanks in advance.
This is extremely simple. You just need to define a width for the main div so the margin can center it. You also need to put a div right before the main div closes to clear the months so the main div has a distinct height/width.
Add this style to the main Div:
<div id="cal1Container" class="yui-calcontainer multi" style="margin: 0 auto; width: 500px; float: none;">
And before this Div closes add this
<div style="clear: both;"></div>
Now it works! Floats are pretty confusing at first, but often that's something that needs to be done. Other than that it's basic CSS.
this is pretty frustrating...
basically i'm creating a menubar on a site, and have used css sprite to have a hover effect where the image changes as you hover over it. this is working fine, but i can't display multiple images inline because i have to use display:block in the css for the sprite/hover class for it to work.
here is some of the css code i have:
.x a {display:block; width:100px; height:100px; overflow:hidden;}
.x a:hover img {margin-left:-100px;}
/* ie6 needs this fix*/
.x a:hover {zoom:1;}
and then here is the code in the php file (it's part of a wordpress theme, this bit going in the header.php file):
<div class='x'><a href='#' alt='#'><img src='#' /></a></div>
note: the image used is a horizontal sprite, so two images merged into one (100x100 turned into 200x100).
this alone works fine, but then when i add something to it like:
<div class='x'><a href='#' alt='#'><img src='#' /></a></div>
<div class='x'><a href='#2' alt='#2'><img src='#2' /></a></div>
it makes it go to a new line. i thought it may be a padding issue where it's overflowing on the line, but i've tried doing just two images (total area taken up maybe 210px) and it's in a 911px container area and still goes to a new line.
i've tried using < span> tags, tables, inline-block, and several other things but still no success. at one point i got it to stay inline but then the image was placed beneath all the others, in the correct horizontal position but wrong vertical position.
the goal is to have about 8 100x100 images all in a row in the menu bar, with one spacing in between each one, in a container with width 911px. they all will be in the 'x' class so that the image changes when hovered over.
sorry for writing so much but wanted to get it clear. please help!
The divs are rendering as blocks, which is why the images aren't sitting beside eachother.
If I understand what you're trying to achieve correctly, adding a rule
.x { display: inline-block }
will do what you want.
I made a JSFiddle to try it out: http://jsfiddle.net/XZWzW/