PDA

View Full Version : [CLOSED] Fields not showing properly in different screen resolution



matrixwebtech
Aug 15, 2014, 12:54 PM
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.

Daniil
Aug 15, 2014, 3:42 PM
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.

matrixwebtech
Aug 15, 2014, 4:07 PM
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).M argins("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).Borde r(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).LayoutConfi g(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).LayoutCon fig(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.

1437114381143911440114411

matrixwebtech
Aug 15, 2014, 4:10 PM
Here I post remaining 5 pictures
1442114431144411445114461

matrixwebtech
Aug 15, 2014, 4:19 PM
Sorry,by mistake this is posted by me

geoffrey.mcgill
Aug 16, 2014, 5:46 AM
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?3440-Forum-Guidelines-For-Posting-New-Topics

http://forums.ext.net/showthread.php?10205-More-Information-Required

matrixwebtech
Aug 16, 2014, 6:40 AM
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.

matrixwebtech
Aug 16, 2014, 5:56 PM
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).M argins("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).Borde r(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(fa lse)
.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).LayoutConfi g(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(fal se)
.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).LayoutCon fig(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();
}

Daniil
Aug 18, 2014, 4:22 PM
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.

matrixwebtech
Aug 19, 2014, 4:23 AM
Ok,
I set


.AutoScroll(true)

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

this can be close now.