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