Grid not taking full width in Listbox in large device

I am trying to create a listbox in which grid takes the full width of the device automatically and adjusts accordingly. But earlier it was not taking the full width and now it has stopped viewing items.
Here is my code
<ListBox Name="costList" HorizontalContentAlignment="Stretch" Grid.Row="2" Height="400" ItemContainerStyle="{StaticResource ListBoxItemStyle1}">
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <Grid HorizontalAlignment="Stretch" Background="Black">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="1*"/>
                                                <ColumnDefinition Width="1*"/>
                                                <ColumnDefinition Width="0.3*"/>
                                                <ColumnDefinition Width="1*"/>
                                                <ColumnDefinition Width="1*"/>
                                            </Grid.ColumnDefinitions>
                                            <TextBlock Grid.Row="1" Grid.Column="0" Text="Groceries" Style="{StaticResource
Content_Text}" Padding="2,0" Foreground="Black" Width="Auto" Height="Auto" HorizontalAlignment="Center" FontSize="16" VerticalAlignment="Center" Margin="2"/>
                                            <Image Grid.Row="1" Grid.Column="1" MaxHeight="35" MaxWidth="100"
Stretch="Fill" Source="/Images/around_me_btm_img.png"/>
                                            <TextBlock Grid.Row="1" Grid.Column="1" Text="$" Style="{StaticResource
Content_Text}" Padding="2,0" Foreground="Black" Width="15" Height="24" HorizontalAlignment="Left" FontSize="22" Margin="2,4,0,10"/>
                                            <TextBox Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left" InputScope="Number"
MaxLength="6" PlaceholderText="0.0" Background="Transparent" BorderBrush="Transparent" Padding="0,0,2,0" Width="60" Height="10" VerticalAlignment="Center" FlowDirection="RightToLeft"
Foreground="Black" Margin="20,0,0,0" BorderThickness="0"/>
                                            <TextBlock Grid.Row="1" Grid.Column="2" Text="2%" VerticalAlignment="Center"
Foreground="Black" TextAlignment="Center" Padding="0" Width="Auto" FontSize="16"/>
                                            <Image Grid.Row="1" Grid.Column="3" MaxHeight="35" MaxWidth="100"
Stretch="Fill" Source="/Images/around_me_btm_img.png"/>
                                            <TextBlock Grid.Row="1" IsHitTestVisible="False" Grid.Column="3" Text="$"
Style="{StaticResource Content_Text}" Padding="2,0" Foreground="Black" Width="15" Height="24" HorizontalAlignment="Left" FontSize="22" Margin="2,4,0,10"/>
                                            <TextBox Grid.Row="1" Grid.Column="3" IsHitTestVisible="False" HorizontalAlignment="Left"
InputScope="Number" MaxLength="6"  PlaceholderText="0.0" Background="Transparent" BorderBrush="Transparent" Padding="0,0,2,0" Width="60" Height="10" VerticalAlignment="Center"
FlowDirection="RightToLeft" Foreground="Black" Margin="20,0,0,0" BorderThickness="0"/>
                                            <Image Grid.Row="1" Grid.Column="4" MaxHeight="35" MaxWidth="100"
Stretch="Fill" Source="/Images/around_me_btm_img.png"/>
                                            <TextBlock Grid.Row="1" Grid.Column="4" Text="$" Style="{StaticResource
Content_Text}" Padding="2,0" Foreground="Black" Width="15" Height="24" HorizontalAlignment="Left" FontSize="22" Margin="2,4,0,10"/>
                                            <TextBox Grid.Row="1" IsHitTestVisible="False" Grid.Column="4" HorizontalAlignment="Left"
InputScope="Number" MaxLength="6"  PlaceholderText="0.0" Background="Transparent" BorderBrush="Transparent" Padding="0,0,2,0" Width="60" Height="10" VerticalAlignment="Center"
FlowDirection="RightToLeft" Foreground="Black" Margin="20,0,0,0" BorderThickness="0"/>
                                        </Grid>
                                    </DataTemplate>
                                </ListBox.ItemTemplate>                            
                            </ListBox>
List<string> demoList = new List<string>();
            for (int i = 0; i < 5; i++)
                demoList.Add("Hello");
            costList.ItemsSource = demoList;
