PDA

View Full Version : Form focus override not working for some field types



frank.zammetti
4 Aug 2014, 10:50 AM
Hi,

I've got an odd situation here with ExtJS 4.1.1... I'm trying to put a relatively simple box shadow effect around all my form fields but I've been having a hell of a time getting it to work in IE (surprise!)... I'm using IE9 and I've got it boiled down to the following simple code that demonstrates the problem... I've included everything so you have a complete, working example if you want to try it...

index.htm

<html>
<head>

<meta http-equiv="X-UA-Compatible" content="IE=9">

<link rel="stylesheet" type="text/css"
href="extjs/resources/css/ext-all-debug.css">
<script type="text/javascript"
src="extjs/ext-all-debug-w-comments.js"></script>

<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="main.js"></script>

</head>
<body></body>
</html>


styles.css


.x-form-focus {
box-shadow : 0px 0px 8px #6ea2de;
}


main.js


Ext.onReady(function() {

new Ext.Viewport({
items : [
{ xtype : "form", border : false, bodyPadding : 20,
defaults : { padding : 10 },
items : [
{ xtype : "textfield", fieldLabel : "textfield" },
{ xtype : "combobox", fieldLabel : "combobox" }
]
}
]
});

});


Now, first things first: this works fine in Firefox. Focus on each field and you get a blue "glow" around it as expected. In IE9 though, what I'm seeing is it works just fine on the ComboBox, but not the TextField. What's more, it seems that it works on every form field EXCEPT TextField and TextArea. I'm really scratching my head over this. Anyone have any ideas?

Thanks,
Frank

Gary Schlosberg
5 Aug 2014, 2:42 PM
Seems like IE9 didn't quite implement the box-shadow correctly. Here's a few links that discuss a solutions:
http://stackoverflow.com/questions/5617455/box-shadow-on-ie9-doesnt-render-using-correct-css-works-on-firefox-chrome
http://css-tricks.com/snippets/css/css-box-shadow/

frank.zammetti
5 Aug 2014, 8:41 PM
Awesome find, the border-collapse trick seems to have done it for me. Thanks very much!!

darrenbang
5 Sep 2014, 3:18 AM
All side shadow..
.allSides
{
width:350px;height:200px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 0 0 10px rgba(0,0,0,0.6);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
}

Full Source...http://www.corelangs.com/css/box/shadow.html

Darren