Eclipse Community Forums: Remote Application Platform (RAP)

Home » Eclipse Projects » Remote Application Platform (RAP) » Combo Drop Down Arrow(Combo Drop Down Arrow without Border)

Combo Drop Down Arrow [message #886218]

Thu, 14 June 2012 09:09

Eclipse User

hello,

i can draw the combo box without border,
however there's a separator line between the drop down list and arrow.
how can i get rid of this ?

my requirement is to draw the combo without any borders, which works fine.
but the separator line exist between drop down list and the arrow.

regards,
sudesh bulathsinhala

Re: Combo Drop Down Arrow [message #886259 is a reply to message #886218]

Thu, 14 June 2012 11:09

Eclipse User

Hi Sudesh,
to remove the separator line use the following CSS:
Combo-Button {
border-left: none;
}
HTH,
Ivan

On 6/14/2012 4:09 PM, Sudesh Bulathsinhala wrote:
> hello,
>
> i can draw the combo box without border,
> however there's a separator line between the drop down list and arrow.
> how can i get rid of this ?
>
> my requirement is to draw the combo without any borders, which works
> fine.
> but the separator line exist between drop down list and the arrow.
>
> regards,
> sudesh bulathsinhala

--
Ivan Furnadjiev

Twitter: @EclipseRAP
Blog: http://eclipsesource.com/blogs/

Professional services for RAP and RCP?
http://eclipsesource.com/services/rap/

Re: Combo Drop Down Arrow [message #886274 is a reply to message #886259]

Thu, 14 June 2012 11:39

Eclipse User

Hello Ivan,

Many thanks, it worked !

Regards,
Sudesh

Re: Combo Drop Down Arrow [message #886325 is a reply to message #886274]

Thu, 14 June 2012 14:28

Eclipse User

Hello Ivan,

what's the best way to hide the arrow.
we have a requirement to hide the arrow when in disable state.

Combo-Button:disabled, DateTime-DropDownButton:disabled {	
	background-color: white;
	border: none;
	border-left: none;
}

Thanks in advance.
Sudesh

Re: Combo Drop Down Arrow [message #886371 is a reply to message #886325]

Thu, 14 June 2012 15:58

Eclipse User

Hi Sudesh,
the icon is defined by the CSS element:
Combo-Button-Icon {
background-image: url( resource/widget/rap/combo/down.png );
}
Combo-Button-Icon:hover {
background-image: url( resource/widget/rap/combo/down-hover.png );
}
Unfortunately, there is no "disabled" state for Combo-Button-Icon
element. Currently, only "hover" state is supported. Please open an
enhancement request to support "disabled" state on Combo-Button-Icon.
When Combo is disabled the drop icon become semi-transparent, but it's
not possible to remove it.
Best,
Ivan

On 6/14/2012 9:28 PM, Sudesh Bulathsinhala wrote:
> Hello Ivan,
>
> what's the best way to hide the arrow.
> we have a requirement to hide the arrow when in disable state.
>
>
> Combo-Button:disabled, DateTime-DropDownButton:disabled {
> background-color: white;
> border: none;
> border-left: none;
> }
>
>
> Thanks in advance.
> Sudesh
>

--
Ivan Furnadjiev

Twitter: @EclipseRAP
Blog: http://eclipsesource.com/blogs/

Professional services for RAP and RCP?
http://eclipsesource.com/services/rap/

Re: Combo Drop Down Arrow [message #886532 is a reply to message #886371]

Fri, 15 June 2012 02:07

Eclipse User

Hello Ivan,

Many Thanks.
Yes, I will raise enhancement request for the said.

Also, for now I'm just wondering if we can achieve the same effect using WidgetUtil.CUSTOM_VARIANT.

For instance if we conditionally apply the CSS based on additional tag.

Combo-Button-Icon.hide {
    background-image: url("/themes/icons/notify_empty.gif");
}

Combo-Button-Icon.show {
    background-image: url("/themes/icons/down_arrow.gif");
}

My question is how should I trigger this event ?
I have the place where combo is getting enable/disable.

I tried :

combo.setData(WidgetUtil.CUSTOM_VARIANT, "hide");

combo.setData(WidgetUtil.CUSTOM_VARIANT, "show");

conditionally to trigger, however it does not reach

Combo-Button-Icon.hide

block in our CSS.

It's possible to define following in CSS:

Combo.hide {
    background-image: url("/themes/icons/notify_empty.gif");
}

Combo.show {
    background-image: url("/themes/icons/down_arrow.gif");
}

but it defeats the purpose.

Is it possible to have a conditional CSS, like :

Combo.hide {
      Combo-Button-Icon {
            background-image: url("/themes/icons/notify_empty.gif");
      }
}

Combo.show {
      Combo-Button-Icon.show {
            background-image: url("/themes/icons/down_arrow.gif");
      }
}

Thanks in advance.
Sudesh Bulathsinhala

Re: Combo Drop Down Arrow [message #886553 is a reply to message #886532]

Fri, 15 June 2012 02:55

Eclipse User

Hi Sudes,
just looked at the client-side combo implementation (Combo.js) and combo
custom variant is not applied to the button (see Combo.js around line
149 and 157). The fix there is to add/remove the variant on this._button
too. Once this is done I think your conditional custom variant switching
should work. But I think that the proper fix is just to add a "disabled"
state for "Combo-Button-Icon" in Combo.theme.xml (single line fix).
Please open an enhancement request for both cases:
1. Propagate combo custom variant to the combo button.
2. Add support for "disabled" state for "Combo-Button-Icon"
Best,
Ivan

On 6/15/2012 9:07 AM, Sudesh Bulathsinhala wrote:
> Hello Ivan,
>
> Many Thanks.
> Yes, I will raise enhancement request for the said.
>
> Also, for now I'm just wondering if we can achieve the same effect
> using WidgetUtil.CUSTOM_VARIANT.
>
> For instance if we conditionally apply the CSS based on additional tag.
>
>
> Combo-Button-Icon.hide {
> background-image: url("/themes/icons/notify_empty.gif");
> }
>
> Combo-Button-Icon.show {
> background-image: url("/themes/icons/down_arrow.gif");
> }
>
>
> My question is how should I trigger this event ?
> I have the place where combo is getting enable/disable.
>
> I tried :
>
>
> combo.setData(WidgetUtil.CUSTOM_VARIANT, "hide");
>
>
>
> combo.setData(WidgetUtil.CUSTOM_VARIANT, "show");
>
>
> conditionally to trigger, however it does not reach
> Combo-Button-Icon.hide block in our CSS.
>
> It's possible to define following in CSS:
>
>
> Combo.hide {
> background-image: url("/themes/icons/notify_empty.gif");
> }
>
> Combo.show {
> background-image: url("/themes/icons/down_arrow.gif");
> }
>
>
> but it defeats the purpose.
>
> Is it possible to have a conditional CSS, like :
>
> Combo.hide {
> Combo-Button-Icon {
> background-image: url("/themes/icons/notify_empty.gif");
> }
> }
>
> Combo.show {
> Combo-Button-Icon.show {
> background-image: url("/themes/icons/down_arrow.gif");
> }
> }
>
>
>
> Thanks in advance.
> Sudesh Bulathsinhala
>
>

--
Ivan Furnadjiev

Twitter: @EclipseRAP
Blog: http://eclipsesource.com/blogs/

Professional services for RAP and RCP?
http://eclipsesource.com/services/rap/

Re: Combo Drop Down Arrow [message #886564 is a reply to message #886553]

Fri, 15 June 2012 03:27

Eclipse User

Thanks Ivan,

Will raise the enhancement request and keep you posted.

Regards,
Sudesh Bulathsinhala

Re: Combo Drop Down Arrow [message #888405 is a reply to message #886564]

Mon, 18 June 2012 00:49

Eclipse User

Hello Ivan,

Already raised the following feature request, as per your instructions.

https://bugs.eclipse.org/bugs/show_bug.cgi?id=382816

Regards,
Sudesh Bulathsinhala

Previous Topic:	Probably simple -- need to add links to page
Next Topic:	Offline capabilities with local storage

Goto Forum:

-=] Back to Top [=-

Current Time: Fri Jun 20 19:53:49 EDT 2025

.:: Contact :: Home ::.

Breadcrumbs

Sign up to our Newsletter