[CLOSED] Fields not showing properly in different screen resolution

  1. #1

    [CLOSED] Fields not showing properly in different screen resolution

    I design an user interface but different screen resolution all fields not showing properly.I post sample code and screen shots.

    I try my best to simplified this.there are 2 views Index and chield,child view render inside index,the code is very lengthy,that's why I will not post code here .I upload all screenshots and sample in Dropbox and link here. please see.

    Edited
    I forgot to post test case

    1600 x 900 = OK
    1440 x 900=ok

    1366 x 768 = "Requisition Rejected" radio button not show.
    1360 x 768 = "Requisition Rejected" radio button not show.
    1280 x 800=ok
    1280 x 768 = "Requisition Rejected" radio button not show.
    1280 x 720 = Most fields after grid panel not shown
    1280 x 600 = Any fields after grid panel not shown
    1152 x 864 = ok
    1024 x 768 = "Requisition Rejected" radio button not show.
    Last edited by Daniil; Aug 19, 2014 at 4:35 AM. Reason: [CLOSED]
  2. #2
    Hi @matrixwebtech,

    the code is very lengthy
    Please clarify how many code lines are there?

    Please do not post links to download projects unless we request it.

    I upload all screenshots
    A pair of screenshots - one correct, another incorrect - would be enough for now. Please post inline.
    Last edited by Daniil; Aug 15, 2014 at 2:44 PM.
  3. #3
    Index View contains 96 lines
    Child View Contains 292 lines

    Controller
    public ActionResult Index()
            {
                return View();
            }
    
            public ActionResult chield()
            {
                return View();
            }
    Views

    Index View

    @{
           var X = Html.X();
       
    }
    @X.ResourceManager() 
        @(
     Html.X().Viewport()
     .Layout(LayoutType.Border)
                 .Border(false)
                .Items(
    
                                    X.Panel().Layout(LayoutType.HBox)
                                    .Border(false)
                                    .Height(50)
                                    .Region(Region.North)
                                    .BodyStyle("background: #DFE8F6").AutoScroll(false)
                                    .Items
                                    (
                                    X.Image()
                        
                                    .Height(40)
                                    .Width(300).ImageUrl("")
                                    ,
                                    /*=================================================================*/
    
    
                                    X.DisplayField().Padding(10).Margins("0 0 0 0"),
                                    X.Container().Layout(LayoutType.VBox).Padding(0).Margins("0 0 0 0").Items(
    
                                    )
    
                                    /*====================================================================*/
                                    )
                      ,
    
                        Html.X().TreePanel()
                        
                        .Split(true)
                        .Collapsible(true)
                        .ID("TreePanel")
                        .Region(Region.West)
                        .UseArrows(true)
                        .Width(300)
                        .Title("Menu")
                        .RootVisible(false)
                          ,
                    Html.X().TabPanel()
                    .ID("TabPanel1")
                        .Region(Region.Center)
                        .Border(false)
                        .Items
                        (
                                    Html.X().TabPanel()
                                    .ID("TabPanel")
                                    .Layout(LayoutType.Absolute)
                                    .Border(false)
                                    .Plugins(plugins => plugins.Add(new TabCloseMenu()))
                                    .Items
                                    (
                                                X.Panel()
                                                .ID("pdashboard")
                                                .Title("Dash Board")
                                                .BodyPadding(6)
                                                .AutoScroll(true)
    
                                                .Loader(X.ComponentLoader()
                                                .Url(Url.Action("chield"))
                                            
                                                .LoadMask(m => m.ShowMask = true)
                            
                                                .Mode(LoadMode.Frame)
                                                )
                                    )
                         
                        )
                        .Plugins(plugins => plugins.Add(new TabCloseMenu()))
                        ,
                         X.Panel().ID("pbottom")
    
                        .BodyPadding(0)
                        .AutoScroll(false)
                        .Region(Region.South)
                            .BottomBar(
                              X.StatusBar().StatusAlign(StatusAlign.Right).Border(false)
                                    .Items(
                                        X.ToolbarTextItem().Text("Test"),
                                         X.ToolbarTextItem().ID("txttime"), 
                                          X.ToolbarTextItem()
    
                                    )
                            ).AlignTo("pbottom", "Left")
    
        )
    
    
        )

    Child View
    @{
        var X = Html.X();
    }
    @X.ResourceManager()
        @(Html.X().Viewport()
         .Layout(LayoutType.Fit)
                  .Border(false)
                        .Items(
                //=========================================Form Start==================================================
                         X.FormPanel().ID("f").Border(false).BodyStyle("background-color: #F1F1F1;").ButtonAlign(Alignment.Right)
                                .Items
                                (
    
                                X.Portal().Border(false).Title("1").Header(false).Layout(LayoutType.Table).BodyStyle("background-color: #F1F1F1;").Border(false)
                                .Padding(0).Margin(0).Height(120).LayoutConfig(new TableLayoutConfig { Columns = 3 }).AutoScroll(false)
                                .Items
                                (
                //=========================================1st Column Start==================================================
                            X.PortalColumn().AnchorHorizontal("50%")
                            .Items(
                                       
                                    X.TextField()
                                    .FieldLabel("Requisition No")
                                    .AnchorHorizontal("100%")
                                    .Width(270)
                                    .LabelAlign(LabelAlign.Right)
                                    ,
                                    X.DateField()
                                    .FieldLabel("Date")
                                    .AnchorHorizontal("100%")
                                    .Width(270)
                                        
                                    .LabelAlign(LabelAlign.Right),
    
                                    X.ComboBox()
                                    .FieldLabel("Branch")
                                    .AnchorHorizontal("100%")
                                    .Width(270)
                                                                    
                                    ,
                                    X.ComboBox()
                                    .FieldLabel("Requested by")
                                    .AnchorHorizontal("100%")
                                                          
                                    .Width(270)
                                                            
                                 ),
                //=========================================1st Column End====================================================
    
                            //=========================================2nd Column Start==================================================
                                  X.PortalColumn().AnchorHorizontal("50%")
                            .Items(
    
                                        X.ComboBox()
                                        .FieldLabel("Cost center")
                                        .AnchorHorizontal("100%")
                                        .Width(270)
                                        ,
    
                                        X.ComboBox()
                                        .FieldLabel("Project")
                                        .AnchorHorizontal("100%")
                                        .Width(270)
                                        ,
    
                                        X.ComboBox()
                                        .FieldLabel("Site")
                                        .AnchorHorizontal("100%")
                                        .Width(270)
                                        ,
                                        X.DateField()
                                        .FieldLabel("Require Date")
                                        .AnchorHorizontal("100%")
                                        .Width(270)
                                        .LabelAlign(LabelAlign.Right)
                                        .Format("dd-MM-yyyy")
    
                                 ),
    
                         //=========================================2nd Column End==================================================  
    
                           //=========================================3rd Column Start==================================================                  
                                  X.PortalColumn().AnchorHorizontal("50%")
                            .Items(
    
    
                                            X.ComboBox()
                                            .FieldLabel("Vendor Name")
                                            .AnchorHorizontal("100%")
                                            .Width(350)
                                            ,
                                            X.TextArea()
                                            .ReadOnly(true)
                                            .FieldLabel("Address")
                                            .Height(52),
    
                                            X.Container().Layout(LayoutType.Table).LayoutConfig(new TableLayoutConfig { Columns = 2 })
                                            .Items
                                            (
                                            X.TextField()
                                   
                                            .FieldLabel("City")
                                            .AnchorHorizontal("100%")
                                            .LabelAlign(LabelAlign.Right)
    
                                            ,
    
                                            //X.DisplayField().Html(" "),
                                            X.TextField()
                                            .FieldLabel("Pin")
                                            .AnchorHorizontal("100%")
                                            .LabelAlign(LabelAlign.Right)
                                            )
    
                                 )
                //=========================================3rd Column End================================================== 
    
    
                                )
                //==============================================================================Requisition Master entry End
    
                                ,
                /**
                 * details Entry GridPanle Starts here
                                
                  */
    
            X.GridPanel()
            .ID("GridPanel1")
            .TopBarItem(X.Button().Text("Add").Icon(Icon.Add))
            .Layout(LayoutType.Fit)
            .Border(false)
            .Header(false)
            .AutoScroll(true)
            .Height(270)
            .Features(X.Summary().ShowSummaryRow(false))
            .Title("Grid")
            .ForceFit(true)
          
            .View(
                    Html.X().GridView().MarkDirty(false)
                )
    
            .ColumnModel(
    
                            X.Column()
                    
                            .Editor(
                            Html.X().TextField().AllowBlank(true).StyleSpec("text-align:left")
                              ),
                            X.Column()
                   
                            .Editor(
                            X.ComboBox()
                           
                            )
                            ,
    
                            X.Column()
                   
                            .Editor(X.ComboBox()
    
                            .ID("ddlMaterial")
                            ),
                             X.Column()
                    
                            .Editor(X.ComboBox()
    
                            ),
    
                            X.Column()
                    
                            .Editor(
                            Html.X().NumberField()
                            ),
    
                            X.Column()
                            .Editor(
                            Html.X().NumberField()
                              ),
    
                            X.Column()
                            .Editor(
                            Html.X().NumberField()
                             ),
    
                            X.SummaryColumn()
                            .Editor(
                            Html.X().NumberField() 
    
                            )
                     
            )
    
          
    
            /*=======================================================Grid End======================================================================*/
    
            ,
                //=========================================Footer Start==================================================
            X.Portal().Border(false).Title("1").Header(false).Layout(LayoutType.Table).BodyStyle("background-color: #F1F1F1;").Border(false)
            .Padding(0).Margin(0).Height(200).LayoutConfig(new TableLayoutConfig { Columns = 3 }).AutoScroll(false)
            .Items
            (
                //=========================================Footer 1st Column Start==================================================
                X.PortalColumn().Border(false)
                .Items(
                        X.Checkbox()
                        .BoxLabel("Forward to Purchas")
                        .BoxLabelAlign(BoxLabelAlign.After)
               
                        .HideLabel(true),
                            X.Checkbox()
                        .BoxLabel("Quotation Required")
                        .BoxLabelAlign(BoxLabelAlign.After)
                
                        .HideLabel(true),
                            X.Radio()
                        .BoxLabel("Requisition Approved")
                        .BoxLabelAlign(BoxLabelAlign.After)
               
                        .HideLabel(true)
                        .Name("r"),
                            X.Radio()
                        .BoxLabel("Requisition Rejected")
                        .BoxLabelAlign(BoxLabelAlign.After)
              
                        .HideLabel(true)
                        .Name("r")
    
                ),
                //=========================================Footer 1st Column End==================================================  
                //=========================================Footer 2nd Column Start==================================================
                        X.PortalColumn().Border(false)
                        .Items(
                                X.ComboBox()
                                .FieldLabel("Status")
    
                                .EmptyText("Select")
                                .EmptyValue(0)
                                .Items(new ListItem { Text = "Hold" }, new ListItem { Text = "Approved" }, new ListItem { Text = "Rejected" })
                                .AllowBlank(true)
    
                                .Editable(true)
                                    ,
                                 X.TextArea()
                                 .FieldLabel("Remarks")
                                .AnchorHorizontal("100%")
                                .Width(350)
                                .LabelAlign(LabelAlign.Right)
                                 .Height(52)
    
                        )
                //=========================================Footer 2nd Column End==================================================  
             ,
                        X.PortalColumn().Layout(LayoutType.VBox).LayoutConfig(new VBoxLayoutConfig { Align = VBoxAlign.Right })//StyleSpec("left:950px;top:10px")
                        .Items
                        (
    
                                X.Panel().Width(200).LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.Middle }).Border(false).Padding(5)
                                .Items
                                (
    
                                X.DisplayField().Text("Total Value").HideLabel(true),
                  
               
                                X.DisplayField().HideLabel(true)
                                )
                        )
    
            )
                //=========================================Footer End================================================== 
    
      )
    
    
                    .Buttons(
                                X.Button()
                                .Text("Save")
                             
                                , X.Button()
                                .Text("Close")
                                .ID("btnClose")
              
    
                    )
    
    
                    )
                    //=========================================Form End==================================================
    
                    )
    1 post can have 5 picture max that's why I will post 5 with this post and reaming with next.

    Click image for larger version. 

