[CLOSED] Form & Dialog Styles

  1. #1

    [CLOSED] Form & Dialog Styles

    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...
    Click image for larger version. 

Name:	ExtForm.jpg 
Views:	16 
Size:	15.8 KB 
ID:	24457

    My Form - there is no gray band across the bottom for the button background...
    Click image for larger version. 

Name:	MyForm.jpg 
Views:	14 
Size:	22.3 KB 
ID:	24458

    Ext Mvc Dialog - the gray band at the bottom stretches right across form...
    Click image for larger version. 

Name:	ExtDialog.jpg 
Views:	15 
Size:	11.3 KB 
ID:	24459

    My Dialog- there is no gray band across the bottom for the button background...
    Click image for larger version. 

Name:	MyDialog.jpg 
Views:	19 
Size:	15.6 KB 
ID:	24460
    Last edited by fabricio.murta; Mar 22, 2016 at 11:28 PM. Reason: no user feedback for 7+ days
  2. #2
    Maybe some non-Ext.NET css on your page is affecting the style of those elements?
    Geoffrey McGill
    Founder & CEO
  3. #3
    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>
  4. #4
    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.
    Geoffrey McGill
    Founder & CEO
  5. #5
    Hello,
    I have created and uploaded a sample project to google drive...
    https://drive.google.com/file/d/0B7D...ew?usp=sharing
  6. #6
    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:
    Click image for larger version. 

Name:	01-pagepic.png 
Views:	15 
Size:	10.6 KB 
ID:	24466

    This has been run in a blank project as well.

    Another thing you can try is building Ext.NET Examples Explorer on your side and seeing if it gets the css styling.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  7. #7
    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.
  8. #8
    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 to ensure the fresh css version gets loaded by the browser.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] FileUploadField as File Dialog
    By Argenta in forum 3.x Legacy Premium Help
    Replies: 12
    Last Post: Dec 23, 2015, 6:42 AM
  2. File Upload Dialog
    By davidhoyt in forum User Extensions and Plugins
    Replies: 39
    Last Post: May 27, 2013, 6:19 PM
  3. How to set the Gif for the Wait dialog
    By paddy in forum 1.x Help
    Replies: 0
    Last Post: Aug 04, 2011, 11:24 AM
  4. [CLOSED] Save Dialog v0.8.1
    By cobiscorp in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 10, 2010, 9:29 AM
  5. [CLOSED] Save as dialog?
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 01, 2009, 12:53 PM

Tags for this Thread

Posting Permissions