JQuery ui Tabs & Autocomplete combobox nesting - jquery-ui

I am using jquery ui tabs
Inside a tab i want to inset an autocomplete combobox
When the combobox is outside the tabs it works perfect, but when inside the tabs it doesnt look good.
Here is a screenshot:
Any ideas how to solve this issue?

solved it. i had a class for span inside the tabs ( #tabs span {......} ) –

Related

Jquery UI Tabs with Jquery UI Widgets in tabs acting strange

I have three tabs in a Jquery UI tabs widget. Inside of the tabs I am creating a Wijmo Grid. One on each tab. The Grid is based on Jquery UI as well. The grid on the first tab seems fine.
The grid on the second and third tabs (the hidden ones) have strange sizing issues. The Grid on one appears roughly 10 pixels wide and the full height. The one on the third tab appears about 50 by 50 pixels.
I know the code on those tabs is fine because if I make one of those the primary tab then it works fine and the other two are broken. So I think it is some sort of interaction between the Jquery UI Tabs widget and the contents of the tabs (a Wijmo Grid). Does anyone know what causes this strange interaction and what I can do to make it work predictably?
The Grid does size calculation when initializing. It needs to be displayed somehow when doing so.
You can add class="ui-helper-hidden-accessible" to make it off screen when rendering.
Make sure you initialize the grids then the widgets. Or you can call $("#grid").wijgrid("doRefresh"); when the tab is activated that it is contained in.

Show a div with the layout like a dialog

I need to format multiple containers (div) in a web page to look like a jquery-ui dialog.
The divs should automatically change if I change the theme.
So far I'm applying a jquery-ui tab to the div, but this don't have the same title bar and I need to add a lot of html for each div
Thanks In Advance
Just use the same css as jQuery UI and apply it to your divs.
Examples:
http://jsfiddle.net/Fyj7L/
http://jsfiddle.net/Fyj7L/1/
http://jsfiddle.net/Fyj7L/2/

jQuery UI, Asp.NET, IE, Disappearing Buttons

I have an Asp.NET website being written in C#. There is a DataGrid () that has three columns of buttons (). I an using jQuery UI to redesign site and I wanted to style the buttons in this grid. After finding no way to do it with HTML/ASP markup, I decided to use a jQuery selector to set the style. This works to style the buttons, but in IE 8, when I hover over a button, the rest of the buttons disappear and they don't come back until I refresh the page. My javascript looks like this:
$('input[type~="submit"]').button ();
$('input[type~="submit"]').css ('font-size', '10px');
Any help would be greatly appreciated.
The issue was my lack of a DOCTYPE declaration. Making it strict fixed the issue.

jQuery UI tabs: hidden elements are shown in IE7

The problem happens only in IE7:
When I go to the next tab some elements (text input fields, buttons) from the previous tab are not completely 'hidden' and shown on the next tab (just on top of it). Buttons disappear when I mouse over them, but text inputs stay there forever.
I am using jQuery 1.4 and JqueryUI 1.8
Has anyone seen that problem before?
Thanks
i faced the same problem before. My advice - begin with empty tabs, then add step-by-step all elements to their tab-containers. one of them is parsed incorrectly by ie.

jQuery-ui autocomplete IE6 z-index problem

I am implementing jQuery-ui autocomplete function in my website. In IE6, the autocomplete box appears below other html elements select, input etc. These elements overlap the autocomplete suggestions box. In IE7, 8, it works fine.
I tried changing the z-index of parent div. I changed the z-index of parent div of input, to which I have attached the autocomplete, to 99. Then I set the style for parent div of other elements to 0. But this did not work.
Anybody else had same problem?
Thanks
Try using the bgiframe plugin. It addresses this specific problem.

Resources