Name:	1366 x 768.png 
Views:	16 
Size:	43.0 KB 
ID:	14371Click image for larger version. 

Name:	1360 x 768.png 
Views:	17 
Size:	45.0 KB 
ID:	14381Click image for larger version. 

Name:	1280 x 768.png 
Views:	19 
Size:	98.7 KB 
ID:	14391Click image for larger version. 

Name:	1280 x 720.png 
Views:	15 
Size:	38.5 KB 
ID:	14401Click image for larger version. 

Name:	1280 x 600.png 
Views:	13 
Size:	91.1 KB 
ID:	14411
  4. #4

    Remaing pictures

    Here I post remaining 5 pictures
    Click image for larger version. 

Name:	1600x900.png 
Views:	13 
Size:	43.3 KB 
ID:	14421Click image for larger version. 

Name:	1440 x 900.png 
Views:	10 
Size:	42.8 KB 
ID:	14431Click image for larger version. 

Name:	1280 x 800.png 
Views:	12 
Size:	40.9 KB 
ID:	14441Click image for larger version. 

Name:	1152 x 864.png 
Views:	13 
Size:	40.9 KB 
ID:	14451Click image for larger version. 

Name:	1024 x 768.png 
Views:	11 
Size:	36.4 KB 
ID:	14461
  5. #5

    Remaing pictures

    Sorry,by mistake this is posted by me
    Last edited by matrixwebtech; Aug 15, 2014 at 3:21 PM.
  6. #6
    It appears the layout problems happen when the height of your browser is less than approx 800px? I'm going to guess that you're running into problems because you have set fixed .Height's on all the Containers. Your .Height's are adding up to more space than what's available.

    Experimenting with different Layout options could help solve the problem.

    We also seem to be asking you in every thread recently to post proper samples which demonstrate how to reproduce the problem with the minimum amount of code possible. This cannot go on. We will not be asking again. For any forum posts you submit in the future, if you do not receive a response from Ext.NET staff it means you have provided insufficient information for us to reproduce the problem. We will not be asking you to post more information, you will just not receive a response from Ext.NET staff.

    For example, in the sample you just provided above, why are the GridPanels Editors relevant to the problem? Why are eight Columns relevant to the problem? Why is the GridPanel even relevant to the problem? Why couldn't you replace the GridPanel with just a Panel? I'm pretty confident the same layout problems would have been reproduced with Panel instead of a GridPanel.

    I'm sure there's several other places where large chunks of code could have been removed from your sample.

    Before you post in the Ext.NET forums again, please fully read and accept the Forum Guidelines (see links below). If the Forum Guidelines are not acceptable to you, please do not post in the Ext.NET forums again.

    http://forums.ext.net/showthread.php...ing-New-Topics

    http://forums.ext.net/showthread.php...ation-Required
    Geoffrey McGill
    Founder
  7. #7
    Ok, I understand ,As not very much experience with EXT.net, Gridpanel can replaced with panel this thing ,I don't have in my mind.that's why I post previous code which is actual design of my pages .

    can you please give me some layout Idea according to my design.
  8. #8
    Problem : Height Not automatically adjust of my design.

    Trying to do : I am trying to design a responsive design,but I am facing problem with some screen resolution,height not automatically adjust with screen resolution.I mention .Height() only tow times. in indes.cshtml "PANEL1" and once in chield.cshtml in "GridPanel1" because I need a fix height for this 2,I test with browser is less than approx 800px and fields after "Total Value" not showing properly.

    Need suggestion : how can I resolve this problem.

    View Index

    @{
           var X = Html.X();
      }
    @X.ResourceManager() 
        @(
     Html.X().Viewport()
     .Layout(LayoutType.Border)
                 .Border(false)
                .Items(
    
                                    X.Portal().ID("PANEL1").Layout(LayoutType.HBox)
                                    .Border(false)
                                    .Height(50)
                                    .Region(Region.North)
                                    .AutoScroll(false)
                                    .Items
                                    (
                                    X.Image()
                                    ,
                                   X.DisplayField().Padding(10).Margins("0 0 0 0"),
                                    X.Container().Layout(LayoutType.VBox).Padding(0).Margins("0 0 0 0").Items(
    
                                    )
    
                                    )
                      ,
                        Html.X().Panel()
                        .Region(Region.West)
                        .Width(300)
                           ,
                    Html.X().TabPanel()
                    .ID("TabPanel1")
                        .Region(Region.Center)
                        .Border(false)
                        .Items
                        (
                                    Html.X().TabPanel()
                                    .ID("TabPanel")
                                    .Layout(LayoutType.Absolute)
                                    .Border(false)
                                    .Plugins(plugins => plugins.Add(new TabCloseMenu()))
                                    .Items
                                    (
                                                X.Panel()
                                                .ID("pdashboard")
                                                .Title("Dash Board")
                                                .BodyPadding(6)
                                                .AutoScroll(true)
    
                                                .Loader(X.ComponentLoader()
                                                .Url(Url.Action("chield"))
                                            
                                                .LoadMask(m => m.ShowMask = true)
                            
                                                .Mode(LoadMode.Frame)
                                                )
                                    )
                         
                        )
                       
                        ,
                         X.Panel().ID("pbottom")
                        .BodyPadding(0)
                        .AutoScroll(false)
                        .Region(Region.South)
                            .BottomBar(
                              X.StatusBar().StatusAlign(StatusAlign.Right).Border(false)
                                    .Items(
                                        X.ToolbarTextItem().Text("Test")
    
                                    )
                            ).AlignTo("pbottom", "Left")
    
        )
        )
    View Child

    @{
        var X = Html.X();
    }
    @X.ResourceManager()
        @(Html.X().Viewport()
         .Layout(LayoutType.Fit)
                  .Border(false)
                        .Items(
               
                         X.FormPanel().Border(false).ButtonAlign(Alignment.Right)
                                .Items
                                (
    
                                X.Portal().ID("HEADER").Border(false).Title("1").Header(false).Layout(LayoutType.Table).Border(false)
                                .Padding(0).Margin(0).LayoutConfig(new TableLayoutConfig { Columns = 3 }).AutoScroll(false)
                                .Items
                                (
               
                            X.PortalColumn().AnchorHorizontal("50%")
                            .Items(
                                  X.TextField()
                                    ,
                                    X.DateField()
                                    ,
    
                                    X.ComboBox()
                                    ,
                                    X.ComboBox()
                                   
                                                            
                                 ),
            
                                  X.PortalColumn().AnchorHorizontal("50%")
                            .Items(
    
                                        X.ComboBox()
                                          ,
    
                                        X.ComboBox()
                                         ,
    
                                        X.ComboBox()
                                        ,
                                        X.DateField()
                                        
                                 ),
    
                                   
                                  X.PortalColumn().AnchorHorizontal("50%")
                            .Items(
                                            X.ComboBox()
                                           ,
                                            X.TextArea()
                                            ,
    
                                            X.Container().Layout(LayoutType.Table).LayoutConfig(new TableLayoutConfig { Columns = 2 })
                                            .Items
                                            (
                                            X.TextField()
                                            ,
    
                                           X.TextField()
                                            
                                            )
                                 )
             
                                )
               
    
                                ,
             
          X.Panel()
            .ID("GridPanel1")
            .TopBarItem(X.Button().Text("Add").Icon(Icon.Add))
            .Layout(LayoutType.Fit)
            .Border(false)
            .Header(false)
            .AutoScroll(true)
            .Height(270)
           .Title("Grid")
            ,
              
                
            X.Portal().Border(false).Title("1").Header(false).Layout(LayoutType.HBox).Border(false)
            .Padding(0).Margin(0).LayoutConfig(new HBoxLayoutConfig { Align=HBoxAlign.Bottom}).AutoScroll(false)
            .Items
            (
               
                X.PortalColumn().Border(false)
                .Items(
                        X.Checkbox()
                          ,
                            X.Checkbox()
                        ,
                            X.Radio()
                       ,
                            X.Radio()
                        
    
                ),
            
                        X.PortalColumn().Border(false)
                        .Items(
                                X.ComboBox()
                                 ,
                                 X.TextArea()
                                
    
                        )
             
             ,
                        X.PortalColumn().Layout(LayoutType.VBox).LayoutConfig(new VBoxLayoutConfig { Align = VBoxAlign.Right })
                        .Items
                        (
    
                                X.Panel().Width(200).LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.Middle }).Border(false).Padding(5)
                                .Items
                                (
    
                                X.DisplayField().Text("Total Value").HideLabel(true),
                  
               
                                X.DisplayField().HideLabel(true)
                                )
                        )
    
            )
                
    
      )
    
                    .Buttons(
                                X.Button()
                                .Text("Save")
                             
                                , X.Button()
                                .Text("Close")
                                .ID("btnClose")
                              )
    
    
                    )
                   
    
                    )
    Controller
     public ActionResult Index()
            {
                return View();
            }
    
            public ActionResult chield()
            {
                return View();
            }
  9. #9
    The issue is reproducible without changing the screen resolution. You can just shrink down a browser window.

    Just there is no room to show those fields if the Height is less than 800 pixels approx.

    Please try to remove
    .Height(270)
    and you will see those fields.

    I think it is up to you how to manage the GridPanel's Height.
  10. #10
    Ok,
    I set

    .AutoScroll(true)
    to "FormPanel" now a scroll is appeared which screen height less then 800 pixels .

    this can be close now.

Similar Threads

  1. [CLOSED] how to adapt the application to the screen resolution
    By JCarlosF in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 20, 2013, 12:27 AM
  2. Replies: 0
    Last Post: Jun 22, 2012, 10:17 AM
  3. [CLOSED] '<' and '>' not showing properly in qtip
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 22, 2011, 6:05 AM
  4. Replies: 3
    Last Post: Apr 19, 2010, 5:00 AM
  5. Message box not showing up properly
    By studentdev in forum 1.x Help
    Replies: 6
    Last Post: Jan 28, 2010, 5:20 PM

Posting Permissions