PDA

View Full Version : [CLOSED] Form & Dialog Styles



edip
Feb 27, 2016, 10:45 PM
Hello,
I am using Ext.Net.Mvc 4.0 Prerelease and the .Net Framework V4.6.1.

I am trying to figure out why my application forms and dialogs are not looking like the MVC Explorer dialogs and forms. I have used the same layout code as the example and have since changed it...

Ext.Net MVC Explorer Dialog-the gray button background band at the bottom stretches right across the form...
24457

My Form - there is no gray band across the bottom for the button background...
24458

Ext Mvc Dialog - the gray band at the bottom stretches right across form...
24459

My Dialog- there is no gray band across the bottom for the button background...
24460

geoffrey.mcgill
Feb 28, 2016, 1:10 AM
Maybe some non-Ext.NET css on your page is affecting the style of those elements?

edip
Feb 29, 2016, 9:52 PM
I have removed all other styling and the ext.net style sheets are the only ones on my page, but still the same result...



<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="/extjs/packages/theme_triton/build/resources/theme-triton-all-embedded-css/ext.axd?v=0" id="ext-theme" />
<link type="text/css" rel="stylesheet" href="/extnet/resources/css/extnet-all-embedded-css/ext.axd?v=0" id="extnet-styles" />
<script type="text/javascript" src="/extjs/ext-all-js/ext.axd?v=0"></script>
<script type="text/javascript" src="/extjs/packages/theme_triton/build/theme-triton-js/ext.axd?v=0"></script>
<script type="text/javascript" src="/extnet/extnet-all-js/ext.axd?v=0"></script>
<script type="text/javascript" src="/extnet/extnet-init-js/ext.axd?1d511065bb4f44ceb8324b60257d78c0"></script>
<meta name="viewport" content="width=device-width" />
<script src="/Scripts/Core.js"></script>
<script src="/Scripts/ThirdParty/JQuery/JQuery-1.9.1.min.js"></script>
<script src="/Scripts/ThirdParty/Uri.min.js"></script>
<script src="/Scripts/ThirdParty/JQuery/JQuery.Uri.min.js"></script>
<script src="/Scripts/UiScripts.js"></script>
<script src="/Scripts/ExtNetTools.js"></script>

</head>
<body>

</body>
</html>

geoffrey.mcgill
Mar 01, 2016, 2:21 AM
Can you post a simplified sample which demonstrates how to reproduce? If we can reproduce the issue locally, then we should be able to determine why the styling is different.

edip
Mar 01, 2016, 4:51 PM
Hello,
I have created and uploaded a sample project to google drive...
https://drive.google.com/file/d/0B7DjyvuiqD5NM1JYME44VzFpU2c/view?usp=sharing

fabricio.murta
Mar 01, 2016, 10:01 PM
Hello,

Your project is not working for me. I tried on both VS2013 and VS2015.

Can you try this code on a view and share your screenshot?



@{
ViewBag.Title = "index";
}
@Html.X().ResourceManager()

<h2>index</h2>

@(
Html.X().Window()
.Closable(false)
.CloseAction(CloseAction.Destroy)
.Resizable(false)
.Height(200)
.Icon(Icon.Lock)
.Title("Login")
.Draggable(false)
.Width(350)
.Modal(true)
.BodyPadding(5)
.Layout(LayoutType.Fit)
.Items(
Html.X().FormPanel()
.Layout(LayoutType.Form)
.Border(false)
.BodyStyle("background-color:transparent;")
.Items(
Html.X().TextField()
.ID("txtUsername")
.ReadOnly(true)
.FieldLabel("Username")
.AllowBlank(false)
.BlankText("Your username is required.")
.Text("Demo"),

Html.X().TextField()
.ID("txtPassword")
.ReadOnly(true)
.InputType(Ext.Net.InputType.Password)
.FieldLabel("Password")
.AllowBlank(false)
.BlankText("Your password is required.")
.Text("Demo")
)
)
.Buttons(
Html.X().Button()
.Text("Login")
.Icon(Icon.Accept)
.DirectEvents(de =>
{
de.Click.Action = "Login";
de.Click.Success = "this.up('window').close();";
de.Click.EventMask.ShowMask = true;
de.Click.EventMask.Msg = "Verifying...";
de.Click.EventMask.MinDelay = 1000;
de.Click.FormID = "#(return this.up('window').down('form');)";
})
)
)


Here's what I get:
24466

This has been run in a blank project as well.

Another thing you can try is building Ext.NET Examples Explorer (https://github.com/extnet/Ext.NET.Examples.MVC) on your side and seeing if it gets the css styling.

I hope this helps!

edip
Mar 02, 2016, 2:27 PM
Yes, that works fine for me in the same project as my previous post. So, somehow there is styling getting loaded in my page that is causing it to happen. I will have to strip it down and figure it out.

Thanks.

fabricio.murta
Mar 02, 2016, 3:04 PM
Hello @edip!

You probably may have some stylesheet files cached from your browser. In some situation they don't get updated even with a force page refresh, in such cases you may use a cache buster (http://webassets.readthedocs.org/en/latest/expiring.html) to ensure the fresh css version gets loaded by the browser.

I hope this helps!