Results 1 to 4 of 4

Thread: Form focus override not working for some field types

  1. #1
    Ext JS Premium Member
    Join Date
    Aug 2010
    Posts
    63
    Answers
    1

    Question Answered: Form focus override not working for some field types

    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

    Code:
    <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
    Code:
    .x-form-focus {
      box-shadow : 0px 0px 8px #6ea2de;
    }
    main.js
    Code:
    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

  2. Seems like IE9 didn't quite implement the box-shadow correctly. Here's a few links that discuss a solutions:
    http://stackoverflow.com/questions/5...firefox-chrome
    http://css-tricks.com/snippets/css/css-box-shadow/

  3. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Seems like IE9 didn't quite implement the box-shadow correctly. Here's a few links that discuss a solutions:
    http://stackoverflow.com/questions/5...firefox-chrome
    http://css-tricks.com/snippets/css/css-box-shadow/

  4. #3
    Ext JS Premium Member
    Join Date
    Aug 2010
    Posts
    63
    Answers
    1

    Default

    Awesome find, the border-collapse trick seems to have done it for me. Thanks very much!!

  5. #4

    Default

    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •