[CLOSED] Ext.Net integration with existing CSS styles

  1. #1

    [CLOSED] Ext.Net integration with existing CSS styles

    Hi,

    I have developed a simple web application without any Ext.net components; I'm using bootstrap 4 and I have also some custom google fonts.

    In some pages now I would like to insert a GridPanel to show some tabular data and in some cases the user can edit row data using a modal window with inside a FormPanel. I'm using Ext.Net MVC.

    The problem I'm facing now is this:

    When I use
    @(Html.X().ResourceManager().Locale("it-CH"))
    every web site component is messed up: different size, different fonts,...

    This because Ext.Net attach a lot of classes to the body of the page. I know that I can create special css rule for every component to apply again the bootstrap styles but I don't think is a good solution.

    I think it would be better if I could "scope" Ext.Net styles just to a part of the page, maybe to a DIV.

    I've done some attempts using ResourcePlaceOrder to modify the order of the styles inclusion with no luck.

    Thanks for your help.

    Best regards
    Last edited by fabricio.murta; Sep 26, 2018 at 2:06 PM.
  2. #2
    Hello, @aguidali!

    The problem only triggers when you enable the localization? I'm not sure I fully understand your issue, as every Ext.NET component is bound to several theme CSS classes in order for them to show correctly... but maybe what you want is to use .Theme(Ext.Net.Theme.None), so that absolutely no CSS is defined to the page and you have to define every CSS class in order to format your component.

    This would be equivalent to telling Ext.NET not to try to load any of its internal themes, that you are handling the theme formatting from external sources, by yourself. You can't set individual themes, but you can nest separate pages (not partial views, rather iframes) with different themes.

    So, one way to use a different theme (or "none", so you can customize it all) is, say, if you have a form within a window, that the window would load the form from another view, which would define said theme.

    I hope this helps, if you feel the answer does not help at all, please fill us in with more details so we can better understand your needs.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello Fabricio,

    I try to explain better the issue.

    I've done a simple example to reproduce.
    This is the _Layout file:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=1,initial-scale=1,user-scalable=1" />
        <title>@ViewBag.Title</title>
    
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.0/css/bootstrap-select.min.css" />
        @Styles.Render("~/Content/css")
    
        <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700" rel="stylesheet" />
    
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.0/js/bootstrap-select.min.js"></script>
    
        @RenderSection("scripts", required: false)
    </head>
    <body>
        @*@(Html.X().ResourceManager().Locale("it-CH").Theme(Theme.Triton))*@
        @*@(Html.X().ResourceManager().Locale("it-CH").Theme(Theme.None))*@
    
        <section id="logo" class="container">
            <a href='@Url.Action("Index", "Home")'>LOGO</a>
        </section>
    
        <hr />
    
        <section class="container pt-5">
            @RenderBody()
        </section>
    
        <footer class="footer py-3">
            <div class="container">
                <div class="row">
                    <div class="col-5">
                        <h5>Customer name</h5>
                        <p class="d-block mb-3 text-muted">Customer description</p>
                        <ul class="list-unstyled text-muted">
                            <li>Address sss</li>
                            <li>6900 City</li>
                        </ul>
                        @*<small class="d-block mb-3 text-muted">&copy; </small>*@
                    </div>
                    <div class="col-4">
                        <h5>Contatti</h5>
                        <ul class="list-unstyled text-muted">
                            <li>Tel: 123 456 45</li>
                            <li>Fax: 123 456 78</li>
                            <li>Email: info@customer.ch</li>
                            <li>Orari: 8.00-12.00/14.00-18.00</li>
                        </ul>
                    </div>
                    <div class="col-3">
                        <h5>Collegamenti</h5>
                        <ul class="list-unstyled">
                            <li><a class="text-muted" href='@Url.Action("Index", "Home")'>Pagina principale</a></li>
                            <li><a class="text-muted" href='@Url.Action("Help", "Home")'>Aiuto</a></li>
                            <li><a class="text-muted" href='@Url.Action("Disclaimer", "Home")'>Disclaimer</a></li>
                        </ul>
    
                        <a href="http://www.we.ch" target="_blank" class="text-dark"><small> <em>Powered by:</em> >Firm name </small></a>
                    </div>
                </div>
            </div>
        </footer>
    </body>
    </html>
    This is the Index:

    @{
        ViewBag.Title = "Home Page";
    }
    
    
    <section>
        <div>
            <h2>Login</h2>
        </div>
    </section>
    This is the Global.asax:
            protected void Application_Error(object sender, EventArgs e)
            {
                // Get the exception object.
                Exception exc = Server.GetLastError();
                Server.ClearError();
            }
    If you execute this simple example you could see a simple page with a header and a footer with specific font and size.


    Test1:
    Try to uncomment this line:
    @(Html.X().ResourceManager().Locale("it-CH").Theme(Theme.Triton))
    The page is completely different. And I would like to avoid this. I understand that Ext.Net requires css to work properly but maybe there is a way to keep the other page elements untouched.

    Test2:
    Try to uncomment this line:
    @(Html.X().ResourceManager().Locale("it-CH").Theme(Theme.None))
    Put a breakpoint in global.asx Application_error.
    When you execute the page an erron is thrown; after taht the page is displayed properly but is very slow.

    Do you mean that an Iframe could help?

    Best regards
    Andrea
  4. #4
    Hello Andrea,

    Ext.NET CSS styles are all prefixed with x-. So probably you are having conflicts with that.

    An IFrame could not be the most elegant solution, but it would ensure a separation, layout-wise, between the two views, so the CSS styling within the IFrame will be completely independent from the outer page.

    I believe one or more of the extensions you are using has conflicting CSS style naming with Ext.NET, and that's not much that can be done about it, we just can't control how the other frameworks would intervene with Ext.NET.

    I will take a look on the test case you provided and see if I can identify anything else that could help. Hope the information above helps in the meanwhile.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hello again, Andrea!

    I've taken a look on your test case. You could simplify it even more, right? No @sections and all, just a plain page with some styling from maybe just bootstrap.

    Anyway, what happens is that, although Ext.NET's CSS classes are all x- prefixed, there is a code that runs on load that just binds some CSS classes (x-prefixed still) to the main HTML <body> element.

    Notwithstanding, there were at least a couple threads in Sencha forums (from our underlying ExtJS framework -- Ext JS) with the same or very similar complaint you filed here. Interesting enough, the responses I seen were not clear about it.

    But when I dug up the code that added this, I could find there were a simple setting that could be done to avoid this. It is just about setting an Ext JS variable to true and it would no longer fiddle with the <body /> element.

    The setting would be Ext.scopeCss. See more about it in the official documentation of Ext JS on Ext.scopeCss.

    In short, just add this line to the <head /> block of the page, and it should be good:

    <script type="text/javascript">Ext.scopeCss = true;</script>
    I believe you'd find no issue on adding this line via a @layout or a @header razor section on the page.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  6. #6
    Hi Fabricio,

    the issue was related to the css classes added to the body element.

    And the line of code that you suggest is working perfectly.

    <script type="text/javascript">Ext.scopeCss = true;</script>
    Thanks a lot

    Best regards
    Andrea
  7. #7
    Hello Andrea! Glad it helped, and thanks for the feedback!

    As a piece of advice, tread with caution while mixing non-ext with Ext.NET content. Ext.NET usually handles very well layouts within its own parts, but if you mix up third-party or generic HTML within Ext.NET components, havoc may break, and there's not much we can do to help. There's simply too many different libraries (javascript libs), libraries behavioral changes in a page dynamics, we just can't foresee and control over it, so especially if you are nesting different technologies (a bootstrap content within an Ext.NET panel), proceed with care.

    Most of the times (if not all), corrections are possible, but that would require sharp js debugging skills to all javascript in general, the specific lib and Ext.NET (and Ext JS), in order to figure them out.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 5
    Last Post: Dec 06, 2012, 3:42 PM
  2. tighter integration between coolite and visual studio
    By bsmokeman in forum Open Discussions
    Replies: 3
    Last Post: Feb 06, 2012, 10:51 PM
  3. Replies: 1
    Last Post: Apr 12, 2009, 10:04 AM
  4. Spring.NET validation integration
    By dlouwers in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jan 16, 2009, 11:02 AM
  5. Integration with Web Part Personalization
    By jallenby in forum 1.x Help
    Replies: 2
    Last Post: Nov 05, 2008, 5:30 AM

Tags for this Thread

Posting Permissions