How to fix jQuery UI autocomplete/combobox layout? - css

I want to use jQuery UI's autocomplete as a combobox, as showed in this example. But I have trouble getting the layout right. I want the button to be aligned right beside the input. I created a jsfiddle to show the problem: here

You could add some relative positioning: http://jsfiddle.net/CSypd/4/

Related

Custom tool tip in ag-grid angular is partially visible

I am trying to implement custom tool tip in ag-grid, but the tooltip is partially visible.
For reference, i have source code present in Plunker. There are two ag-arid instances as an example. If you mouse over on first ag-grid on first column of last row, tooltip is partially visible.
is there a way to show full content of tooltip.
link to the code: 'http://plnkr.co/edit/QBfY00iJ8sxkZqym'
Updated Pic
You need to set a height on the :host selector in your custom tooltip component. E.g. set it to 300px, then the tooltip should display above your mouse pointer when on the last row, allowing it be completely visible.
Demo.

Bootstrap navbar style change on toggle

I am using a WP theme(bootstrap). When resize my window to mobile view, i see a button of toggle menu (3 horizontal lines). On clicking it, i see a drop down type list of pages.
I want to change that drop down to open like right to left.
Just like this : Here is the link
How to change the dropping style from [top To Bottom] to [Right To Left]?
I think you might need to look at Bootstrap's 'off-canvas' menu. Unfortunately it's not just a simple change from top to bottom to right and left but it's quite straight forward to achieve using this demo example.
https://getbootstrap.com/examples/offcanvas/

bootstrap dropdown button height is smaller than the main button

Hi I am using bootstrap drop down button but it's height is smaller than button
I don't wont to use since I'm Using already.
thanks in advance
Because you provide only image, so i can only provide bootstrap document
http://getbootstrap.com/components/#btn-groups
Please be sure you add class btn-group on wrapper div of dropdown button.
Try this: http://www.bootply.com/MincjjEhJw

Ionic Platform custom midle tab

So i having problem to customise in bottom tabs the middle, i want to make middle tab height bigger then other tabs, so i cant find the way to customise it. It would be nice if there would be somebody that can help with this.
Link for editing link. And wanted result image.
Tried separately change the hight but, there are a feeling that flex box doesn't allow to tab go out of content.
Inherit the CSS class that holds the icon in the middle and add your custom properties.

Keep jQuery UI dialog in fixed position

I want to keep a jquery UI dialog in a fixed position (with respect to content) even if that means it opens outside the browser window. I'm able to control the positioning until the dialog hits the edge of the window, but there appears to be some kind of offset control that is keeping it from opening offscreen.
I'm successfully using this solution for the same issue with datepicker:
How to control positioning of jQueryUI datepicker
I wonder if a similar fix is possible for dialog (I tried the obvious change - replacing "datepicker" with "dialog" - doesn't work).
Many thanks.
I had the same challenge which I managed to fix by using Fixed CSS positioning. Initialize the dialog on page load (with autoOpen: false) and then when you want the dialog to be displayed:
$('#dialogContent').parent().css('position', 'Fixed').end().dialog('open');
add the following setting to the dialog.
dialogClass: "dialog-fixed"
in your css declare the class as follows.
.dialog-fixed
{
position:fixed !important;
}
that works for me... as per jquery 2.1.1 and jquery ui 1.11.2

Resources