jquery dialog button not showing until hovering over it ie7

Question

As the title suggests I'm having some IE7 problems. the problem I have right now is that my dialog doesn't work correctly. Well, the dialog itself works, but the button on it doesn't show up. that is, until I hover on where it is actually placed.

Here's the jquery code

$('#sessionTimeout-dialog').dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            closeOnEscape: false,
            open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); },
            buttons: [{

                // Button one - closes dialog and makes call to keep-alive URL
                text: o.stayConnected,
                "class": "confirmSession",
                click: function () {
                    $(this).dialog('close');
                    $('#sessionTimeout-dialog div div button').addClass('confirm');

                    $.ajax({
                        type: 'POST',
                        url: o.keepAliveUrl
                    });
                    $('.formOverlay').find('*').attr('disabled', false);

                    // Stop redirect timer and restart warning timer
                    controlRedirTimer('stop');
                    controlDialogTimer('start');
                }
            }]
        });

As this does work correctly with IE8 and up, FF and Chrome, I'm starting to think this is an issue that IE7 has with the control generated by the dialog.

So just to sumarize again:

IE8+ work

IE7 has the following behaviour:

with class = "confirmSession"

page loads
no javascript errors
dialog shows up without button
I hover over the spot where the button should be
The button magically shows up with the correct css style.

without class = "confirmSession"

page loads
no javascript errors
dialog shows up with button (no css since it doesn't have a css class)

As I'm baffled by this behaviour, I hope we can work it out together.

EDIT:

As requested: my css style for the confirmSession class; It's taken from out .less file.

.confirmSession {
            width:45%; font-size: 1em; background: #4c8cb4 !IMPORTANT; border: #427594 1px solid; padding: 0px;  color: #fff; text-decoration: none; .box-sizing(border-box); white-space: normal; cursor: pointer; float: none; font-weight: 400; margin: 10px 2%; display: block; float: left;
            -webkit-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.4), 2px 2px 3px -2px rgba(0, 0, 0, 0.4);
            -moz-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.4),2px 2px 3px -2px rgba(0, 0, 0, 0.4);
            box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.4), 2px 2px 3px -2px rgba(0, 0, 0, 0.4);
            text-align: center; position: absolute; bottom: 1em; left: 10px; right: 10px; 
        }

IE7. In IE8+, FF and Chrome it works without any problems at all. — whodares, Mar 18 '13 at 10:39
remove all the css properties and then try to add one by one.Then we can find out the problem — PSR, Mar 18 '13 at 10:41
It appears that position: absolute; on my last line is breaking it. Removing that makes my button go crazy with width and positioning, but it does show up on load. — whodares, Mar 18 '13 at 10:48
see here http://stackoverflow.com/questions/5100998/problem-with-position-absolute-in-ie7-div-moves-10px-to-the-right — PSR, Mar 18 '13 at 10:50
Thanks to your help I was able to find my problem. I have removed position: absolute; bottom: 1em; left: 10px; right: 10px; and instead did $('.ui-dialog-buttonset').css("float", "none"); in my jquery script. This worked so far. Do hope I won't be using any more dialogs that need a right float though. — whodares, Mar 18 '13 at 11:00

PSR · Accepted Answer · 2013-03-18T11:05:44.970

2

Whatever the styles you are used in confirmSession class are overriden by the jQuery styles.

So use !important before your styles.

Remove all the css properties and then try to add one by one.Then we can find out the problem

edited Mar 18 '13 at 11:05

answered Mar 18 '13 at 10:34

PSR

39,804
41
111
151

I have added my css to the opening post. I tried !important on my background, but that didn't work. – whodares Mar 18 '13 at 10:38
Gave you an upvote here because I was able to figure it out thanks to you. For those reading: my problem was with position: absolute. I have removed position: absolute; bottom: 1em; left: 10px; right: 10px; and instead did $('.ui-dialog-buttonset').css("float", "none"); in my jquery script. – whodares Mar 18 '13 at 11:02

jquery dialog button not showing until hovering over it ie7

1 Answers1