Here demolist is just for testing purpose because I want to bind the textblock on leftmost column to it. Can somebody help?

Hi RohitrkKumar,
You’ve not posted the definition of ItemContainerStyle, so I used the default one with your code. I could see the item of ListBox control taking the full width of screen. I tested using snapped view and it worked fine.
Please try and let me know the result. If you still cannot make it working, please post more information about your scenario.
Regards,
We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. Click HERE to participate
the survey.

Similar Messages

  • Firefox 3.6.3 - ebay pages are centered, do not display full width of screen

    Upgraded to Firefox 3.6.3 and my ebay pages are centered and do not display full width of screen as they did in the previous version. Most other pages will automatically adjust to the full width of the screen
    == This happened ==
    Every time Firefox opened
    == Firefox 3.6.3 upgrade

    See if anything here helps you. <br />
    https://support.mozilla.com/en-US/kb/Images+or+animations+do+not+show

  • Viewsonic 2431wm does not use full width in 1920x1080 mode

    HI Folks,
    I've recently replaced a failed Viewsonic 2433wm monitor with a 2431wm.  My Mac Pro 5,1 has the 1GB Radeon HD5770 video HBA and is a 2 monitor configuration.  The previous pair of 2433wm's functioned wonderfully at the 1920x1080@60Hz settings.
    However, with the new 2431wm attached, the displayed image does not use the full width of the screen.  I've tried manually adjusting the horizontal settings and using the monitor's Auto Image Adjust with no change.  I've also installed the latest drivers from the Viewsonic site.
    For grins, I borrowed a colleague's 2433wm and it immediately worked as expected with no changes on the monitor or my Mac Pro.  Also, setting the 2431wm's resolution to 1680x1024 uses the entire screen width.
    Does anyone have tips about the 2431wm or manual OS X settings that could resolve this?
    Thanks,
    Tim

    When using a CRT, the phosphor is painted on the display much more widely. The maximum resolutions used are always far less than the maximum the display could produce IF we were to tune it to absolutely perfectly hit every Phosphor dot. But if you did this, you would have to adjust your display ever time a new picture went up on it.
    An LCD display does not wave an electron gun around and light up some phosphor dots. The dots are addressed directly. Optimum resolution is EXACTLY every dot that the manufacturer placed on the glass -- no more, no less.
    If you chose any resolution other than the optimum resolution, the display may try to approximate what you asked for and fill the display -- or may not. If it does fill the screen, it will be a poor imitation of the best picture you can possibly get from the display.
    My recommendation: Find out what is the optimum or recommended resolution is for your specific display, set your display to that resolution, and do not change it.

  • IPhone5 not displaying full width

    My first Muse site is proving difficult. After resolving various issues with the desktop, I now find my iPhone5 doesn't display the phone site to full width. The site is a few scrolling pages and the 380px X 520px is displaying too small on the iPhone 5. Can anybody give me a clue here?

    I have discovered that the phone site tends to push wider than desired when I place APIs in <div> rather than <iframes> (Wistia video streaming code). So my problem has been resolved. 
    Also that expandable 100% widths can also affect the display on mobile devices. This I find can be easily fixed by grouping. Expandability seems to be compromised once grouped.
    I'm going to do some extensive research on how Muse handles different place HTML code once this project is completed. I'll send you the link for this site once it's live. I can't share it with you as yet as I'm bound by an NDA.
    Thanks, Zevon de Tonssk

  • div not extending full width

    I have a basic page built on the standard twoColFixLtHdr template that comes with CS4. Have created a new div #welcome that should extend across the whole width of the mainContent div, and the math adds up and the view layout guides shows everything in place. When you use Design Live View or a browser, there is a 20px white space at the right end of the #welcome block. I have just included the basic definitions below as I am sure this is something simple that my limited experience is not seeing. Thanks in advance for any/all advice or suggestions.
    .twoColFixLtHdr #container {
    width: 760px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    background: #FFFFFF;
    margin: 0 auto;
    text-align: left; /* this overrides the text-align: center on the body element. */
    .twoColFixLtHdr #sidebar1 {
    float: left; /* since this element is floated, a width must be given */
    width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    background-image: url(../Images/sidebar-graphic-bkgrnd.gif);
    background-repeat: repeat-y;
    /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 0;
    position: relative;
    top: 0px;
    left: 0px;
    *in the Spry Vertical Menubar.CSS I have added a 2px border around each menu item and sub item giving me a total of 204px width for the sidebar}
    .twoColFixLtHdr #mainContent {
    margin: 0 0 0 204px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
    padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
                    position: relative;
                    top: 0;
                    left: 0;
    .twoColFixLtHdr #container #mainContent #welcome {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFF;
    width: 556px;
    position: relative;
    left: 0;
    top: 0px;
    background-image: url(../Images/welcome-graphic-bkgrnd.gif);
    background-repeat: repeat-y;
    float: left;

    By the way I just used the same css as yours and it is working fine for me:
    Following are the styles that I testerd for the said template:
    body  {
         font: 100% Verdana, Arial, Helvetica, sans-serif;
         background: #666666;
         margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
         padding: 0;
         text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
         color: #000000;
    .twoColFixLtHdr #container {
    width: 760px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    background: #FFFFFF;
    margin: 0 auto;
    text-align: left; /* this overrides the text-align: center on the body element. */
    .twoColFixLtHdr #header {
         background: #DDDDDD;
         padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    .twoColFixLtHdr #header h1 {
         margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
         padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    .twoColFixLtHdr #sidebar1 {
    float: left; /* since this element is floated, a width must be given */
    width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    background-image: url(../Images/sidebar-graphic-bkgrnd.gif);
    background-repeat: repeat-y;
    /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 0;
    position: relative;
    top: 0px;
    left: 0px;
    /*in the Spry Vertical Menubar.CSS I have added a 2px border around each menu item and sub item giving me a total of 204px width for the sidebar*/}
    .twoColFixLtHdr #mainContent {
    margin: 0 0 0 204px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
    padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    position: relative;
    top: 0;
    left: 0;
    .twoColFixLtHdr #container #mainContent #welcome {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFF;
    width: 556px;
    position: relative;
    left: 0;
    top: 0px;
    background-image: url(../Images/welcome-graphic-bkgrnd.gif);
    background-color:#330099;/*used this to see the div properly*/
    background-repeat: repeat-y;
    float: left;
    Are your all the styles same as this?
    Regards,
    Vinay

  • Adjustments not taking full effect

    Hello,
    I am editing a photograph in Photoshop CC 64bit and when I try to use adjustments such as Brightness/Contrast, Levels, Curves or Exposure etc, the adjustment does not seem to take effect to the extent that I am shown in the preview. So for example, I want to increase the brightness using the Brightness/Contrast sliders, I have the Preview button ticked so I can preview the effect and when I set it how I want it to look and click OK, the photo changes, but not to the extent that the preview is showing me. So the photograph is getting brighter, but not as bright as I can see when I'm previewing my adjustment. This happens on more than just the Brightness/Contrast adjustment. So far, I've had this problem with Brightness/Contrast, Levels, Curves and Exposure.
    This only seems to happen when I am editing NEF files in Photoshop. I've edited JPGs and they work fine. Another thing I have noticed, and this might just be coincidence, but when I am editing a NEF in Photoshop that has not been adjusted in Camera Raw (ie the sliders in Camera Raw have just been left at 0), I don't seem to have this problem, only when my NEF has first been edited in Camera Raw, then opened in Photoshop.
    Has anyone else had this problem? If anyone can advise on how to stop this from happening I'd greatly appreciate it!
    I am using Photoshop CC Ver 14.2.1 x64. I am using a PC running Windows 7 Pro x64, with 8GB RAM and Intel i3 CPU 3.40GHz.
    Thanks in advance for any help.

    Thanks for your response c.pfaffenbichler,
    I have attached some screenshots.
    Before Adjustment.jpg is the photograph in Photoshop before I have applied an adjustment.
    Preview Adjustment.jpg is the photograph as seen when I am previewing an adjustment (I have increased brightness quite a lot here in order to emphasise the problem).
    After Adjustment.jpg is the photograph after the adjustment has been applied.
    I have tried making an adjustment when viewed at 100% and this looks like it works fine.
    Is this something you have come across before then?

  • Background image not to full width on iPad

    I am testing my new site created using Muse and all is working well. The only issue I seem to have is that on a desktop, the background image I have will fill any size browser window perfectly, right up to a full 27" on my iMac.
    But on an iPad it just stops about half inch on right-hand side, leaving an ugly white strip.
    I can't seem to resolve this - any ideas much appreciated.

    Great, I revisited every page of the Muse file and found one that had some stray elements on the pasteboard to the right. I deleted these and hey presto, works perfectly on iPad now as well, background goes fully to the edges.
    Many thanks.

  • Backgrounds not displaying at full width on ipad

    Hi, I am new to muse but Ive been working with a template I purchased and the backgrounds do not go full width when viewed on an ipad even though they are set to 100% width on my muse file. There is a white space on the right side.
    Website is: roundcorner.ca and mezzalunadesign.ca
    screen shots are below.

    Great, I revisited every page of the Muse file and found one that had some stray elements on the pasteboard to the right. I deleted these and hey presto, works perfectly on iPad now as well, background goes fully to the edges.
    Many thanks.

  • Full width web page?

    I have created and have up and running a great website (www.i-drone.co.uk)that i created with iWeb. However, the webpage is not the full width of the page? is there a way of making use of the full width of the page, without the bars either side?
    Thanks

    Welcome to the Apple Discussions. You can increase the width of the content portion of the page with the Inspector/Page/Layout pane:
    Click to view full size
    However, the theme that you choose, Darkroom, does not scale up to larger widths because it uses a fixed width image for the spotlighted area in the center.
    You could simulate that theme, except for the spotlight but taking a screenshot of the textured area and using that file for the page background. Or make the page background transparent or none and use the textured file for the browser background.
    OT

  • Full width headers

    hello,
    i know this should be basic but i have a full screen slideshow and i need a header bar and footer bar top & bottom of the screen.
    the header and footer will not stretch full width only the width of the page.
    the header did at first but only when "sticky footer" was unchecked until i added the footer and need it to stay at the bottom.t know what to do
    any help would be appreciated as i am on deadline
    i'm sure it's a simple fix but just unsure how to fix it
    thanks

    In previous releases you could "Snap" the edges of a div (box) to the sides of the gray-outermost area of the stage. This would "Snap it to Full screen width". That still works. But, I think your problem is that the item you want to scale, is an image. So, make a new div (box) and then place your image inside it as a "background fill" re-stretch the box to the sides, or click on the new "100% Width" layout feature. You should get the results you were looking for.
    [email protected]

  • How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)

    How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)
    and I know it is being over-ridden by
    .gridContainer {
      width: 88.5%;
      max-width: 1232px;
      padding-left: 0.75%;
      padding-right: 0.75%;
      margin: auto;
      clear: none;
      float: none;

    Abdelqader Alnobani wrote:
    How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)
    and I know it is being over-ridden by
    .gridContainer {
      width: 88.5%;
      max-width: 1232px;
      padding-left: 0.75%;
      padding-right: 0.75%;
      margin: auto;
      clear: none;
      float: none;
    Logically a structure something like below should work BUT whether or not it will upset the FG I don't know as I wouldn't ever use it.
    <div class="gridContainer">
    Top Code Section Goes Here
    </div>
    <!-- close gridContainer -->
    <div id="fullWidth">
    Full width section goes here
    </div>
    <!-- close fullWidth -->
    <div class="gridContainer">
    Bottom Code Section Goes Here
    </div>
    <!-- close gridContainer -->

  • Hi Guys,  I am using the full width video widget on a site. The widget was working perfectly however I have just added additional content to the site and re-uploaded and now the video is not working! Please help I have tried everything and am freaking out

    Hi Guys,
    I am using the full width video widget on a site. The widget was working perfectly however I have just added additional content to the site and re-uploaded and now the video is not working! Please help I have tried everything and am freaking out as this web-site has been payed for by my client.
    Alex

    Many thanks.
    With those symptoms, I'd try the following document:
    Apple software on Windows: May see performance issues and blank iTunes Store
    (If there's a SpeedBit LSP showing up in Autoruns, it's usually best to just uninstall your SpeedBit Video Accelerator.)

  • I have Firefox 19 and the screens are narrow. How can I get full width screens, like I get in IE? Full Screen command only makes my screens taller, not wider.

    I just got a new Dell Optiplex computer with Windows 7. I installed Firefox 19 on it. The web pages come up narrow, with borders on each side. So the content of the screen is smaller than what I've gotten in the past with Firefox 3.6 on my previous computer. I did the Full Screen command, and that only made the screen taller rather than giving me a full screen (such as I get with the same web pages in Internet Explorer). I've also tried enlarging the text, but that throws off the format of the web page so some parts of it overlap.
    What can I do to get a full screen, including full width?
    There is a box below this Details box called "Troubleshooting Information" which says I should click Allow and then click Install. Since I don't know what would be installed on my computer, I did not do it.

    The Troubleshooting Information extension adds some useful information to your post, but in this case, I don't think it's really needed.
    Zoom is your best bet. To make it work for you, I have two suggestions.
    (1) Switch from "text only" zoom to "full page" zoom. This is proportional like in IE.
    View menu > Zoom > ''uncheck'' Zoom Text Only
    If you are using the compact menus with the orange Firefox button, tap the Alt key to display the full classic menu bar.
    (2) Install an extension that can default your view to a higher zoom level automatically to save time when visiting new sites. Here are two candidates:
    * [https://addons.mozilla.org/en-US/firefox/addon/default-fullzoom-level/ Default FullZoom Level]
    * [https://addons.mozilla.org/en-US/firefox/addon/nosquint/ NoSquint]
    With that combination, can you minimize your eyestrain? :-)

  • Content in the page not displaying in full width

    Hello everyone,
    We have a EP 2004s SR1 Portal with customized framework page and display theme.
    When logged on to the protal, the first page(say home page) was displaying by leaving some width at right of that page (approximately the width is equal to scroll bar width). For remaining pages this is not the case...it is displaying properly i.e displaying with full width covered.
    and one more thing is, this is happending in Production and QA machines...For Development machine it is working fine.
    Could any one help me in this...
    Thanks in advance
    Regards
    Sunil Chiluveru

    In your style.css on line 187 you have this.  Remove the max-width.
    .section > .content {
        background-image: url('../images/frame/contentBg.png');
        max-width: 800px;
        padding: 4%;
        text-align: justify;
        color: #646462;
        overflow: auto;
    Nancy O.

  • Adobe Muse Footer not full width in preview mode?

    Hi, I originally had my footer 100% width when previewing in browser and preview mode, and now for some reason it is not 100% width. Not sure what I have done for this to occur and it doesnt make it any easier when in design mode it is 100% width. Any help much appreciated.

    Just answered my own question, bounding box was not quite out to full browser width. To ensure it goes out to the full width keep dragging across until the guides turn red. I must of bumped it when I went in the masters page to do something and it was out by just a bees dick! Unreal....2 hrs of my life I wont get back haha :-)
    PS...Do I get 10 points for answering my own question? ;-)

Maybe you are looking for

  • How do I stop iCal from ever changing the time zones of my appointments?

    I cannot figure out time zone support in iCal, and just want it never to move the time of an appointment when I change time zones. I have tried switching time zone support on and off, and it makes no difference, the appointment times change when the

  • Problem about interface implementation

    Sorry, solved! Message was edited by: xixiao

  • OracleCommand.Transaction property is read only

    Does anyody know what's wrong with this: VB Code: Imports Oracle.DataAccess.Client Dim oraCn As New OracleConnection(ConString) Dim oraCmd1 As New OracleCommand(oraString1, oraCn) Dim oraTrans As OracleTransaction oraTrans = oraCn.BeginTransaction(Is

  • Figuring out where a mouse click is under an image

    I want to create a JFrame (or JPanel) where the whole area is one big gif (or icon etc) and I want to make some areas of this panel react to mouse clicks and other areas display messages. There are two ways that I can think of doing this. The first i

  • Customize Scroll Bar in List Box

    Is it possible to customize/skin the scroll bar attached to a list box component? My target platform is Flash 7. I essentially just need to make it about twice as big as it is, but would like to change the colors if possible. Thanks in advance!