Is there a way to get horizontal scrolling implemented in a horizontal panel ?
or any other panel can be used to achieve the functionality mentioned below -
The requirement is that i am creating a search bar where search items are being added as and when user inputs them (something similar to this - http://documentcloud.github.com/visualsearch/)
Well i got the functionality working and even the looks are similar but struggling on the horizontal panel. I am using a horizontal panel as a search bar and it has a suggest box embedded in it. so when user inputs data the search items are added to the horizontal panel. but as and when search items are added the horizontal panel grows in size and moves out of the screen and browser's horizontal scroll bar appears. But i wanted a scroll bar on the horizontal panel itself.
Can this be achieved ?
want some ideas ... any help is appreciated.
Thanks.
You may want to use the css overflow-x attribute. If you want it to scroll set the value to scroll or auto. If you need to constraint the size of the div in specific ways you may need to control it progamatically.
I don't see any other solution than place your HorizontalPanel inside a scroll panel.
Then I would add a CSS property to prevent the vertical scrollbar from showing.
Here's an ui.xml excerpt:
<ui:style>
.scrollHorizontal{
overflow-y: hidden !important;
/* !important used to force override the style "overflow:scroll"
of the ScrollPanel */
}
</ui:style>
<g:ScrollPanel addStyleNames="scrollHorizontal">
<g:HorizontalPanel ui:field="resultsPanel" />
</g:ScrollPanel>
You may need to check the client height of your scroll panel so as to adjust the height of the items inside the horizontal panel, depending on your layout.
Related
Is there a way to add the scrollbar to vertical image list in this JSSOR demo?
Instead of having the functionality of "drag and scroll", it would be useful if we would have a scrollbar indicating the number of images in the list.
using the mark-up of the example slider:
you need to change the following style for <div class="jssort01-99-66">:
style="width:250px; overflow-y:scroll;"
now you have a scroll bar on the right of your thumbs
I have a border layout in ExtJS where there is a north panel which, in turn, has several panels nested in it.
The "parent" north panel is collapsible and has a splitter. The problem is, whenever I move the splitter, the other panels are repainted too late.
Example: if my panel is 300px and I resize it to 320px, my panels remain 300px. If i resize again to, say, 350px, the panels get resized to 320px.
The parent panel's layout mode is set to "auto" by default.
When I set the layout mode of the parent panel to "vbox", the other panels resize appropriately in width. However, these child-panels are expandable/collapsible as well, and with the vbox layout I can no longer expand them fluently.
Anyone have a clue what's going on/how to fix the lag?
Edit: after further investigation, it appears to only affect the headers of the panels, not the panels themselves.
I fixed it (for now) by adding the following to the parent panel, even though it's laggy...
listeners: {
resize: function() {
Ext.each(this.items.items, function(child){
var w = child.getWidth();
child.getHeader().setWidth(w);
});
}
}
I need a scrollPanel with a verticalpanel and a tablayout panel inside it. Problem is, unless I specify the exact height of the tablayoutPanel, the tab content does not show. Any known fixes/ workarounds?
Not the answer you are looking for, but might spark an idea for another way to do this - what does it mean to scroll a tab panel? As soon as the user starts scrolling down, the tabs will no longer be visible to change tabs, user will always need to scroll all the way to the top to consider any other tab.
That said, any of the *LayoutPanel classes GWT has introduced that implement ProvidesResize, RequiresResize, etc need sizing to properly draw themselves and their content. This is why you are having the issue. These classes are designed to size their children, not to just consume as much space as those children require.
Closest I can suggest to a workaround (except for putting a ScrollPanel inside the TabLayoutPanel instead) would be to know the height of the current tab's contents, add to that the height of just the tabs themselves, and assign that as the height of the tabpanel. Not a very nice solution, but it might get you by.
i have a list box in my application, but i don't want to show the
vertical scroll bar on the right side, is there any way to remove it?
here is my code:
<g:ListBox visibleItemCount='3' width="15em">
<g:item>Last 7 Days</g:item>
<g:item>Last Week</g:item>
<g:item>Last Month</g:item>
</g:ListBox>
Thanks!
I believe the correct answer to this is simply: "You can't"
The ListBox (HTML Select) vertical scroll bar cannot be completely removed.
You could create your own custom control using a div to do the same thing. but I believe that may be outside of the abilities of GWT.
Hide vertical scrollbar in <select> element
Will provide additional information.
I assure you the correct answer to this is simply: "You can".
Just add the line:
overflow: hidden !important;
to your css style sheet and make sure your visible item count is higher than it's total item count.
I want to have a panel, with two columns.
The first column will contain a list of beans, and the right one a form panel for editing those beans. What I want to do, is that list height is the same as height of the form panel on the right. My list of beans will be larger and larger over time, so it's height will probably exceed form height. When that happens, there should be a scrollbar showed for the list. I also don't want to set explicit size for list and my form panel (it should be flexible because some time I will add or remove some form fields).
I'm basically new to GXT. I'm looking forward for some proposals.
Cheers,
jjczopek
Try setting the CSS style overflow-y: auto; with max-hight on the Panel (div?) on which you need a scroll bar. That should solve your problem.
Try to set Fill or Fit Layout.