Forcing List to fit screen

[paulh1971]

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

[mitchellsimoens]

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.

[paulh1971]

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!

[paulh1971]

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.

[paulh1971]

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

[paulh1971]

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

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('')

[paulh1971]

Anyone?