You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@click.apache.org by Jacob Wills <ja...@gmail.com> on 2010/01/21 22:22:50 UTC
Tree labels break when they get too long (IE)
Hi,
Some of the labels I've been using in my Tree are rather long and it has
been causing them to display oddly in various versions of Internet Explorer.
My project required changing the labels to make them plain text and not
clickable links, so the only way to expand the tree is to use the +/- boxes
on the side. I've attached a screenshot from IE6 showing the two types of
display bugs. The only difference between the two seems to be that the
bottom one is the last node in its level. However, while you can still
expand the top folder by clicking where the + box *should be* on the
vertical line above the broken folder icon, in the bottom example the box is
actually embedded *behind* everything else and is completely unclickable.
Editing tree.css and expanding the width of the "treestyle" class makes the
top example go away, but even a ridiculously large width won't fix the
bottom example and I'd much rather keep the width the same and just have
things display properly. :)
While the screenshot above is from IE6, if you try this in IE7 the bottom
example looks fine while the top example remains broken (I haven't tested it
in IE8). Firefox, of course, looks perfect. You can test this out by copying
the example code from the Click-extras Tree API and replacing the labels
with something longer. I also have my tree set to be javascript-enabled
using the session policy, but the display bugs appear even without that.
Does anyone have an idea on how to fix this?
Thanks,
Jacob Wills
Re: Tree labels break when they get too long (IE)
Posted by Bob Schellink <sa...@gmail.com>.
For anyone interested here's the changes made to tree.css.
http://svn.apache.org/viewvc/incubator/click/trunk/click/extras/src/META-INF/resources/click/tree/tree.css?r1=797990&r2=902352&diff_format=h
After applying Holly Hack, the CSS is much simpler as there is no floating used anymore. Tested on
Windows 7 with FF3.5, IE6/7/8, Chrome3, Opera 10 and Safari 4.
On 23/01/2010 02:22 PM, Bob Schellink wrote:
> Thanks for the fix Jacob, I'll roll these changes into the next release.
>
> Btw you were right about the hasLayout property. I'm currently
> revisiting tree.css because alot of the hacks seems to be fixed after
> applying the zoom property.
>
> For example there doesn't seem to be a need for any floating logic at
> all, which means we don't have to call clear:both or have the '_' hack.
> I'll look at this closer today.
>
> I've also noticed that applying zoom to all spans is problematic in
> IE6/7 when selecting/deselecting nodes. The tree node becomes slightly
> larger when selecting a node, which make things "jumpy".
>
> So rather apply the zoom only to links:
>
> .treestyle a {
> zoom: 1;
> }
>
> Thanks for your help.
>
> kind regards
>
> bob
>
> On 23/01/2010 03:54 AM, Jacob Wills wrote:
>> Oh, my mistake. I accidentally had that example code running in Quirks
>> mode... I changed it back to Standards and saw what you meant. I think
>> that's fixable by updating one of the already-existing hacks in
>> tree.css. At the bottom, try changing:
>>
>> .treestyle .spacer {
>> clear: both;
>> _float: none; /*IE only*/
>> }
>>
>> to
>>
>> .treestyle .spacer {
>> clear: both;
>> *float: none; /*IE only*/
>> }
>>
>> The underscore hack only seems to target IE6 and lower. The asterisk
>> updates the spacer float to work with IE7 as well, and it looks right to
>> me even in IE7 Standards now. ( Targeting various IE browsers,
>> http://www.ejeliot.com/blog/63 )
>>
>> Jacob Wills
>>
>>
>> On Fri, Jan 22, 2010 at 10:45 AM, Bob Schellink <sabob1@gmail.com
>> <ma...@gmail.com>> wrote:
>>
>> Ah that's good to know. Are you running in Standards Mode or Quirks
>> mode? So far I've been doing my testing in Standards mode which
>> might account for the strange IE7 behavior?
>>
>> kind regards
>>
>> bob
>>
>
>
Re: Tree labels break when they get too long (IE)
Posted by Bob Schellink <sa...@gmail.com>.
Thanks for the fix Jacob, I'll roll these changes into the next release.
Btw you were right about the hasLayout property. I'm currently revisiting tree.css because alot of
the hacks seems to be fixed after applying the zoom property.
For example there doesn't seem to be a need for any floating logic at all, which means we don't have
to call clear:both or have the '_' hack. I'll look at this closer today.
I've also noticed that applying zoom to all spans is problematic in IE6/7 when selecting/deselecting
nodes. The tree node becomes slightly larger when selecting a node, which make things "jumpy".
So rather apply the zoom only to links:
.treestyle a {
zoom: 1;
}
Thanks for your help.
kind regards
bob
On 23/01/2010 03:54 AM, Jacob Wills wrote:
> Oh, my mistake. I accidentally had that example code running in Quirks
> mode... I changed it back to Standards and saw what you meant. I think
> that's fixable by updating one of the already-existing hacks in
> tree.css. At the bottom, try changing:
>
> .treestyle .spacer {
> clear: both;
> _float: none; /*IE only*/
> }
>
> to
>
> .treestyle .spacer {
> clear: both;
> *float: none; /*IE only*/
> }
>
> The underscore hack only seems to target IE6 and lower. The asterisk
> updates the spacer float to work with IE7 as well, and it looks right to
> me even in IE7 Standards now. ( Targeting various IE browsers,
> http://www.ejeliot.com/blog/63 )
>
> Jacob Wills
>
>
> On Fri, Jan 22, 2010 at 10:45 AM, Bob Schellink <sabob1@gmail.com
> <ma...@gmail.com>> wrote:
>
> Ah that's good to know. Are you running in Standards Mode or Quirks
> mode? So far I've been doing my testing in Standards mode which
> might account for the strange IE7 behavior?
>
> kind regards
>
> bob
>
Re: Tree labels break when they get too long (IE)
Posted by Jacob Wills <ja...@gmail.com>.
Oh, my mistake. I accidentally had that example code running in Quirks
mode... I changed it back to Standards and saw what you meant. I think
that's fixable by updating one of the already-existing hacks in tree.css. At
the bottom, try changing:
.treestyle .spacer {
clear: both;
_float: none; /*IE only*/
}
to
.treestyle .spacer {
clear: both;
*float: none; /*IE only*/
}
The underscore hack only seems to target IE6 and lower. The asterisk updates
the spacer float to work with IE7 as well, and it looks right to me even in
IE7 Standards now. ( Targeting various IE browsers,
http://www.ejeliot.com/blog/63 )
Jacob Wills
On Fri, Jan 22, 2010 at 10:45 AM, Bob Schellink <sa...@gmail.com> wrote:
> Ah that's good to know. Are you running in Standards Mode or Quirks mode?
> So far I've been doing my testing in Standards mode which might account for
> the strange IE7 behavior?
>
> kind regards
>
> bob
>
Re: Tree labels break when they get too long (IE)
Posted by Bob Schellink <sa...@gmail.com>.
Ah that's good to know. Are you running in Standards Mode or Quirks mode? So far I've been doing my
testing in Standards mode which might account for the strange IE7 behavior?
kind regards
bob
On 23/01/2010 02:30 AM, Jacob Wills wrote:
> Thanks, Bob! It looks like it works for me on both IE6 and IE7.
>
> Looking at the zoom property, it seems like it's a pretty useful way to
> fix a lot of IE-related display problems because it gives the element a
> 'hasLayout' property -- good to know. I'm not sure why it didn't work
> for your IE7 testing though.
>
> Jacob Wills
>
>
> On Fri, Jan 22, 2010 at 8:49 AM, Bob Schellink <sabob1@gmail.com
> <ma...@gmail.com>> wrote:
>
> Doing a little research, this bug is known as Holly Hack and can be
> fixed with the following snippet:
>
> .treestyle span,
> .treestyle a {
> zoom: 1;
> }
>
> From my testing this fixed it for IE6 but not IE7. So not a full
> solution yet.
>
> @Jacob can you add the snippet to tree.css and see if it helps.
>
> kind regards
>
> bob
>
>
>
> On 22/01/2010 06:54 PM, Bob Schellink wrote:
>
> Hi Jacob,
>
> Seems to be some CSS issue where the long text forces the
> floated span
> to the next line. Not sure how to fix the issue though. :( Will
> have to
> play around with different CSS settings.
>
> It does work in IE8, but that is besides the point.
>
> kind regards
>
> bob
>
Re: Tree labels break when they get too long (IE)
Posted by Jacob Wills <ja...@gmail.com>.
Thanks, Bob! It looks like it works for me on both IE6 and IE7.
Looking at the zoom property, it seems like it's a pretty useful way to fix
a lot of IE-related display problems because it gives the element a
'hasLayout' property -- good to know. I'm not sure why it didn't work for
your IE7 testing though.
Jacob Wills
On Fri, Jan 22, 2010 at 8:49 AM, Bob Schellink <sa...@gmail.com> wrote:
> Doing a little research, this bug is known as Holly Hack and can be fixed
> with the following snippet:
>
> .treestyle span,
> .treestyle a {
> zoom: 1;
> }
>
> From my testing this fixed it for IE6 but not IE7. So not a full solution
> yet.
>
> @Jacob can you add the snippet to tree.css and see if it helps.
>
> kind regards
>
> bob
>
>
>
> On 22/01/2010 06:54 PM, Bob Schellink wrote:
>
>> Hi Jacob,
>>
>> Seems to be some CSS issue where the long text forces the floated span
>> to the next line. Not sure how to fix the issue though. :( Will have to
>> play around with different CSS settings.
>>
>> It does work in IE8, but that is besides the point.
>>
>> kind regards
>>
>> bob
>>
>
Re: Tree labels break when they get too long (IE)
Posted by Bob Schellink <sa...@gmail.com>.
Doing a little research, this bug is known as Holly Hack and can be fixed with the following snippet:
.treestyle span,
.treestyle a {
zoom: 1;
}
From my testing this fixed it for IE6 but not IE7. So not a full solution yet.
@Jacob can you add the snippet to tree.css and see if it helps.
kind regards
bob
On 22/01/2010 06:54 PM, Bob Schellink wrote:
> Hi Jacob,
>
> Seems to be some CSS issue where the long text forces the floated span
> to the next line. Not sure how to fix the issue though. :( Will have to
> play around with different CSS settings.
>
> It does work in IE8, but that is besides the point.
>
> kind regards
>
> bob
>
> On 22/01/2010 08:22 AM, Jacob Wills wrote:
>> Hi,
>>
>> Some of the labels I've been using in my Tree are rather long and it has
>> been causing them to display oddly in various versions of Internet
>> Explorer. My project required changing the labels to make them plain
>> text and not clickable links, so the only way to expand the tree is to
>> use the +/- boxes on the side. I've attached a screenshot from IE6
>> showing the two types of display bugs. The only difference between the
>> two seems to be that the bottom one is the last node in its level.
>> However, while you can still expand the top folder by clicking where the
>> + box *should be* on the vertical line above the broken folder icon, in
>> the bottom example the box is actually embedded *behind* everything else
>> and is completely unclickable. Editing tree.css and expanding the width
>> of the "treestyle" class makes the top example go away, but even a
>> ridiculously large width won't fix the bottom example and I'd much
>> rather keep the width the same and just have things display properly. :)
>>
>> While the screenshot above is from IE6, if you try this in IE7 the
>> bottom example looks fine while the top example remains broken (I
>> haven't tested it in IE8). Firefox, of course, looks perfect. You can
>> test this out by copying the example code from the Click-extras Tree API
>> and replacing the labels with something longer. I also have my tree set
>> to be javascript-enabled using the session policy, but the display bugs
>> appear even without that. Does anyone have an idea on how to fix this?
>>
>> Thanks,
>>
>> Jacob Wills
>
>
Re: Tree labels break when they get too long (IE)
Posted by Bob Schellink <sa...@gmail.com>.
Hi Jacob,
Seems to be some CSS issue where the long text forces the floated span to the next line. Not sure
how to fix the issue though. :( Will have to play around with different CSS settings.
It does work in IE8, but that is besides the point.
kind regards
bob
On 22/01/2010 08:22 AM, Jacob Wills wrote:
> Hi,
>
> Some of the labels I've been using in my Tree are rather long and it has
> been causing them to display oddly in various versions of Internet
> Explorer. My project required changing the labels to make them plain
> text and not clickable links, so the only way to expand the tree is to
> use the +/- boxes on the side. I've attached a screenshot from IE6
> showing the two types of display bugs. The only difference between the
> two seems to be that the bottom one is the last node in its level.
> However, while you can still expand the top folder by clicking where the
> + box *should be* on the vertical line above the broken folder icon, in
> the bottom example the box is actually embedded *behind* everything else
> and is completely unclickable. Editing tree.css and expanding the width
> of the "treestyle" class makes the top example go away, but even a
> ridiculously large width won't fix the bottom example and I'd much
> rather keep the width the same and just have things display properly. :)
>
> While the screenshot above is from IE6, if you try this in IE7 the
> bottom example looks fine while the top example remains broken (I
> haven't tested it in IE8). Firefox, of course, looks perfect. You can
> test this out by copying the example code from the Click-extras Tree API
> and replacing the labels with something longer. I also have my tree set
> to be javascript-enabled using the session policy, but the display bugs
> appear even without that. Does anyone have an idea on how to fix this?
>
> Thanks,
>
> Jacob Wills