Set CSS for ListBox Items working in Firefox not in Safari
360 views
Skip to first unread message
priya
Mar 23, 2009, 5:56:54 AM3/23/09
to Google Web Toolkit
Hi all,
I have one ListBox in my GWT application.
I want to set CSS for some of the items in this ListBox..
I am using following code for this:
DOM.getChild(listBox.getElement(), i + 1).setClassName
("list_box_style");
This code is working perfect in Firefox but not working in Safari
browser.
I don't know this is problem of DOM.getChild() method or setting style
for that.
Is Safari supports DOM.getChild() method?
If anyone know another way then please suggest...
Any help is welcome..
Thanks in advance,
Priya
I have one ListBox in my GWT application.
I want to set CSS for some of the items in this ListBox..
I am using following code for this:
DOM.getChild(listBox.getElement(), i + 1).setClassName
("list_box_style");
This code is working perfect in Firefox but not working in Safari
browser.
I don't know this is problem of DOM.getChild() method or setting style
for that.
Is Safari supports DOM.getChild() method?
If anyone know another way then please suggest...
Any help is welcome..
Thanks in advance,
Priya
Danny Schimke
Mar 23, 2009, 7:03:06 AM3/23/09
to Google-We...@googlegroups.com
Could it be, that the style is set but not shown. We're adding CSS- classnames to option- elements of a listbox too, but only in FF there is a change visible. Because the listbox for example in IE will not refresh its GUI after adding styles to its items. I have not found a fix for this yet... there should be a way to refresh GWT- components on view.
-Danny
-Danny
2009/3/23 priya <joship...@gmail.com>
Shashi Kant
Mar 23, 2009, 7:26:23 AM3/23/09
to Google Web Toolkit
This might be a CSS issue
Paste you "list_box_style" here.
On Mar 23, 4:03 pm, Danny Schimke <schimk...@googlemail.com> wrote:
> Could it be, that the style is set but not shown. We're adding CSS-
> classnames to option- elements of a listbox too, but only in FF there is a
> change visible. Because the listbox for example in IE will not refresh its
> GUI after adding styles to its items. I have not found a fix for this yet...
> there should be a way to refresh GWT- components on view.
>
> -Danny
>
> 2009/3/23 priya <joshipriya...@gmail.com>
Paste you "list_box_style" here.
On Mar 23, 4:03 pm, Danny Schimke <schimk...@googlemail.com> wrote:
> Could it be, that the style is set but not shown. We're adding CSS-
> classnames to option- elements of a listbox too, but only in FF there is a
> change visible. Because the listbox for example in IE will not refresh its
> GUI after adding styles to its items. I have not found a fix for this yet...
> there should be a way to refresh GWT- components on view.
>
> -Danny
>
priya
Mar 24, 2009, 2:01:23 AM3/24/09
to Google Web Toolkit
Hi Shashi Kant
This is my css code:
.list_box_style{
background-image: url("../images/pkg_image2.bmp");
background-position: right;
background-repeat: no-repeat;
}
Is this correct?
I don't think this is CSS problem..
Because its working in FF correctly
In Safari and IE it's not working..
If you have another solution then please suggest..
It's really urgent...
This is my css code:
.list_box_style{
background-image: url("../images/pkg_image2.bmp");
background-position: right;
background-repeat: no-repeat;
}
Is this correct?
I don't think this is CSS problem..
Because its working in FF correctly
In Safari and IE it's not working..
If you have another solution then please suggest..
It's really urgent...
Shashi Kant
Mar 24, 2009, 5:14:17 AM3/24/09
to Google Web Toolkit
Oh you are using an image. I dont think IE supports that. ,This reason
behind this is because of how IE gets the "base" for the HTML Select
tag - it's derived from the Win32api - the same reason why dropdown
lists and select lists have a nasty habit of rendering "above"
everything else on the html page.
BUT, you could still experiment with background-color. That should
work like in this example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css" media="screen">
.optionBold {background-color: Fuchsia; font-weight: bold;}
</style>
</head>
<body>
<form id="form1">
<div>
<select id="htmlSelect" multiple="multiple" size="5" >
<option>Non-styled 1</option>
<option>Non-styled 2</option>
<option class="optionBold">Styled</option>
<option style="background-color: Aqua; font-weight: bold;">Styled
inline</option>
</select>
</div>
</form>
</body>
</html>
behind this is because of how IE gets the "base" for the HTML Select
tag - it's derived from the Win32api - the same reason why dropdown
lists and select lists have a nasty habit of rendering "above"
everything else on the html page.
BUT, you could still experiment with background-color. That should
work like in this example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css" media="screen">
.optionBold {background-color: Fuchsia; font-weight: bold;}
</style>
</head>
<body>
<form id="form1">
<div>
<select id="htmlSelect" multiple="multiple" size="5" >
<option>Non-styled 1</option>
<option>Non-styled 2</option>
<option class="optionBold">Styled</option>
<option style="background-color: Aqua; font-weight: bold;">Styled
inline</option>
</select>
</div>
</form>
</body>
</html>
Danny Schimke
Mar 24, 2009, 6:13:53 AM3/24/09
to Google-We...@googlegroups.com
My problem is similar. My CSS for <option>- tag's of a select- element are not shown "dynamically" their new CSS- layout in IE. I'am setting the CSS- classes like the following:
listBox.getElement().getElementsByTagName("option").getItem(<index>).setClassName("empty-option");
My CSS looks like:
.empty-option {
color: #F2A336;
}
This is only a color- change...
But this color is not shown in IE after adding the class. If I hide and show the listBox again the colors are updated correctly in IE. But this cannot be a correct workaround for me...
Example:
listBox.getElement().getElementsByTagName("option").getItem(<index>).setClassName("empty-option");
// after this the color of css class empty-option is shown correctly in FF, not IE
listBox.setVisible(false);
listBox.setVisible(true);
// now the color is shown correctly in IE too
This means, that the CSS works in all browsers. It's not a CSS- issue... I dont know how to fix this.
-Danny
listBox.getElement().getElementsByTagName("option").getItem(<index>).setClassName("empty-option");
My CSS looks like:
.empty-option {
color: #F2A336;
}
This is only a color- change...
But this color is not shown in IE after adding the class. If I hide and show the listBox again the colors are updated correctly in IE. But this cannot be a correct workaround for me...
Example:
listBox.getElement().getElementsByTagName("option").getItem(<index>).setClassName("empty-option");
// after this the color of css class empty-option is shown correctly in FF, not IE
listBox.setVisible(false);
listBox.setVisible(true);
// now the color is shown correctly in IE too
This means, that the CSS works in all browsers. It's not a CSS- issue... I dont know how to fix this.
-Danny
2009/3/24 Shashi Kant <kant.s...@gmail.com>
alex.d
Mar 24, 2009, 8:41:44 AM3/24/09
to Google Web Toolkit
CSS-styling of listbox items isn't consistent across the major
browsers. Just use a listbox/combobox from any widget library out
there.
On 24 Mrz., 11:13, Danny Schimke <schimk...@googlemail.com> wrote:
> My problem is similar. My CSS for <option>- tag's of a select- element are
> not shown "dynamically" their new CSS- layout in IE. I'am setting the CSS-
> classes like the following:
>
> listBox.getElement().getElementsByTagName("option").getItem(<index>).setClassName("empty-option");
>
> My CSS looks like:
>
> .empty-option {
> color: #F2A336;
>
> }
>
> This is only a color- change...
> But this color is not shown in IE after adding the class. If I hide and show
> the listBox again the colors are updated correctly in IE. But this cannot be
> a correct workaround for me...
>
> Example:
>
> listBox.getElement().getElementsByTagName("option").getItem(<index>).setClassName("empty-option");
> // after this the color of css class empty-option is shown correctly in FF,
> not IE
> listBox.setVisible(false);
> listBox.setVisible(true);
> // now the color is shown correctly in IE too
>
> This means, that the CSS works in all browsers. It's not a CSS- issue... I
> dont know how to fix this.
>
> -Danny
>
> 2009/3/24 Shashi Kant <kant.shash...@gmail.com>
browsers. Just use a listbox/combobox from any widget library out
there.
On 24 Mrz., 11:13, Danny Schimke <schimk...@googlemail.com> wrote:
> My problem is similar. My CSS for <option>- tag's of a select- element are
> not shown "dynamically" their new CSS- layout in IE. I'am setting the CSS-
> classes like the following:
>
> listBox.getElement().getElementsByTagName("option").getItem(<index>).setClassName("empty-option");
>
> My CSS looks like:
>
> .empty-option {
> color: #F2A336;
>
> }
>
> This is only a color- change...
> But this color is not shown in IE after adding the class. If I hide and show
> the listBox again the colors are updated correctly in IE. But this cannot be
> a correct workaround for me...
>
> Example:
>
> listBox.getElement().getElementsByTagName("option").getItem(<index>).setClassName("empty-option");
> // after this the color of css class empty-option is shown correctly in FF,
> not IE
> listBox.setVisible(false);
> listBox.setVisible(true);
> // now the color is shown correctly in IE too
>
> This means, that the CSS works in all browsers. It's not a CSS- issue... I
> dont know how to fix this.
>
> -Danny
>
priya
Mar 24, 2009, 9:15:34 AM3/24/09
to Google Web Toolkit
Hi,
Setting listbox visible false and then true is working for color..
But i want to set image.. it's not working for image..
I know it's not CSS issue..
my code is not working in Safari and IE...
It's working perfect in FF..
I want to work this in safari..
On Mar 24, 3:13 pm, Danny Schimke <schimk...@googlemail.com> wrote:
> My problem is similar. My CSS for <option>- tag's of a select- element are
> not shown "dynamically" their new CSS- layout in IE. I'am setting the CSS-
> classes like the following:
>
> listBox.getElement().getElementsByTagName("option").getItem(<index>).setClassName("empty-option");
>
> My CSS looks like:
>
> .empty-option {
> color: #F2A336;
>
> }
>
> This is only a color- change...
> But this color is not shown in IE after adding the class. If I hide and show
> the listBox again the colors are updated correctly in IE. But this cannot be
> a correct workaround for me...
>
> Example:
>
> listBox.getElement().getElementsByTagName("option").getItem(<index>).setClassName("empty-option");
> // after this the color of css class empty-option is shown correctly in FF,
> not IE
> listBox.setVisible(false);
> listBox.setVisible(true);
> // now the color is shown correctly in IE too
>
> This means, that the CSS works in all browsers. It's not a CSS- issue... I
> dont know how to fix this.
>
> -Danny
>
> 2009/3/24 Shashi Kant <kant.shash...@gmail.com>
Setting listbox visible false and then true is working for color..
But i want to set image.. it's not working for image..
I know it's not CSS issue..
my code is not working in Safari and IE...
It's working perfect in FF..
I want to work this in safari..
On Mar 24, 3:13 pm, Danny Schimke <schimk...@googlemail.com> wrote:
> My problem is similar. My CSS for <option>- tag's of a select- element are
> not shown "dynamically" their new CSS- layout in IE. I'am setting the CSS-
> classes like the following:
>
> listBox.getElement().getElementsByTagName("option").getItem(<index>).setClassName("empty-option");
>
> My CSS looks like:
>
> .empty-option {
> color: #F2A336;
>
> }
>
> This is only a color- change...
> But this color is not shown in IE after adding the class. If I hide and show
> the listBox again the colors are updated correctly in IE. But this cannot be
> a correct workaround for me...
>
> Example:
>
> listBox.getElement().getElementsByTagName("option").getItem(<index>).setClassName("empty-option");
> // after this the color of css class empty-option is shown correctly in FF,
> not IE
> listBox.setVisible(false);
> listBox.setVisible(true);
> // now the color is shown correctly in IE too
>
> This means, that the CSS works in all browsers. It's not a CSS- issue... I
> dont know how to fix this.
>
> -Danny
>
priya
Mar 30, 2009, 7:59:06 AM3/30/09
to Google Web Toolkit
Can anyone help me with this issue?
Reply all
Reply to author
Forward
0 new messages