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.
Related
my problem is that I have a lot of AbsolutePanels in GWT an they are drawn as if they were a TabLayoutPanel ( the GUI looks like a TabLayoutPanel, however, it is not one, it is made of a lot of AbsolutePanels ).
So, now I have the problem that as soon as a lot of tabs are opened they exceed the max. width of the AbsolutePanel and so they cannot be seen anymore nor can they be clicked or anything else.
So, is it somehow possible to add a ScrollBar to this AbsolutePanel in order to scroll back and forth?
I do not think it is a good idea to post any code because everything is being done programmatically. The only thing that I would need is an example of how to accomplish a scrollbar within an AbsolutePanel. This AbsolutePanel is of a fixed width!
Thank you very much for your help in advance.
Use CSS Overflow property.
You just need to set overflow: auto;.
It can be done programmatically:
panel.getElement().getStyle().setOverflow(Overflow.AUTO);
or with CSS style sheet:
.overflowAuto {
overflow: auto;
}
and
panel.addStyleName("overflowAuto");
How can I style a dijit.form.Select drop down menu if a use the HTML markup.
<select id="sourceselect" dojoType="dijit.form.Select" style='width:200px' onChange="changeDetected();">
</select>
To make it clear it want to style the drop down menu that is filled with the content. I want to change the height of that menu and have a scroll bar if the height is exceeded.
I am using Dojo version 1.6. Here is a Fiddle example: http://jsfiddle.net/NH7dd/.
Edit: Why the minuses?
The menu that is generated by Dojo is placed in the root of the DOM node. It's a common mistake that the menu is somehow relative positioned towards the textfield, but it isn't.
If you wish to change the style of the menu, then you could use the following CSS selector:
div[dijitpopupparent="sourceselect"] > .dijitMenu {
/** Your CSS */
}
The reason this works is because the menu is wrapped inside a dijit/popup. This popup allows displaying/hiding the menu and as you can see it has an attribute dijitpopupparent which has the original ID of the field.
I also updated your JSFiddle, which now looks like this. But I don't really recommend changing the behavior of the menu like this, since you might mess up the original functionality/behavior of the combobox. I mean, right now I have problems going to certain values because one "scroll tick" already passes a value. With the updated style I can't even properly select "2" anymore.
EDIT: In the updated JSFiddle the scrollbar will always be visible, if you want the scrollbar only to appear when there are more options, then change overflow-y: scroll to overflow-y: auto.
You can set the property for maxHeight.
<select id="sourceselect"
dojoType="dijit.form.Select"
data-dojo-props="maxHeight: 200"
style='width:200px'
onChange="changeDetected();">
</select>
Also, the newer syntax for dojo is "data-dojo-type" instead of "dojoType".
Here is JSFiddle showing the maxHeight property. (I used dojo 1.9, but maxHeight is available in 1.6)
http://jsfiddle.net/NH7dd/17/
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.
I am using the gwt visualization API. I use the Table widget and would like to specify the height using the setHeight() method.
When I put enough records, the vertical scroll bar shown up. The width of the table no longer fit the data after the scroll bar show up. The column labels are long records are forced to split to two lines:
How can I avoid it ?
(I don't want to fix the width of the table as the data is dynamic and I will add arbitrary columns also).
Ok, I'm not particularly familiar with the "gwt visualization API" but the the first solution which comes to mind, is that you always show the scroll bars and make the field a little bit bigger.
Her a little code example:
ScrollPanel sp = new ScrollPanel();
sp.setAlwaysShowScrollBars(true);
or if you are using UiBinder:
<g:ScrollPanel ui:field="scrollPanel" alwaysShowScrollBars="true">
You can also let a scroll panel appear in the bottom so your lines still appear in the bottom, but I don't thin that's what you want...
Regards,
Stefan
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.