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;
}
Related
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.
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()).
please see this http://jsfiddle.[net]/Nkkzg/108/ (SO doesn't allow to like to JsFiddle) and write 'Apple' in auto-complete text box. You can see a long string appears and with that page's horizontal scroll bar also appear which is very annoying.
I want to show the full string as a result without setting the width, You can see autocomplete results div shows from the left corner to maximum right depending on string length. How can we show the results in the center of page like input textbox, so that horizontal scroll bar shouldn't appear.
Any help will be highly appreciated.
Thanks and Regards.
According to this article:
jQuery UI Autocomplete Width Not Set Correctly
It looks as though you need to place everything in a container and specify the appendTo property telling it where to put the menu.
You should try to use position:absolute
.ui-autocomplete {
max-height: 200px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
border:1px solid #222;
position:absolute;
}
Live Demo
You could try to put this in your .css file
span input.ui-autocomplete-input {
width: 100%;
}
In that way the autocomplete get's the width you have style it to according to the styleClass that is on the enclosing span tag
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;
}
sIFR doesn't seem to work on objects with display set to none. I've tried calling sIFR.redraw() after setting display to block but the replacement isn't showing up. Am I just calling the wrong method?
sIFR can't calculate an element that isn't displayed, because the dimensions are 0x0. The alternative is to offset it via
el { position:absolute; left:-999em; top:-999em; }
You can also use overflow:hidden on the parent element to clip it away, when you need to show it you just re-set the element's position to 'static'.
Setting the style to {height: 0; overflow: hidden;} seems to work for me.