Collapsible Heading gets truncated from beginning of string #2653

Closed
aaronmcadam opened this Issue Oct 10, 2011 · 9 comments

Comments

Projects
None yet
6 participants
@aaronmcadam

As above, seems to effect Firefox 7.0.1. The addition of position:relative, and z-index on the ui-btn-text class makes the string truncate from the beginning.

it is fine in RC1, the bug effects http://code.jquery.com/mobile/latest/jquery.mobile.js and http://jquerymobile.com/test/

Link to a jsfiddle: http://jsfiddle.net/QvhhD/

@ghost ghost assigned gseguin Oct 10, 2011

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Oct 10, 2011

Contributor

That is so odd. I wonder if this is just a bug with Firefox's new ellipsis feature? I can't think of any reason why it would truncate from the start.

Contributor

toddparker commented Oct 10, 2011

That is so odd. I wonder if this is just a bug with Firefox's new ellipsis feature? I can't think of any reason why it would truncate from the start.

@agcolom

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Oct 10, 2011

Member

I've just had a look and made the heading very very long (in the fiddle) and I get the expected behaviour i.e. the heading and ... just before the edge if I make it v long (testing on iPad 2 and FF 3.6.20 for Mac). If the Heading is not too long, it displays in full. However, in Firefox 7.0.1 Windows XP, I get what @aaronmcadam describes: the heading gets truncated from the beginning (...ading 1 and ...ading2), even if the Heading has plenty of space to display in full.

Member

agcolom commented Oct 10, 2011

I've just had a look and made the heading very very long (in the fiddle) and I get the expected behaviour i.e. the heading and ... just before the edge if I make it v long (testing on iPad 2 and FF 3.6.20 for Mac). If the Heading is not too long, it displays in full. However, in Firefox 7.0.1 Windows XP, I get what @aaronmcadam describes: the heading gets truncated from the beginning (...ading 1 and ...ading2), even if the Heading has plenty of space to display in full.

@aaronmcadam

This comment has been minimized.

Show comment
Hide comment
@aaronmcadam

aaronmcadam Oct 10, 2011

@toddparker yeah, that was wilto's first suggestion - that it might have something to do with Firefox's new ellipsis feature. What's extra odd is that it's seemingly got nothing to do with the length of the string either.

@toddparker yeah, that was wilto's first suggestion - that it might have something to do with Firefox's new ellipsis feature. What's extra odd is that it's seemingly got nothing to do with the length of the string either.

@MauriceG

This comment has been minimized.

Show comment
Hide comment
@MauriceG

MauriceG Oct 10, 2011

Contributor

The span with the class ui-collapsible-heading-status inside the collapsible header, which left style is set to -9999px raise this issue.

Contributor

MauriceG commented Oct 10, 2011

The span with the class ui-collapsible-heading-status inside the collapsible header, which left style is set to -9999px raise this issue.

@Wilto

This comment has been minimized.

Show comment
Hide comment
@Wilto

Wilto Oct 10, 2011

Contributor

Great stuff, Maurice! This seems to do the trick.

It kind of makes sense, now that I dig into it—I couldn’t figure out why the visible text would be triggering that issue, without any indent or anything attached. But, as overflow: ellipsis is applied to the parent container, hiding the invisible text off to the left triggered the overflow. The ellipsis then shows up on top of the visible text, making it look as though it were being truncated. The position: fixed; removes it from the context of the parent, and problem: solved. Thanks, guys!

Contributor

Wilto commented Oct 10, 2011

Great stuff, Maurice! This seems to do the trick.

It kind of makes sense, now that I dig into it—I couldn’t figure out why the visible text would be triggering that issue, without any indent or anything attached. But, as overflow: ellipsis is applied to the parent container, hiding the invisible text off to the left triggered the overflow. The ellipsis then shows up on top of the visible text, making it look as though it were being truncated. The position: fixed; removes it from the context of the parent, and problem: solved. Thanks, guys!

@aaronmcadam

This comment has been minimized.

Show comment
Hide comment
@aaronmcadam

aaronmcadam Oct 10, 2011

Awesome, will this be pushed in RC3 Wilto, too late for RC2 I take it?

Awesome, will this be pushed in RC3 Wilto, too late for RC2 I take it?

gseguin added a commit that referenced this issue Oct 10, 2011

Merge pull request #2662 from MauriceG/patch-7
Fix for #2653 - Firefox 7.0.1 - Collapsible heading gets truncated beginn
@gseguin

This comment has been minimized.

Show comment
Hide comment
@gseguin

gseguin Oct 10, 2011

Member

I merged pull request #2662. Thank you @MauticeG.

Member

gseguin commented Oct 10, 2011

I merged pull request #2662. Thank you @MauticeG.

@gseguin gseguin closed this Oct 10, 2011

@MauriceG

This comment has been minimized.

Show comment
Hide comment
@MauriceG

MauriceG Oct 10, 2011

Contributor

@gseguin No, i've to say: Thank you!

Why FF 7.0.1 is the only browser that's raising this issue?
A position of absolute says, the element stays above the others and do not affect other elements.
But, its position is relative to the borders of the parent, if the parent has a positioning too.
"Our" parent is the header of the collapsible and it is positioned relative.
So the "hidden" collapsible-heading-status-span is -9999px left inside its parent span,
could not break out of that borders and FF 7.0.1 seems to be the only one that recognizes that.

Contributor

MauriceG commented Oct 10, 2011

@gseguin No, i've to say: Thank you!

Why FF 7.0.1 is the only browser that's raising this issue?
A position of absolute says, the element stays above the others and do not affect other elements.
But, its position is relative to the borders of the parent, if the parent has a positioning too.
"Our" parent is the header of the collapsible and it is positioned relative.
So the "hidden" collapsible-heading-status-span is -9999px left inside its parent span,
could not break out of that borders and FF 7.0.1 seems to be the only one that recognizes that.

@Wilto

This comment has been minimized.

Show comment
Hide comment
@Wilto

Wilto Oct 11, 2011

Contributor

@MauriceG text-overflow: ellipsis; is altogether new to Firefox 7. It seems as though their implementation tacks on an ellipsis whenever it finds text beyond the edges of the container—including left: -9999px. All the other browsers are fine with the position: absolute treatment, but the position: fixed shouldn’t change things anywhere else.

Contributor

Wilto commented Oct 11, 2011

@MauriceG text-overflow: ellipsis; is altogether new to Firefox 7. It seems as though their implementation tacks on an ellipsis whenever it finds text beyond the edges of the container—including left: -9999px. All the other browsers are fine with the position: absolute treatment, but the position: fixed shouldn’t change things anywhere else.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment