css styles and theme missing, when using window-widget with angularjs

10 posts, 0 answers
  1. Werner Haltner
    Werner Haltner avatar
    20 posts
    Member since:
    Jun 2006

    Posted 14 Dec 2015 Link to this post

    i use the the window widget and when the window is active/open - there are no css styles available attached to the content template inside the window.

    even the bootstrap theme is not available inside the window widget.

    i simply open the window like this:
    <div id="win1" kendo-window="windowWidget" k-options="windowWidget"></div>

    ... inside a view, in which the boostrap css files are available. 

     

    the config object looks like this:
    windowWidget= {
                width: "80%",
                height: "80%",
                modal: true,
                visible: false,
                title: "lalalal",
                actions: ["Maximize", "Close"],
                animation: {
                    close: false,
                    open: false
                },
                content: "./././window.view.html"
            }

    do i miss something inside the config object?

     

    thanks
    werner

                                

  2. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 16 Dec 2015 Link to this post

    Hi Werner,

    The provided code looks OK.

    The Window is moved in the DOM by default, so CSS selectors, which rely on specific element hierarchy, may not work as expected.

    http://docs.telerik.com/kendo-ui/web/window/overview#html-structure-and-dom-placement

    Also, if there is a JavaScript error on the page, widgets inside the Window content area may not be initialized.

    If the problem persists, we may need a live URL or a runnable example in order to check what is going on.

    Here is a similar demo, which works as expected:

    http://demos.telerik.com/kendo-ui/window/ajax

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Werner Haltner
    Werner Haltner avatar
    20 posts
    Member since:
    Jun 2006

    Posted 17 Dec 2015 Link to this post

    hi dimo

    thank you for your answer. 

    i have no js errors on the page. so initialization works fine.
    the problem is now:
    - how can i use/access the bootstrap styles inside the window? among other things I need the bootstrap grid system...
    - how can i set the kendo theme which is already set in the main window?

     

    regards,
    werner

  5. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 21 Dec 2015 Link to this post

    Hi Werner,

    Judging by the provided information so far, the Kendo UI Window is NOT using an iframe. From this point of view, the Window contents and the main web page are all part of the same web document, so both the Bootstrap styles and the Kendo UI theme is already available for the Window contents.

    Can you explain in more detail what exactly you are trying to do and how does the Window prevent you from achieving the desired goal?

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Werner Haltner
    Werner Haltner avatar
    20 posts
    Member since:
    Jun 2006

    Posted 21 Dec 2015 in reply to Dimo Link to this post

    Hi Dimo

    Thank you for your answer.

    I have a html view with a controller attached like this:
    <div ng-controller="ABC-Controller"></div>

    Inside this div-element i have the kendo-window-widget, like this:
    <div id="win" kendo-window="sampleWindow" k-options="sampleWindowOptions"></div>

    In the "ABC-Controller" i have this:
    sampleWindowConfigOptions = {
                width: "80%",
                height: "80%",
                modal: true,
                visible: false,
                title: "Hochladen",
                actions: ["Maximize", "Close"],
                animation: {
                    close: false,
                    open: false
                },
                content: "./././window.view.html"
            }

            // $scope
            sampleWindow = () => {
                this.$scope.sampleWindow.center().open();
            }

     

    And my window html file (window.view.html) use his own controller (i need a new, separate controller for this issue)
    <div ng-controller="DEF-Controller" class="container-fluid">
        <h1>{{samplePageTitle}}</h1>
     ...
    </div>

    So, in this window/div i have no Boostrap-CSS-Styles and kendo-ui itself use the default theme.
    but i set/use the bootstrap theme.

    the angular controllers work fine. the only thing is, that i have no bootstrap available and not the kendo theme that i set before.
    i hope this is explained in more detail.

    regards,
    werner

  7. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 23 Dec 2015 Link to this post

    Hi Werner,

    I am afraid it is still unclear what the problem is and what triggers it. It will be best if you provide a runnable example for me to take a look. Thank you.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Werner Haltner
    Werner Haltner avatar
    20 posts
    Member since:
    Jun 2006

    Posted 23 Dec 2015 Link to this post

    Dear Dimo,

    Please open this link: http://dojo.telerik.com/OxUmA

    Add via the developer tools (Edit as HTML) some specific inline bootrap elements to 
    this file/conent: ../content/web/loremIpsum.html

    Content after that looks like this:

    <!-- should be bootraped -->
    <h1>test h1</h1>
    <a class="btn btn-default" href="#" role="button">Link</a>
    <button class="btn btn-default" type="submit">Button</button>
    <!-- should be bootraped -->

    <p class="ng-scope">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tortor
      diam, cursus id sodales non, ornare eget arcu. Aenean ullamcorper
      scelerisque libero, vitae blandit felis viverra in. Sed tempus malesuada
      tincidunt. Curabitur fringilla orci in viverra adipiscing. Aliquam nec
      tempor arcu, ac molestie odio. Sed in odio nec nisi condimentum
      accumsan. Maecenas iaculis, arcu eu lobortis cursus, sem quam tristique
      libero, vel auctor arcu leo sit amet risus. Phasellus in sem gravida,
      laoreet nunc gravida, dictum velit.
    </p>

    <p class="ng-binding ng-scope">
      Here's an Angular expression: Hello from Controller!.
    </p>

     

    As you can see, the buttons, the h1, the grid, etc. are not set with Bootstrap Styles !? 


    Regards,
    Werner
  9. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 23 Dec 2015 Link to this post

    Hello Werner,

    Is this what you are after?

    http://dojo.telerik.com/UmucE

    You need to register the Bootstrap stylesheet. The Kendo UI themes do not style generic HTML content, unless you add some CSS classes manually:

    http://docs.telerik.com/kendo-ui/web/styles-and-layout/appearance-styling#primitives

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Werner Haltner
    Werner Haltner avatar
    20 posts
    Member since:
    Jun 2006

    Posted 23 Dec 2015 Link to this post

    Hi Dimo

     "You need to register the Bootstrap stylesheet. The Kendo UI themes do not style generic HTML content, unless you add some CSS classes manually"
    => I'v allready done this. I use the bootstrap theme for the application

     

    "Is this what you are after?"
    => Yes. But you have the whole html content inside the kendo-window div. That's not what i need.
    What happens when you use the config-option "k-content" ? Like this:
    k-content="{ url: '../content/web/loremIpsum.html' }"

    then, its not working anymore. that's the problem.

     

    regards,
    werner

  11. Vasil Yordanov
    Admin
    Vasil Yordanov avatar
    43 posts

    Posted 24 Dec 2015 Link to this post

    Hello Werner,

    What are the contents of the html file you are trying to load? If it is a full HTML file with the appropriate DOCTYPE, <html>, <head>,  <body> tags, you need to load the page with k-iframe="true" attribute set to the window widget.

    Here is a sample dojo: http://dojo.telerik.com/@yordanov/Uyuga

    In case the HTML file contains only generic html content, everything should work as in the example provided by Dimo.

    In other words, if willing to load a standalone HTML file in Kendo UI Window, one needs to set the iframe option to true. You can read more about this in the Kendo UI Window documentation.

    Regards,
    Vasil Yordanov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready