JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Window › smart window not displaying footer
Tagged: window
- This topic has 5 replies, 3 voices, and was last updated 3 years, 7 months ago by
admin.
-
AuthorPosts
-
January 5, 2021 at 9:39 am #101285
davout
MemberHello,
I am using the ‘smart-window’ component for the first time and cannot get the component to display a footer template<smart-window label="{{taskEditService.title}}" [opened]="visible" [windowParent]="'body'" [headerButtons]="['close','minimize','pin','collapse']" [footerTemplate]="'footerTemplate'" [footerPosition]="'bottom'" (onClose)="taskEditService.hide()" > <template id="footerTemplate"> <smart-button class="flat">Save</smart-button> <smart-button class="flat">Restore</smart-button> </template> </smart-window>
I have tried following the examples on your Angular/demo page, but none of them work
January 5, 2021 at 1:50 pm #101286yavordashew
MemberHi davout,
When using the ‘smart-window’ component you should set the ‘opened’ property to a boolean value.
If you want the window to be visible you can set the value to ‘true’.
Also the ‘template’ must not be in the ‘smart-window’ tag.You should place the ‘template’ after your <app-root> tag with its corresponding id.
I have made a little code snippet for you with the corrections you need to make.
For your app.component.html file :
<smart-window
label=”{{taskEditService.title}}”
[opened]=”true”
[windowParent]=”‘body'”
[headerButtons]=”[‘close’,’minimize’,’pin’,’collapse’]”
[footerTemplate]=”‘footerTemplate'”
[footerPosition]=”‘bottom'”
(onClose)=”taskEditService.hide()” >
</smart-window>
In your main.html (main.html name is just for example) after the <app-root> tag, like this:
<body>
<app-root>Loading… </app-root>
<template id=”footerTemplate”>
<smart-button class=”flat”>Save</smart-button>
<smart-button class=”flat”>Restore</smart-button>
</template>
</body>
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/January 5, 2021 at 2:45 pm #101287davout
MemberThe “opened” property is linked to a component property called “visible”. The smart window is being displayed, but there is no footer element displayed within the window. I have included the ‘smart-window’ element as content within an app component. The latest code is shown below, and this still does not display the footer area as expected
<smart-window label="{{formTitle}}" [opened]="visible" [windowParent]="'body'" [resizeIndicator]="true" [resizeMode]="'both'" [headerButtons]="['close','minimize','pin','collapse']" [footerTemplate]="'footerTemplate'" [footerPosition]="'bottom'" (onClose)="taskEditService.hide()" > <div> <smart-input [placeholder]="'task name'"></smart-input> </div> <div> <smart-button class="flat">Today</smart-button> <smart-button class="flat">Tomorrow</smart-button> <smart-button class="flat">This week</smart-button> </div> <div> <smart-button class="flat">Next week</smart-button> <smart-button class="flat">This month</smart-button> <smart-button class="flat">Next month</smart-button> </div> </smart-window> <template id="footerTemplate"> <smart-button class="flat">Save</smart-button> <smart-button class="flat">Restore</smart-button> </template> Is there a way to post screen shots via this forum?
January 5, 2021 at 3:17 pm #101288yavordashew
MemberHi davout,
As I mentioned before the reason for the footer not to be displayed is that you have included the footer template inside your app.component.html file.
From the code you have sent us from your last message I can suggest that you have added the footer template inside your app.component.html file.
In order for the footer to be displayed you have to include it in your application root html file, for example: index.html.
There you have to include the footer template after your ‘<app-root></app-root>’ tag.
Yes, there is an option to send images via the IMG button when replying in ‘Text’ mode or in ‘Visual’ mode above the textfield there is icon for uploading images.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/January 5, 2021 at 6:25 pm #101289davout
MemberRequiring templates to be included outside of a component at the app root level would seem to break all the normal rules associated with component design!!
January 6, 2021 at 7:15 am #101290admin
KeymasterHi davout,
In Angular you cannot put template html tag within angular view due to the reason that Angular Views use HTMLTemplate. It is not necessary to try to use template tag for window footer. You can define a footer within the window’s content.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/ -
AuthorPosts
- You must be logged in to reply to this topic.