HighCharts: context menu hidden for small charts - highcharts

My problem is exactly the same as this post. The context menu gets hidden when charts get below a certain size. The accepted answer:
.highcharts-contextmenu {
bottom: auto !important;
top: 5px;
}
works to make the menu downwards. But it is still hidden if the chart is small. Something like this: FIDDLE.
Could anybody please help? Thanks.


You need to overwrite z-index and overflow on highcharts-1 container
http://jsfiddle.net/xBUXK/16/
#highcharts-0 {
overflow:visible!important;
z-index:1!important;
}


I modified Sebastian Bochans answer to this and it worked:
.highcharts-container {
overflow:visible!important;
z-index:1!important;
}

Related

How to make AgGridReact rows lower z-index

I have a cell renderer that shows an mgt-person fine but the hover mgt-person-card goes behind the following ag-rows.
I tried
.ag-row {
z-index: -unset !important;
}
.ag-cell {
overflow: visible !important;
}
and
mgt-person-card {
z-index: 100000;
}
Also suppressRowTransform={true}
Any help appreciated
Thanks

I'm not sure if this will work for a cell renderer, but I had a similar issue with a cell editor with a custom drop down. The issue occurred after I upgraded from ag-Grid version 24 to version 27. I didn't need to set suppressRowTransform to true or tinker with the CSS to fix it. Instead, in the column definition where I am using the cellEditor I added the property cellEditorPopup and set it to true.

Vaadin OptionGroup caption location

I am trying to get an OptionGroup to have the labels next to them, on the right hand side like normal radio buttons in every other UI I have ever used, instead of underneath them. I do not see anything in the API regarding how to change the layout of this? Anyone point me in the correct direction?

Follow these steps:
Add these lines to your css
.v-select-optiongroup-horizontal .v-select-option {
display: inline-block;
}
.v-select-optiongroup-horizontal {
white-space: nowrap;
}
.v-select-optiongroup-horizontal
.v-select-option.v-radiobutton {
padding-right: 10px;
}
And call
group.setStyleName("horizontal");
where group is the OptionGroup object.

Is it possible that you inherited some styles that display the text like that?
Did you try to call hzl.setSizeUndefined()? Or maybe playing with the width (setWidth()).

Ruby on Rails - need to add a sticky footer with scroll

I really need some help getting a sticky footer with scroll. I have been researching this for a really long time and trying a bunch of stuff. But nothing worked quite right for what I need.
Heres the site
What I need is a footer that stays at the bottom, even when the window shrinks and the panels overflow that when I scroll down, the footer doesn't go up. But I also need to have liquid heights.
Can anyone help me?

You can use twitter bootstrap. Have a look at this.

Your options are essentially to use a framework(twitter-bootstrap and zurb-foundation are both good options) or to write your own javascript/jquery to move the footer as you scroll. Check out this page: http://api.jquery.com/scroll/ You could do something like this:
$('#body').scroll(function(){
$('#body').append('#your_footer');
});
Obviously, this is borderline pseudo-code but it might be a good jumping off point if you don't want to load an entire css framework just to scroll a footer.

So I figured it out without using bootstrap or JQuery.
I need this:
body > #main {
position: fixed;
width: 100%;
height: 100%;
overflow: auto;
}
footer {
position: absolute;
bottom: 0px;
}
as well as adding absolute positioning to footer elements to prevent them from getting pushed down.

How to reduce the size of datepicker in textbox?

I have been able to use datepicker in textbox but I can't figure out reducing its default size??
Any help is appreciated.Thanks iin advance

You need to change the font size so it gets smaller, like this:
.ui-datepicker {
font-size: .8em; /* put small value here*/
}
See example

If I remember correctly:
input.ui-datepicker{
font-size:10px;
}

jQuery UI accordion with autoHeight=true has unnecessary scrollbar on non-default panes

I am having trouble with jQuery accordion. When I create a content pane where the non-default pane has more content than default pane, and autoHeight is true, this provides nice animations when switching panes, but the non-default pane gets a scrollbar which I don't want.
You can see this in action by going to http://jqueryui.com/themeroller/, switching to a theme like "Blitzer" or "Humanity", and then opening Section 3 of the example accordion. Happens to me with Safari 3.2.1 and Firefox 3.0.8.
If you switch to autoHeight=false, then this does not happen and all content panes have the correct height, but the content pane is only rendered at the end of the animation and looks strange, so I had to turn off animations to avoid this strangeness.
Either I am misreading something, or this is a bug in jQuery UI accordion. Please help me figure out which of the two it is (or maybe both).

I tried several different things. autoHeight: false by itself did not work. This is what finally worked for me:
$( "#accordion" ).accordion({
heightStyle: "content",
autoHeight: false,
clearStyle: true,
});
I'm using this in a SharePoint content editor webpart with a fixed width, which added to the height issue when adding content to the accordion widget.

using this combo options works for me, 1.current version of jquery/ui
$( '#x' ).accordion({
autoHeight: false,
clearStyle: true
});

I faced similar problem, for me the following change in CSS worked.
.ui-accordion .ui-accordion-content{
overflow:visible !important;
}

Nowadays (with jQuery UI - v1.8), just autoHeight is enough, no more scrollbars are appearing.
jQuery("#accordion").accordion(
{
autoHeight:false
}
);

Having heightStyle: "content" helped resolve my issue.
Reference: Accordion

I know this is old, but I was having this problem and landed here. A solution that doesn't break your animation and gets rid of the animation can be found here:
http://webdevscrapbook.wordpress.com/2012/02/24/jquery-ui-unnecessary-scrollbar-in-accordion/
For those lazy few who don't want to click, the short answer is:
.ui-accordion .ui-accordion-content { overflow:hidden !important; }
in the accordion's CSS

try this
http://helpdesk.objects.com.au/javascript/how-to-avoid-scrollbars-when-using-jquery-accordion

I got this from the http://helpdesk.objects.com.au/javascript/how-to-avoid-scrollbars-when-using-jquery-accordion link mentioned above. It was one of the comments under the article. It gets rid of the scroll bar but also keeps the rest of the divs formatting. The above answers can cause content to flow over borders as was happening me.
.ui-accordion .ui-accordion-content{
height:auto!important;
}

This works for me:
.ui-accordion-content-active, .ui-accordion-header-active{
display: block;
}

I tried
.ui-accordion .ui-accordion-content{ overflow:visible !important; }
but I saw some visual artifacts with first tab. So I fixed the problem this way:
<script type="text/javascript">
(function() {
var fixScroll = function(event, ui) {
$(event.target).find('.ui-accordion-content-active').css('overflow', 'visible');
}
$('#tabs').accordion({
header: "h2",
create: fixScroll,
change: fixScroll
});
})();
</script>

Check if the padding for the ui-accordion-content is being overridden.
I experienced the same issue when I had put the following in my css:
.container .ui-widget-content {
padding-right: 3%;
}
I changed it as shown below and the scroll bars were gone!
.container .ui-widget-content:not(.ui-accordion-content) {
padding-right: 3%;
}
I don't have auto-height turned on either.

Resources