New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

behavior applied to parent element prevents scrolling in child divs in IE6/7 #190

Closed
KyleAlanDavis opened this Issue Dec 16, 2011 · 19 comments

Comments

Projects
None yet
9 participants
@KyleAlanDavis

KyleAlanDavis commented Dec 16, 2011

I have a child div with defined height so that it scrolls vertically contained in a parent div that has rounded corners or dropshadow applied through PIE. In IE6 or IE7 the scroll bar flickers and you can't grab the bar to move it up or down.

I have found others with this issue at http://css3pie.com/forum/viewtopic.php?f=3&t=1290

@leopic

This comment has been minimized.

Show comment
Hide comment
@leopic

leopic Dec 28, 2011

Same issue here, not sure about IE6, we don't support it, but can confirm this happens in IE7.

leopic commented Dec 28, 2011

Same issue here, not sure about IE6, we don't support it, but can confirm this happens in IE7.

@WilliamVercken

This comment has been minimized.

Show comment
Hide comment
@WilliamVercken

WilliamVercken Jan 26, 2012

Same issue here for IE7 !
it seems that there was not this problem in the beta 4

WilliamVercken commented Jan 26, 2012

Same issue here for IE7 !
it seems that there was not this problem in the beta 4

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Feb 17, 2012

Same issue here for IE7. Specifically, these are the problems:

  1. User cannot click on the scrollbar handle to drag it down. User CAN click in the empty part of a scroll bar to shift down multiple rows at a time.
  2. Clicking and holding on the up/down arrows only moves the content down one notch. Normal IE behavior is to keep scrolling as long as the mouse button is held down.

ghost commented Feb 17, 2012

Same issue here for IE7. Specifically, these are the problems:

  1. User cannot click on the scrollbar handle to drag it down. User CAN click in the empty part of a scroll bar to shift down multiple rows at a time.
  2. Clicking and holding on the up/down arrows only moves the content down one notch. Normal IE behavior is to keep scrolling as long as the mouse button is held down.
@lojjic

This comment has been minimized.

Show comment
Hide comment
@lojjic
Owner

lojjic commented Feb 27, 2012

Another report, with testcase: http://css3pie.com/forum/viewtopic.php?f=3&t=1562

@q13

This comment has been minimized.

Show comment
Hide comment
@q13

q13 Feb 29, 2012

I meet the same problem in IE7 with beta5

q13 commented Feb 29, 2012

I meet the same problem in IE7 with beta5

@nwilcox

This comment has been minimized.

Show comment
Hide comment
@nwilcox

nwilcox Mar 26, 2012

I'm also experiencing this bug in IE8 and IE9 as described by :kkalitowski:

PIE is a wonderful plugin but this bug will have a significant impact on whether I can use it in my site as I had hope.

Is there an update on this?

nwilcox commented Mar 26, 2012

I'm also experiencing this bug in IE8 and IE9 as described by :kkalitowski:

PIE is a wonderful plugin but this bug will have a significant impact on whether I can use it in my site as I had hope.

Is there an update on this?

@lojjic

This comment has been minimized.

Show comment
Hide comment
@lojjic

lojjic Mar 26, 2012

Owner

@nwilcox I hope to look into this issue soon, it's on my short list for fixing for the 1.0 release.

Owner

lojjic commented Mar 26, 2012

@nwilcox I hope to look into this issue soon, it's on my short list for fixing for the 1.0 release.

@leopic

This comment has been minimized.

Show comment
Hide comment
@leopic

leopic Mar 27, 2012

that sounds like great news, can you post the hash over here so I can lend a hand testing?

leopic commented Mar 27, 2012

that sounds like great news, can you post the hash over here so I can lend a hand testing?

@lojjic

This comment has been minimized.

Show comment
Hide comment
@lojjic

lojjic Mar 28, 2012

Owner

From user Balasubramanian in the forums, so I don't lose it:

"1. I think the issue is due to updating the class name on click of the container
addListener( el, 'onmousedown', mousePressed );
the movement I remove the listener it works
2. or may be the delay timmer before adding the classname. can we try sing the setTimeout to add the classname. instd of the while loop.
"

Owner

lojjic commented Mar 28, 2012

From user Balasubramanian in the forums, so I don't lose it:

"1. I think the issue is due to updating the class name on click of the container
addListener( el, 'onmousedown', mousePressed );
the movement I remove the listener it works
2. or may be the delay timmer before adding the classname. can we try sing the setTimeout to add the classname. instd of the while loop.
"

