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/**myScrollPanel.css")
>>> Style customScrollPanelStyle();
>>> }
>>> public MyScrollPanel(){
>>> super((MyScrollResources)GWT.**create(MyScrollResources.**class));
>>> this.setVerticalScrollbar(new MyVerticalScrollBar(),
>>> MyVerticalScrollBar.**getScrollBarWidth());
>>> // this.setHorizontalScrollbar(**new MyHorizontalScrollBar(),
>>> MyHorizontalScrollBar.**getScrollBarHeight());
>>> }
>>>
>>> }
>>>
>>>
>>> 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().**createDivElement();
>>> setElement(this.elem);
>>> this.setStyleName("**verticalScrollBar");
>>> }
>>> 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.**
>>> scrollWindowPercentage);
>>> //make sure we don't go out of bounds with the scrollbar
>>> if(this.scrollBarPosition > this.**getMaximumVerticalScrollPositi**
>>> on()){
>>> this.scrollBarPosition = this.**getMaximumVerticalScrollPositi**on();
>>> }
>>> this.elem.getStyle().setTop(**this.scrollBarPosition, Unit.PX);
>>> }
>>>
>>> @Override
>>> public HandlerRegistration addScrollHandler(ScrollHandler handler) {
>>> Event.sinkEvents(this.**getElement(), 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().**
>>> getOffsetHeight();
>>> this.scrollWindowPercentage = (height > 0) ? Math.min(1.0,this.**
>>> scrollWindowHeight/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/**
>>>> msg/google-web-toolkit/-/**ukY2df0M7DsJ<https://groups.google.com/d/msg/google-web-toolkit/-/ukY2df0M7DsJ>
>>>> .
>>>>
>>>> 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/-/K8QQ8IQD184J.
>>
>> 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 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.
