This is a migrated thread and some comments may be shown as answers.

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

9 Answers 622 Views
Window
This is a migrated thread and some comments may be shown as answers.
Werner Haltner
Top achievements
Rank 1
Werner Haltner asked on 14 Dec 2015, 02:10 PM

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

                            

9 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 16 Dec 2015, 03:58 PM
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!
0
Werner Haltner
Top achievements
Rank 1
answered on 17 Dec 2015, 09:45 AM

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

0
Dimo
Telerik team
answered on 21 Dec 2015, 10:05 AM
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!
 
0
Werner Haltner
Top achievements
Rank 1
answered on 21 Dec 2015, 10:55 AM

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

0
Dimo
Telerik team
answered on 23 Dec 2015, 11:46 AM
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!
0
Werner Haltner
Top achievements
Rank 1
answered on 23 Dec 2015, 01:55 PM
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
0
Dimo
Telerik team
answered on 23 Dec 2015, 03:36 PM
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!
0
Werner Haltner
Top achievements
Rank 1
answered on 23 Dec 2015, 03:45 PM

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

0
Vasil Yordanov
Telerik team
answered on 24 Dec 2015, 02:44 PM
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!
 
Tags
Window
Asked by
Werner Haltner
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Werner Haltner
Top achievements
Rank 1
Vasil Yordanov
Telerik team
Share this question
or