I have a Handsontable that is horizontally scrolling. The width is explicitly fixed, the height is auto and the containing DIV has auto overflow.
When a drop down cell is activated, i.e. the drop down container with items is shown, the items list is clipped. I have to scroll down to view all of the items. How can I style the drop down items list such that it appears above the scrollable area?
Here is an example of the clipped drop down: http://jsfiddle.net/ehLeur99/
Here is the DIV styling:
<div id="example1" class="hot handsontable" style="width: 210px; height: auto; overflow: auto;"></div>
Thanks
Related
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>
version : extjs-5.0
ExtJs grid has a property reserveScrollbar which reserves space for scroll bar. I've a window with layout : 'absolute' which is the container for grid.
Now the problem is, the grid doesn't reserve space for scroll bar. Many forum say the container should use layout:'fit' to make it work. However I want it to be layout : 'absolute' only.
I set exact width and height for the grid and for its columns. I expect grid to reserve space from its width.(Leaving this to Sencha).
Is there any fix for this?
You could place the grid inside a container or panel that has layout: 'fit'. The container can then be within a window that has layout: 'absolute'. You can then set the height and width for the container instead of the grid.
See example fiddle here.
I'm working on a responsive template for a Joomla site. (http://www.lyzarr.com/testsite/de/)
Which can a have a left and right sidebar as well as the main container.
Right now the content goes right up to both sides, but I like to have a margin of about 30px both left and right.
Since the template is responsive, I don't know how to do it.
You can try to add padding in css file to container-content class,
.container-content {
padding: 0 30px;
}
and in
/templates/your_template/index.php
change row class to row-fluid
so your structure will looks like here
<div class="container-content">
<div class="row-fluid">
<div id="content" class="span9"></div>
<div id="sidebarright" class="span3"></div>
</div>
</div>
in bootstrap 2.3.2 if you use row class, your span* (columns) will have fixed width [span9 = 870px and span3 = 270px]. so if you add left / right padding there will not be enough space for content and column. But if you use row-fluid class, your span* width will be set up in percent value.
In Angular Material you can set the width the of md-menu-content section within an md-menu by setting the width eg.
<md-menu-content width="2">
Is there a way to do the same for height? Using height="x" doesn't seem to work.
Thanks!
I just used this css: md-menu-content { max-height: 90vh; }, which allows the menu height to grow up to 90% of the view height. Works great!
I am using Bootstrap 3 with the following sticky footer from http://getbootstrap.com/examples/sticky-footer/
I set the #footer to min-height: 420px; so it will work responsively and adapt to narrow width and expand in height and stack the column boxes. This works just fine.
But when setting a min-height the footer will cover the content in top of it.
Is there a solution to this so the footer will be "pressed" down?
This feature works by also setting a bottom margin on the body to offset the size of the footer.
For instance, sticky-footer.css contains:
body {
margin-bottom: 60px;
}
You'll need to adjust it to the height of your #footer.