Hi Deepak, The most you should need to do is the following:
AbsolutePanel absPanel = new AbsolutePanel(); for(int i = 0; i < 10; i++){ SimplePanel simp = new SimplePanel(); simp.setHeight("100px"); simp.setWidth("500px"); simp.getElement().getStyle().setBackgroundColor("green"); absPanel.add(simp); } MyScrollPanel scrollPanel = new MyScrollPanel(); scrollPanel.setHeight("500px"); scrollPanel.setWidth("100px"); scrollPanel.add(absPanel); RootPanel.get().add(scrollPanel); If the above code does not give you a green scrollable box then you should recheck your code. With the code I sent you and the above code, you should have a custom scroll bar (not native). You should at the very least have the above code working. Hope this helps. Let me know. -Seth On Tuesday, April 3, 2012 1:59:33 PM UTC-4, Deepak Singh wrote: > > Hi Seth, > > I added the styles to myVerticalScrollBar. and added the entire page > content to MyScrollpanel but still the default scrollbar is there. > > Its not overridden. > > > On Mon, Apr 2, 2012 at 9:39 PM, GWTter <seth....@gmail.com> wrote: > >> Hi Deepak, >> >> Yes, you would need to apply some style to your scrollbar so that it at >> least has width (or height if you were using the horizontal scrollbar). If >> you look at the MyVerticalScrollBar constructor, the line >> 'this.setStyleName("verticalScrollBar")' sets the style for the scrollbar. >> This style is not defined in the myScrollPanel.css as that CSS file is only >> meant for the cornerpanel styling. You would need to define the style >> "verticalScrollBar" in your main CSS file. For example: >> >> .verticalScrollBar{ >> width: 10px; >> background: blue; >> } >> >> Also, make sure that the content you're scrolling is within the >> MyScrollPanel, since only content within the MyScrollPanel will have the >> custom scroll bars, anything not within a CustomScrollPanel will still >> default to the native implementation. Hope this helps. >> >> -Seth >> >> -Seth >> >> >> On Monday, April 2, 2012 11:44:57 AM UTC-4, Deepak Singh wrote: >>> >>> Nothing more than what i sent you. >>> >>> I have just myScrollPanel.css as mention above. >>> >>> Could you pls guide me with css if i need to apply some css over >>> vertical scrollbar? >>> >>> Thanks in advance >>> Deepak >>> >>> On Mon, Apr 2, 2012 at 8:19 PM, GWTter <seth....@gmail.com> wrote: >>> >>>> Hi Deepak, >>>> >>>> This looks good to me. What style are you using for the vertical >>>> scrollbar? >>>> >>>> And thanks for the repost. >>>> >>>> -Seth >>>> >>>> >>>> On Sunday, April 1, 2012 3:50:12 PM UTC-4, Deepak Singh wrote: >>>>> >>>>> Hi Seth, >>>>> >>>>> I am posting my code here: >>>>> >>>>> myScrollPanel.css >>>>> @CHARSET "ISO-8859-1"; >>>>> >>>>> .customScrollPanel{ >>>>> } >>>>> .customScrollPanelCorner{ >>>>> opacity: 0.0; >>>>> } >>>>> >>>>> MyScrollPanel.java >>>>> >>>>> public class MyScrollPanel extends CustomScrollPanel { >>>>> /** >>>>> * Extends the CustomScrollPanel Resources interface so that we can >>>>> add our own css file and still reuse the Resources and Style interfaces >>>>> from CustomScrollPanel >>>>> * @author SL >>>>> * >>>>> */ >>>>> public interface MyScrollResources extends Resources{ >>>>> >>>>> @Source("com/pdstechi/client/**m**yScrollPanel.css") >>>>> Style customScrollPanelStyle(); >>>>> } >>>>> public MyScrollPanel(){ >>>>> super((MyScrollResources)GWT.**c**reate(MyScrollResources.**class)**); >>>>> this.setVerticalScrollbar(new MyVerticalScrollBar(), >>>>> MyVerticalScrollBar.**getScrollB**arWidth()); >>>>> // this.setHorizontalScrollbar(**ne**w MyHorizontalScrollBar(), >>>>> MyHorizontalScrollBar.**getScrol**lBarHeight()); >>>>> } >>>>> >>>>> } >>>>> >>>>> >>>>> MyVerticalScrollBar.java >>>>> >>>>> public class MyVerticalScrollBar extends Widget implements >>>>> VerticalScrollbar { >>>>> private double scrollBarHeight = 0.0; >>>>> private double scrollBarPosition = 0.0; >>>>> private double scrollWindowPercentage = 1.0; >>>>> private double scrollWindowHeight = 0; >>>>> private int totalScrollContentHeight = 0; >>>>> private static final int SCROLL_BAR_WIDTH = 10; >>>>> private Element elem; >>>>> public MyVerticalScrollBar(){ >>>>> this.elem = Document.get().**createDivElemen**t(); >>>>> setElement(this.elem); >>>>> this.setStyleName("**verticalScr**ollBar"); >>>>> } >>>>> public static int getScrollBarWidth(){ >>>>> return SCROLL_BAR_WIDTH; >>>>> } >>>>> >>>>> @Override >>>>> public int getMaximumVerticalScrollPositi****on() { >>>>> return (int)(this.scrollWindowHeight-****this.scrollBarHeight); >>>>> } >>>>> >>>>> @Override >>>>> public int getMinimumVerticalScrollPositi****on() { >>>>> return 0; >>>>> } >>>>> >>>>> @Override >>>>> public int getVerticalScrollPosition() { >>>>> return (int)this.scrollBarPosition; >>>>> } >>>>> @Override >>>>> public void setVerticalScrollPosition(int position) { >>>>> this.scrollBarPosition = Math.floor(position*this.**scrol** >>>>> lWindowPercentage); >>>>> //make sure we don't go out of bounds with the scrollbar >>>>> if(this.scrollBarPosition > this.**getMaximumVerticalScrollP**ositi** >>>>> on()){ >>>>> this.scrollBarPosition = this.**getMaximumVerticalScrollP**ositi** >>>>> on(); >>>>> } >>>>> this.elem.getStyle().setTop(**th**is.scrollBarPosition, Unit.PX); >>>>> } >>>>> >>>>> @Override >>>>> public HandlerRegistration addScrollHandler(ScrollHandler handler) { >>>>> Event.sinkEvents(this.**getEleme**nt(), Event.ONSCROLL); >>>>> return this.addHandler(handler, ScrollEvent.getType()); >>>>> } >>>>> >>>>> @Override >>>>> public Widget asWidget() { >>>>> return this; >>>>> } >>>>> >>>>> @Override >>>>> public int getScrollHeight() { >>>>> return this.totalScrollContentHeight; >>>>> } >>>>> @Override >>>>> public void setScrollHeight(int height) { >>>>> //TODO: HAVE TO FIND A WAY TO GET THE SIZE OF THE CORNER BOX, OR >>>>> BETTER YET, IF THE CORNER BOX IS ENABLED BECAUSE THE HORIZONTAL SCROLL >>>>> BAR >>>>> IS ALSO VISIBLE >>>>> this.totalScrollContentHeight = height; >>>>> this.scrollWindowHeight = this.elem.getParentElement().**g** >>>>> etOffsetHeight(); >>>>> this.scrollWindowPercentage = (height > 0) ? Math.min(1.0,this.** >>>>> scrollWindow**Height/height):1.**0; >>>>> this.scrollBarHeight = Math.max(SCROLL_BAR_WIDTH,**Math**.floor(this.* >>>>> *scrollWindowHeight***this.**scrollWindowPercentage))**; >>>>> this.elem.getStyle().**setHeight**(this.**scrollBarHeight, Unit.PX); >>>>> } >>>>> } >>>>> >>>>> >>>>> All these classes are in my client package. >>>>> >>>>> I just want that browser default varticalscrollbar should change its >>>>> look. >>>>> >>>>> >>>>> Also, I am reposting the original msg with attached code again to the >>>>> group. >>>>> >>>>> Thanks >>>>> Deepak >>>>> >>>>> >>>>> >>>>> >>>>> >>>>> On Sun, Apr 1, 2012 at 11:01 PM, GWTter <seth....@gmail.com> wrote: >>>>> >>>>>> Hi Deepak, >>>>>> >>>>>> You would have to post your code. Did you make sure to style your >>>>>> vertical scrollbar, create the MyScrollPanel and set its >>>>>> verticalScrollbar >>>>>> with the one you created? In the code I sent you the vertical scrollbar >>>>>> has >>>>>> a width of 10px, you should style the vertical scrollbar to be within >>>>>> that >>>>>> width. >>>>>> >>>>>> Also, I can't seem to find the repost of the original message with >>>>>> the attached code I sent you anywhere in this thread, am I looking in >>>>>> the >>>>>> wrong place. Thanks. >>>>>> >>>>>> -Seth >>>>>> >>>>>> >>>>>> On Saturday, March 31, 2012 4:27:42 PM UTC-4, Deepak Singh wrote: >>>>>>> >>>>>>> Hi Seth, >>>>>>> >>>>>>> I copied your classes and css in my client package. It compiled fine. >>>>>>> When i run the applicatio in dev mode, the browser default scrollbar >>>>>>> is not overridden. >>>>>>> >>>>>>> It is same as default. >>>>>>> >>>>>>> What can i do to override the native one ? >>>>>>> >>>>>>> On Sun, Apr 1, 2012 at 1:05 AM, Deepak Singh < >>>>>>> deepaksingh...@gmail.com> wrote: >>>>>>> >>>>>>>> Thank you Seth. I would give it a try. >>>>>>>> >>>>>>>> Thats already reposted and is in the thread. >>>>>>>> >>>>>>>> Thanks >>>>>>>> Deepak >>>>>>>> >>>>>>>> >>>>>>>> On Sat, Mar 31, 2012 at 10:59 PM, GWTter <seth....@gmail.com>wrote: >>>>>>>> >>>>>>>>> Hi Deepak, >>>>>>>>> >>>>>>>>> This is all that's in the css file as the only important class is >>>>>>>>> the corner that I've set to be transparent: >>>>>>>>> >>>>>>>>> .customScrollPanel{ >>>>>>>>> } >>>>>>>>> >>>>>>>>> .customScrollPanelCorner{ >>>>>>>>> opacity: 0.0; >>>>>>>>> } >>>>>>>>> >>>>>>>>> As for how to use the vertical scroll bar to override the native >>>>>>>>> (or the transparent one CustomScrollPanel uses by default) if you >>>>>>>>> look at >>>>>>>>> the line >>>>>>>>> >>>>>>>>> "this.setVerticalScrollbar(new MyVerticalScrollBar(),**MyVertic*** >>>>>>>>> *alScrollBar.**getScrollBarWidth(****));" >>>>>>>>> >>>>>>>>> in MyScrollPanel class in the code I sent, this is what actually >>>>>>>>> does the overriding. This method is available on the >>>>>>>>> CustomScrollPanel >>>>>>>>> class which MyScrollPanel extends. >>>>>>>>> >>>>>>>>> Hope that answers your question. Also can you please repost my >>>>>>>>> initial reply with the code to this thread, it would save me the time >>>>>>>>> of >>>>>>>>> having to rewrite it :) Thanks. >>>>>>>>> >>>>>>>>> >>>>>>>>> -Seth >>>>>>>>> >>>>>>>>> -- >>>>>>>>> You received this message because you are subscribed to the Google >>>>>>>>> Groups "Google Web Toolkit" group. >>>>>>>>> To view this discussion on the web visit >>>>>>>>> https://groups.google.com/d/**ms****g/google-web-toolkit/-/g-** >>>>>>>>> x4PrK****zgjoJ<https://groups.google.com/d/msg/google-web-toolkit/-/g-x4PrKzgjoJ> >>>>>>>>> . >>>>>>>>> >>>>>>>>> To post to this group, send email to google-web-toolkit@** >>>>>>>>> googlegroup****s.com <google-web-toolkit@googlegroups.com>. >>>>>>>>> To unsubscribe from this group, send email to google-web-toolkit+* >>>>>>>>> *unsubscribe****@googlegroups.com<google-web-toolkit%2bunsubscr...@googlegroups.com> >>>>>>>>> . >>>>>>>>> For more options, visit this group at http://groups.google.com/** >>>>>>>>> group****/google-web-toolkit?hl=en<http://groups.google.com/group/google-web-toolkit?hl=en> >>>>>>>>> **. >>>>>>>>> >>>>>>>> >>>>>>>> >>>>>>>> >>>>>>>> -- >>>>>>>> Deepak Singh >>>>>>>> >>>>>>> >>>>>>> >>>>>>> >>>>>>> -- >>>>>>> Deepak Singh >>>>>>> >>>>>> -- >>>>>> You received this message because you are subscribed to the Google >>>>>> Groups "Google Web Toolkit" group. >>>>>> To view this discussion on the web visit https://groups.google.com/d/ >>>>>> **ms**g/google-web-toolkit/-/**ukY2df0**M7DsJ<https://groups.google.com/d/msg/google-web-toolkit/-/ukY2df0M7DsJ> >>>>>> . >>>>>> >>>>>> To post to this group, send email to google-web-toolkit@**googlegroup >>>>>> **s.com <google-web-toolkit@googlegroups.com>. >>>>>> To unsubscribe from this group, send email to google-web-toolkit+** >>>>>> unsubscribe**@googlegroups.com<google-web-toolkit%2bunsubscr...@googlegroups.com> >>>>>> . >>>>>> For more options, visit this group at http://groups.google.com/** >>>>>> group**/google-web-toolkit?hl=en<http://groups.google.com/group/google-web-toolkit?hl=en> >>>>>> **. >>>>>> >>>>> >>>>> >>>>> >>>>> -- >>>>> Deepak Singh >>>>> >>>> -- >>>> You received this message because you are subscribed to the Google >>>> Groups "Google Web Toolkit" group. >>>> To view this discussion on the web visit https://groups.google.com/d/** >>>> msg/google-web-toolkit/-/**K8QQ8IQD184J<https://groups.google.com/d/msg/google-web-toolkit/-/K8QQ8IQD184J> >>>> . >>>> >>>> To post to this group, send email to google-web-toolkit@** >>>> googlegroups.com <google-web-toolkit@googlegroups.com>. >>>> To unsubscribe from this group, send email to google-web-toolkit+** >>>> unsubscr...@googlegroups.com<google-web-toolkit%2bunsubscr...@googlegroups.com> >>>> . >>>> For more options, visit this group at http://groups.google.com/** >>>> group/google-web-toolkit?hl=en<http://groups.google.com/group/google-web-toolkit?hl=en> >>>> **. >>>> >>> >>> >>> >>> -- >>> Deepak Singh >>> >> -- >> You received this message because you are subscribed to the Google Groups >> "Google Web Toolkit" group. >> To view this discussion on the web visit >> https://groups.google.com/d/msg/google-web-toolkit/-/dWIvX4znogoJ. >> >> To post to this group, send email to google-web-toolkit@googlegroups.com. >> To unsubscribe from this group, send email to >> google-web-toolkit+unsubscr...@googlegroups.com. >> For more options, visit this group at >> http://groups.google.com/group/google-web-toolkit?hl=en. >> > > > > -- > Deepak Singh > -- You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/3nb1iaz5z1IJ. To post to this group, send email to google-web-toolkit@googlegroups.com. To unsubscribe from this group, send email to google-web-toolkit+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.