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.
Related
I have an app that has two ag-grids in two tabs using Angular Material tabs. When the user switches between tabs the items in one of the columns get rendered outside of the grid (but inside the tab body). The difference in the column is that it uses a custom cell renderer. It only effects the grid in the first tab because that is the grid that uses the cell renderer. So you have to switch to the second tab then back to the first tab to see it.
Stackblitz example here
It's hard to see because the column elements get rendered at the bottom of the tab window, you can barely see them poking out at the bottom of the grid. Also, if you page to the next page of the grid they are rendered properly, even on the first page when you page back.
I've tried executing gridApi.refreshCells() after the tab has switched but it doesn't do anything.
The fix turned out to be simple and I hope this is the best method for doing so. I simply execute the grid API's redrawRows method.
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.
I have created tab layout as in this example http://jqueryui.com/demos/tabs/#bottom with controls bellow the panel. I have 3 default tabs, which can't be delted and than user can add some more tabs and also delete them.
The problem is that the default tabs should be on the top like there http://jqueryui.com/demos/tabs/#default so because UI doesn't support two control panels, I have created new element looking like control panel on top <p class="ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-top tabs-header-top"></p> with fixed heigth. But now I don't know how to move the default tabs to the right position. I tried adding them position: relative; top:-20em; ,but to make this working, the whole tab container must have fixed heigth and that's bad, because I need it to stretch within the window to be as big as possible.
So is there any other way how to move the default tabs to the top?
Thanks
edit: here is example of my idea, but achieved with fixd heigth http://jsfiddle.net/L6QjK/2/
To be clear: This method is technicaly working, so the questin is not about making tabs with two control panels, but about positioning the tabs
Not sure if it will work, but try creating two DIVs, one with default styling and one with the bottom styling:
<div class="tabs">...
<div class="tabs tabs-bottom">
and then use $(".tabs").tabs(...)
So finally I managed to create two control panels on my own by changing the jquery ui code.
If somebody is trying to make same thing as I here are some tips:
1) To create multiple control panels, find this.list=this.element.find("ol,ul)").eq(0)
now, the .eq(0) selector causes, that onlz the first ul or ol is made to control panel, so I simply modified the find selector to this :this.list=this.element.find("ol,ul:lt(2))") and the :lt(2) selector will make first two ULs to two control panels. Now we have two control panels and it is all about css positioning, you can get isnpired here http://jqueryui.com/demos/tabs/#bottom to move one control panle to the bottom.
2)I am using schema, that the first control panel contains static tabs, and to the second one are added dznamic tabs. So I also needed to change the target during adding tabs. For this you have to find h.appendTo(this.list) and change it to h.appendTo(this.list[1]) because ad.1) this.list now contains two elements and I want the tabs add to the second one.
So finaly to make two control panels tab layout isn't that hard
I'm a newbe for Blackberry and finding it quite difficult, I'm working on the TabControl example. I have changed the tabs to scroll. Now when i scroll through tabs the focus changes and as soon as the focus shifts to the other tab, the data for that tab appears.
I want to make these tabs clickable only, though they shall scroll but should change only on click.
And also when i use UIApplication.getApplication.pushScreen(someScreen) in the tabs, this someScreen appears out of the tabs, whereas i want to show this screen below the tabs only.
please help
You have to override onFocus(int) to not do anything when focus is moved. (You may or may not have to override touchEvent to handle an actual CLICK event).
You can push a screen into tabs that is not part of the tabs already. If you want something new to appear, try switching managers within the screen instead.
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.