1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    18
    Answers
    1
    Vote Rating
    0
    Cesium is on a distinguished road

      0  

    Default Unanswered: How do I make buttons "float"?

    Unanswered: How do I make buttons "float"?


    Hi, I want to be able to set buttons to a specific width and then have them 'float', like you can make html objects do with the css 'float' property. Basically, I want to be able to generate an arbitrarily long list of buttons, and have them all fit themselves into a certain area of the screen. I tried to make the button float with the 'style' config option, but I'm not even sure this did anything at all. What's the best way to 'float' buttons?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Answers
    3540
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    What widget are the buttons children of and if you are specifying a layout what is it?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    18
    Answers
    1
    Vote Rating
    0
    Cesium is on a distinguished road

      0  

    Default


    The buttons are in 'cards' of the card layout with no layout specified for each card. I don't have the code with me right now but I'm pretty sure it's organized like this:


    Code:
    var panel =Ext.create('Ext.Panel',{    
        layout:'card',    
        items:[
            {
                 html:"First Item",
                 items: [
                     {
                          xtype: "button",
                          text : "derp"
                     },
                     {
                          xtype: "button",
                          text : "derp2"
                     }
                 ]
             }
        ]
    });


  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Answers
    3540
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Ok, you can still use the CSS float on the buttons since you are using the default layout. I would give the buttons a cls config value and use that to mess with the button.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    18
    Answers
    1
    Vote Rating
    0
    Cesium is on a distinguished road

      0  

    Default


    Okay, can you give me a verbatim example of the proper code I would use here? Because I thought I was applying CSS float property, but nothing appears to be happening:

    Code:
                var panel = Ext.create('Ext.Container', {
                    fullscreen: true,
                    layout: 'card',
                    items: [ // begin Container items
                        { // begin main screen
                            xtype : 'panel',
                            html  : 'procfam info',
                            scrollable: {
                                direction: 'vertical'
                                },
                            items: [
                                {
                                    xtype: 'button',
                                    text : 'test',
                                    width: '100px',
                                    style: {
                                        float:'right'
                                        }
                                    },
                                {
                                    xtype: 'button',
                                    text : 'test',
                                    width: '100px',
                                    style: {
                                        float: 'left'
                                        }
                                    },
                                {
                                    xtype: 'button',
                                    text : 'test',
                                    width: '100px',
                                    style: {
                                        float: 'left'
                                        }
                                    }
     // leaving off all the terminating delimiters, you get the point
    Thanks.

  6. #6
    Sencha User
    Join Date
    Feb 2012
    Location
    Madagascar
    Posts
    24
    Vote Rating
    0
    Fayt is on a distinguished road

      0  

    Default


    add this to your code

    Code:
     layout: 'hbox',

  7. #7
    Sencha User
    Join Date
    Mar 2012
    Posts
    18
    Answers
    1
    Vote Rating
    0
    Cesium is on a distinguished road

      0  

    Default


    @fayt: this doesn't appear to help. Now the buttons take up all available vertical space unless I explicitly specify a height, and they still don't wrap around when they take up more room than a single row can provide. I see no evidence that the float property is doing anything at all.

    Code:
                var panel = Ext.create('Ext.Container', {
                    fullscreen: true,
                    layout: 'card',
                    items: [ // begin Container items
                        { // begin main screen
                            xtype : 'panel',
                            layout: 'hbox',
                            scrollable: {
                                direction: 'vertical'
                                },
                            items: [
                                {
                                    xtype: 'button',
                                    text : 'test',
                                    height: '25px',
                                    style: {
                                        float: 'left'
                                        }
                                    },
                                {
                                    xtype: 'button',
                                    text : 'test',
                                    height: '25px',
                                    style: {
                                        float: 'left'
                                        }
                                   },
                                {
                                    xtype: 'button',
                                    text : 'test',
                                    height: '25px',
                                    style: {
                                        float: 'left'
                                        }
                                    }
     // leaving off all the terminating delimiters, you get the point

Thread Participants: 2

Tags for this Thread