Hi all,
I have found this issue in Internet Explorer when highlighting plain looking buttons. It looks like the highlight around the button does not get any wider when you add horizontal padding.
The issue only occurs when the button's width is less than the width of the text + padding or if "autoFit" is true.
I've included sample html that demonstrates the issue and some screenshots. If there is a fix in place or something that can be done to prevent this it would be greatly appreciated.
[HTML]<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.button,
.buttonOver,
.buttonFocused,
.buttonFocusedOver,
.buttonDown,
.buttonFocusedDown,
.buttonSelected,
.buttonSelectedFocused,
.buttonSelectedDown,
.buttonSelectedFocusedDown,
.buttonSelectedOver,
.buttonSelectedFocusedOver,
.buttonDisabled,
.buttonSelectedDisabled {
padding:10px;
}
</style>
<script src="%ISC_DIR%/ISC_Core.js"></script><!-- replace %ISC_DIR% with the location of files -->
<script src="%ISC_DIR%/ISC_Foundation.js"></script>
</head>
<body>
<script type="text/javascript">
isc.Button.create({
title: "title",
viewName: "name",
height: 19,
autoFit: true,
overflow: 'visible'
});
</script>
</body>
</html>[/HTML]
Button without padding in IE:
Button with padding in IE:
^ This is the problem
Button without padding in chrome:
Button with padding in chrome:
^ This is the expected behaviour
Browser:
IE only
SC Version:
v9.1p_2016-04-15/Pro Development Only
Thanks,
Connor
I have found this issue in Internet Explorer when highlighting plain looking buttons. It looks like the highlight around the button does not get any wider when you add horizontal padding.
The issue only occurs when the button's width is less than the width of the text + padding or if "autoFit" is true.
I've included sample html that demonstrates the issue and some screenshots. If there is a fix in place or something that can be done to prevent this it would be greatly appreciated.
[HTML]<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.button,
.buttonOver,
.buttonFocused,
.buttonFocusedOver,
.buttonDown,
.buttonFocusedDown,
.buttonSelected,
.buttonSelectedFocused,
.buttonSelectedDown,
.buttonSelectedFocusedDown,
.buttonSelectedOver,
.buttonSelectedFocusedOver,
.buttonDisabled,
.buttonSelectedDisabled {
padding:10px;
}
</style>
<script src="%ISC_DIR%/ISC_Core.js"></script><!-- replace %ISC_DIR% with the location of files -->
<script src="%ISC_DIR%/ISC_Foundation.js"></script>
</head>
<body>
<script type="text/javascript">
isc.Button.create({
title: "title",
viewName: "name",
height: 19,
autoFit: true,
overflow: 'visible'
});
</script>
</body>
</html>[/HTML]
Button without padding in IE:
Button with padding in IE:
^ This is the problem
Button without padding in chrome:
Button with padding in chrome:
^ This is the expected behaviour
Browser:
IE only
SC Version:
v9.1p_2016-04-15/Pro Development Only
Thanks,
Connor
Comment