jQuery UI tabs: hidden elements are shown in IE7 - jquery-ui

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.

Related

Why tab selection arrows from FMX TabControl disappear at runtime?

I have a TabControl with many tabs. During the design time there is a control artifact like the one the image below where I can scroll the tabs that are not visible, since there is no available space to show them all.
However at runtime it shows up like this:
[
The only way to select the other non visible tabs is using the keyboard arrows when focusing on any of the visible tabs.
The user will not know that there are more hidden tabs with this problem.
The FullSize parameter does not change anything on runtime. Clipchildren, ClipParent, etc does not cause any change.

jQuery-UI Dialog: How to make NONE of the action buttons "default"

In jQuery-UI dialog box, the first button appears to be the default, therefore having focus set to itself.
But, this causes a frustrating effect, especially in Safari. Even in IE, you will see a rectangular selection mark around the button. Moreover, the hover effect will not be seen.
How can I set NONE of these buttons as default and therefore NOT having focus set on any of them?
Edit:
Examples can be seen at jqueryui demo pages and a snapshot using Safari is below.
I want to get rid of this blue selection.
I think it could be an css-class, that turns the button to "default".
Check with the Firebug Element Inspector what classes are applied to these buttons, and append the standard css class to all buttons of the form.

how to make only a part of screen scrollable

I've developed menu tabs in Tabs. jsp and included it in my Main.jsp . Now is it possible to make the Tabs not scroll in the jsp (i,e) the file that is included should not be scrolling down. How do i do this?
This has got nothing to do with Struts2, what you need is a floating menu which shouldnt scroll and should be fixed, there are multiple ways of doing it, one very simple but nice way can be found here

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.

IE Radio Button Alignment Issue

I have an ASP.Net-MVC application that is mostly complete. However, I have one page that contains radio buttons. When that page is displayed in Firefox or Chrome, the radio buttons are displayed in a horizontal row (which is what I want). But when the page loads in IE, the radio buttons show up in a column. I am using the Html.RadioButton helper.
I have tried editing several of the css properties in the master stylesheet, but I have not been able to come up with a solution.
Have any of you encountered this before? If so, what could the solution be?
It would be handy #Jacob, if you could list what you have tried.
Have you tried the css display:inline?
Or have you tried putting them as <li>'s in a <ul> and then setting the display:inline on the ul or the li's?
I ended up just putting the radio buttons in a table row. It's not the most elegant solution, but it works all the time.

Resources