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/** >>> 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 <[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/-/dWIvX4znogoJ. > > 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.
