1. #1
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    108
    Vote Rating
    1
    paulh1971 is on a distinguished road

      0  

    Default Forcing List to fit screen

    Forcing List to fit screen


    I have list where the itemTpl is made up of divs. The width is set so all elements in the itemTpl layout perfectly. I have made the width larger than the width of the screen with the thought that it will shrink to fit the width of different screens so that it doesn't end short on some devices. Unfortunately it is not shrinking; the width goes beyond the right edge of the screen. Is there a way to force it to shrink to fit whatever device it is on? I know this framework is different than desktop sites, but sites that are setup at 1024px or more shrink to fit mobile device screens. So, I figure there has got to be a way to make it happen.

    I have searched all over the forums but have not found a solution. Any solution someone can provide for this would be greatly appreciated!

    Thanks,
    Paul

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,074
    Vote Rating
    854
    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


    Use percentage for width. If the list is set with fullscreen to true or under a layout to manage it's size then width : 100% will help a lot.
    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 Premium Member
    Join Date
    Feb 2012
    Posts
    108
    Vote Rating
    1
    paulh1971 is on a distinguished road

      0  

    Default


    Setting a percentage seems to be ignored. I have researched this more and have tried many different things to no avail. Do you have a working example of this? Thanks!

  4. #4
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    108
    Vote Rating
    1
    paulh1971 is on a distinguished road

      0  

    Default


    Hello, anyone have an example on this? I have been searching the forums and trying things, and I am wasting a ton of time. Any help would be greatly appreciated.

  5. #5
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    108
    Vote Rating
    1
    paulh1971 is on a distinguished road

      0  

    Default


    Hi lmn40227,

    Thanks for you response. I tried your suggestion and unfortunately it did not work. Seems like it should be a simple solution.

    Thanks again,
    Paul

  6. #6
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    108
    Vote Rating
    1
    paulh1971 is on a distinguished road

      0  

    Default


    With much trial and error and a headache : ), I still haven't figured this out.

    I am showing an example of what my itemTPL looks like rendered and the code for it, so it makes more sense of what I am trying to do. I would like for this to display exactly like I have it whether it is on an andriod or iPhone with different width screens. So I would like for it to resize to the width of the screen, instead of staying the size that it is and getting cut off on the right side. It is in a container with fullscreen, and I tried various layouts. Is what I am trying to do possible, or do I have to size everything down to a certain size and if a screen is wider then there is just black space to the right? Thanks to anyone who takes the time to look at this? Let me know if I need to provide anymore information.

    ItemTPLWidthExample.jpg

    Code:
    itemTpl: [
                '<div style="width: 480px; height: 142px; padding: 15px 10px 15px 15px; background-color: #1d1d1d; border: solid 1px #2a2a2a;">',
                '<div style="float: left; width: 132px; height: 109px;"><img src="http://beta.fabulousfox.com/images/ShowLogos/{Id}.jpg" alt="{EventName}" width="132" height="109" alt="" /></div>',
                '<div style="float: left; width: 318px; height: 109px;">',
                '<div style="width: 318px; height: 61px;">',
                '<div style="font-size: 21px; font-weight: bold; padding: 3px 0 1px 18px;">{EventName}</div>',
                '<div style="font-size: 19px; font-weight: bold; padding: 3px 0 5px 18px;">{Date}</div>',
                '</div>',
                '<div style="width: 318px; height: 48px;">',
                '<div style="float: left; padding: 5px 0 0 18px;"><img src="resources/images/MoreInfo.png" alt="More Info" /></div>',
                '<div style="float: left; padding: 5px 0 0 7px;"><img src="resources/images/BuyTickets.png" alt="Buy Tickets" /></div>',
                '<div style="float: left; padding: 5px 0 0 7px;"><img src="resources/images/Phone.png" alt="Purchase Tickets by Phone" /></div>',
                '</div>',
                '</div>',
                '</div>',                       
            ].join('')

  7. #7
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    108
    Vote Rating
    1
    paulh1971 is on a distinguished road

      0  

    Default


    Anyone?

Thread Participants: 1

Tags for this Thread