Hi Seth, It works. Thanks.
But the scrolling happens only through the mouse wheel movement, it does not scroll by dragging the bar in up and down direction. It simply gets dragged like an image. On Wed, Apr 4, 2012 at 8:53 AM, GWTter <[email protected]> wrote: > 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 <[email protected]> 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 <[email protected]> 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 <[email protected]> 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 < >>>>>>>> [email protected]> 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 <[email protected]>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 <[email protected]>. >>>>>>>>>> To unsubscribe from this group, send email to google-web-toolkit+ >>>>>>>>>> **unsubscribe******@googlegroups.com<google-web-toolkit%[email protected]> >>>>>>>>>> . >>>>>>>>>> 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 <[email protected]>. >>>>>>> To unsubscribe from this group, send email to google-web-toolkit+** >>>>>>> unsubscribe****@googlegroups.com<google-web-toolkit%[email protected]> >>>>>>> . >>>>>>> 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/* >>>>> *ms**g/google-web-toolkit/-/**K8QQ8IQ**D184J<https://groups.google.com/d/msg/google-web-toolkit/-/K8QQ8IQD184J> >>>>> . >>>>> >>>>> To post to this group, send email to google-web-toolkit@**googlegroup* >>>>> *s.com <[email protected]>. >>>>> To unsubscribe from this group, send email to google-web-toolkit+** >>>>> unsubscribe**@googlegroups.com<google-web-toolkit%[email protected]> >>>>> . >>>>> 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<https://groups.google.com/d/msg/google-web-toolkit/-/dWIvX4znogoJ> >>> . >>> >>> To post to this group, send email to google-web-toolkit@** >>> googlegroups.com <[email protected]>. >>> To unsubscribe from this group, send email to google-web-toolkit+** >>> [email protected]<google-web-toolkit%[email protected]> >>> . >>> 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/-/3nb1iaz5z1IJ. > > To post to this group, send email to [email protected]. > To unsubscribe from this group, send email to > [email protected]. > 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 post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
