Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext User
    Join Date
    Jul 2010
    Posts
    11
    Vote Rating
    0
    darrenb is on a distinguished road

      0  

    Default [OPEN-395] Float Style Causes HTML to Fail on Button

    [OPEN-395] Float Style Causes HTML to Fail on Button


    Hi,
    I'm setting up a button...

    Code:
    var button = new Ext.Button(
    { ui: 'normal', 
    html: '<div style=\'float:left;\'>Director</div><div style=\'float:right;\'>></div>'
    });
    So, this creates a button with the text 'Director' to the left and '>' to the right.

    When I include a float in the div, it doesn't display the associated div's contents. Remove the left float and it shows 'Director', remove the right float and it shows the '>'. The odd thing is, according to Chrome's Element Inspector, that the text 'Director' appears in the DOM when the float is set.

    This issue happens with 0.9.5 and 0.9.6, but it works ok with 0.9.3 (I've not tried 0.9.4).

    Thanks,
    Darren.

  2. #2
    Sencha - GXT Dev Team BrendanC's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Vote Rating
    3
    BrendanC is on a distinguished road

      0  

    Default


    Thanks for the bug report.

  3. #3
    Sencha User davidkaneda's Avatar
    Join Date
    Jan 2010
    Location
    Bay Area, CA
    Posts
    147
    Vote Rating
    0
    davidkaneda is on a distinguished road

      0  

    Default


    Are you character encoding the > symbol? It could be screwing up your HTML... Are you still seeing the problem in .98? Thanks-

  4. #4
    Ext User
    Join Date
    Jul 2010
    Posts
    11
    Vote Rating
    0
    darrenb is on a distinguished road

      0  

    Default


    Hi,
    I've just upgraded to .98 and tried using the &gt encoding in place of the '>' and I still get the same issue whereby including the left float in the first div makes the word 'director' disappear and if i include the right float in the second div the '>' or &gt disappear.

    Thanks,
    Darren.

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Use CSS.

    Drop this into examples/<anywhere>

    It renders a full-width button layed out as you want.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="../../resources/css/sencha-touch.css" type="text/css">
    <script type="text/javascript" src="../../ext-touch.js"></script>
    <style type="text/css">
    .x-button.arrow-button .x-button-label {
        text-align: left;
    }
    .x-button.arrow-button:after {
        content: '>';
    }
    </style>
    <script type="text/javascript">
    Ext.setup({
        onReady: function() {
            Ext.getBody().update('');
            new Ext.Button({
                cls: 'arrow-button',
                text: 'Director',
                renderTo: document.body
            });
        }
    });
    </script>
    </head>
    <body></body>
    </html>

Similar Threads

  1. [2.0.1][OPEN] setStyle with float
    By mattbennett in forum Ext 2.x: Bugs
    Replies: 8
    Last Post: 6 Apr 2011, 11:35 AM
  2. [SOLVED]config style : 'float:left;' for Textarea doesn't work..
    By yagi in forum Ext 2.x: Help & Discussion
    Replies: 10
    Last Post: 28 Jul 2010, 6:48 PM
  3. [FIXED-395][3.1] Removed TreeNode can't be added again
    By Supergibbs in forum Ext 3.x: Bugs
    Replies: 7
    Last Post: 23 Dec 2009, 9:03 AM
  4. Fail to open the help documents on local
    By jacky.qj in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 15 Nov 2007, 9:45 PM

Thread Participants: 3