lojjic added a commit that referenced this issue Mar 28, 2012

Add -pie-track-active:false flag to prevent toggling the active class…
… name on mousedown/up on a case by case basis. This can be used to avoid the IE6-7 bug where you couldn't drag the scrollbar of a descendant. Fixes issue #190.

lojjic added a commit that referenced this issue Mar 28, 2012

Add -pie-track-active:false flag to prevent toggling the active class…
… name on mousedown/up on a case by case basis. This can be used to avoid the IE6-7 bug where you couldn't drag the scrollbar of a descendant. Fixes issue #190.
@lojjic

This comment has been minimized.

Show comment
Hide comment
@lojjic

lojjic Mar 28, 2012

Owner

@leopic and others - see the commit above.

The issue is that in order to support :active styling, PIE adds a mousedown listener after which it adds a "pie_active" class to the element, which triggers a style update. It seems that the act of adding this class cancels the drag operation on the descendant's scrollbar.

Since I want to maintain :active styling support, I've opted to add a new custom CSS flag you can set:

-pie-track-active: false;

If you set this then the listener will not be attached, and the scrollbars will work as expected.

Please test this if you are able to do a build. It's been added to both the 1.x branch and master.

Owner

lojjic commented Mar 28, 2012

@leopic and others - see the commit above.

The issue is that in order to support :active styling, PIE adds a mousedown listener after which it adds a "pie_active" class to the element, which triggers a style update. It seems that the act of adding this class cancels the drag operation on the descendant's scrollbar.

Since I want to maintain :active styling support, I've opted to add a new custom CSS flag you can set:

-pie-track-active: false;

If you set this then the listener will not be attached, and the scrollbars will work as expected.

Please test this if you are able to do a build. It's been added to both the 1.x branch and master.

@balu980

This comment has been minimized.

Show comment
Hide comment
@balu980

balu980 Mar 29, 2012

that is cool and it will work.

thx for addressing this issue.

balu980 commented Mar 29, 2012

that is cool and it will work.

thx for addressing this issue.

@leopic

This comment has been minimized.

Show comment
Hide comment
@leopic

leopic Mar 29, 2012

The fix works perfectly in IE7, solved a long outstanding issue in our project.

Thank you Jason.

leopic commented Mar 29, 2012

The fix works perfectly in IE7, solved a long outstanding issue in our project.

Thank you Jason.

@Igor10k

This comment has been minimized.

Show comment
Hide comment
@Igor10k

Igor10k May 2, 2012

Works in IE7 for me too! Finally nailed it! Thanks

Igor10k commented May 2, 2012

Works in IE7 for me too! Finally nailed it! Thanks

@bojall

This comment has been minimized.

Show comment
Hide comment
@bojall

bojall May 3, 2012

I've added the fix but am still experiencing the issue in IE7. Can you check and make sure I'm doing it correctly?

The "vinDynamicInfoPanel" has rounded corners and a drop shadow. "vehicleEvents" within it will have a vertical scroll once the max-height is reach. Everything looks and works good, except for not being able to drag the vert scroll bar .

.vinDynamicInfoPanel
{
width: 350px;
background: #fff;
margin-bottom: 10px;
padding-bottom: 7px;
border: 1px solid #555;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 2px 2px 3px #BBB;
-webkit-box-shadow: 2px 2px 3px #BBB;
box-shadow: 2px 2px 3px #BBB;
-pie-track-active: false;
behavior: url(../script/PIE.htc);
}
.vehicleEvents
{
max-height:300px;
width:100%;
overflow:auto;
position:relative;
}

     <asp:Panel ID="panVehicleEvents" runat="server" class="vinDynamicInfoPanel">
        <div class="header">
            <div class="left">
                &nbsp;</div>
            <div class="middle">
                <asp:Label ID="vml_lblVehicleEvents" runat="server">Vehicle Events</asp:Label></div>
            <div class="right">
                &nbsp;</div>
        </div>
        <div class="vehicleEvents">
            <asp:Repeater runat="server" ID="rptrVehicleEvents">
                <ItemTemplate>
                    <div class="row ">
                        <div class="id">
                            <asp:Label ID="Label1" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"fdVehicleEventID")%>'></asp:Label>
                        </div>
                        <div class="event">
                            <asp:Label ID="Label2" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"fdEvent")%>'></asp:Label>
                        </div>
                        <div class="datetime">
                            <asp:Label ID="Label4" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"fdWorkDate")%>'></asp:Label>
                        </div>
                    </div>
                </ItemTemplate>
                <AlternatingItemTemplate>
                    <div class="row alt">
                        <div class="id">
                            <asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"fdVehicleEventID")%>'></asp:Label>
                        </div>
                        <div class="event">
                            <asp:Label ID="Label2" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"fdEvent")%>'></asp:Label>
                        </div>
                        <div class="datetime">
                            <asp:Label ID="Label4" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"fdWorkDate")%>'></asp:Label>
                        </div>
                    </div>
                </AlternatingItemTemplate>
            </asp:Repeater>
        </div>
    </asp:Panel>

bojall commented May 3, 2012

I've added the fix but am still experiencing the issue in IE7. Can you check and make sure I'm doing it correctly?

The "vinDynamicInfoPanel" has rounded corners and a drop shadow. "vehicleEvents" within it will have a vertical scroll once the max-height is reach. Everything looks and works good, except for not being able to drag the vert scroll bar .

.vinDynamicInfoPanel
{
width: 350px;
background: #fff;
margin-bottom: 10px;
padding-bottom: 7px;
border: 1px solid #555;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 2px 2px 3px #BBB;
-webkit-box-shadow: 2px 2px 3px #BBB;
box-shadow: 2px 2px 3px #BBB;
-pie-track-active: false;
behavior: url(../script/PIE.htc);
}
.vehicleEvents
{
max-height:300px;
width:100%;
overflow:auto;
position:relative;
}

     <asp:Panel ID="panVehicleEvents" runat="server" class="vinDynamicInfoPanel">
        <div class="header">
            <div class="left">
                &nbsp;</div>
            <div class="middle">
                <asp:Label ID="vml_lblVehicleEvents" runat="server">Vehicle Events</asp:Label></div>
            <div class="right">
                &nbsp;</div>
        </div>
        <div class="vehicleEvents">
            <asp:Repeater runat="server" ID="rptrVehicleEvents">
                <ItemTemplate>
                    <div class="row ">
                        <div class="id">
                            <asp:Label ID="Label1" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"fdVehicleEventID")%>'></asp:Label>
                        </div>
                        <div class="event">
                            <asp:Label ID="Label2" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"fdEvent")%>'></asp:Label>
                        </div>
                        <div class="datetime">
                            <asp:Label ID="Label4" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"fdWorkDate")%>'></asp:Label>
                        </div>
                    </div>
                </ItemTemplate>
                <AlternatingItemTemplate>
                    <div class="row alt">
                        <div class="id">
                            <asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"fdVehicleEventID")%>'></asp:Label>
                        </div>
                        <div class="event">
                            <asp:Label ID="Label2" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"fdEvent")%>'></asp:Label>
                        </div>
                        <div class="datetime">
                            <asp:Label ID="Label4" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"fdWorkDate")%>'></asp:Label>
                        </div>
                    </div>
                </AlternatingItemTemplate>
            </asp:Repeater>
        </div>
    </asp:Panel>
@lojjic

This comment has been minimized.

Show comment
Hide comment
@lojjic

lojjic May 3, 2012

Owner

@bojall Are you using a custom build from the latest 1.x code? This feature does not exist yet in the released version.

Owner

lojjic commented May 3, 2012

@bojall Are you using a custom build from the latest 1.x code? This feature does not exist yet in the released version.

@bojall

This comment has been minimized.

Show comment
Hide comment
@bojall

bojall May 3, 2012

I'm not. How do I go about doing that?

bojall commented May 3, 2012

I'm not. How do I go about doing that?

@Igor10k

This comment has been minimized.

Show comment
Hide comment
@lojjic

This comment has been minimized.

Show comment
Hide comment
@lojjic

lojjic May 16, 2012

Owner

This is in the 1.0.0 release; closing.

Owner

lojjic commented May 16, 2012

This is in the 1.0.0 release; closing.

@lojjic lojjic closed this May 16, 2012

@leopic

This comment has been minimized.

Show comment
Hide comment
@leopic

leopic May 16, 2012

yayyy! 1.0, congrats and thank you for your work Jason :)

leopic commented May 16, 2012

yayyy! 1.0, congrats and thank you for your work Jason :)

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