smart-window as floating data input form?

[davout]

I want to  add a floating window to my Angular app that a user can employ for data entry.     I have the main window displaying a table of entries.  when the user clicks on an entry in the table I want the floating window to appear to allow data entry/update on the selected entry
Is the ‘<smart-windows>’ component the right choice for this requirement?
The floating window should

• Be able to repositioned by the user
• Aligned to a side of the container parent
• resizable

 
 

[yavordashew]

Hi davout,
For you case the ‘<smart-window>’ component will be suitable for your requirements.

• The smart-window component has the option to be repositioned by the user by ‘drag & drop’ .
• Also the component can be positioned inside a container parent as shown in this demo: https://www.htmlelements.com/angular/demos/window/inside-container/ or you can position it by using CSS to position it according to your needs inside the container as shown in the code snippet below:

/* This will position the window in the top left corner of the container */
.smart-window:not(.smart-container){
top: 0;
left: 0;
}

• ‘smart-window’ can be resized in different modes demonstrated in this demo: https://www.htmlelements.com/angular/demos/window/resizing/

Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[davout]

Thanks…
 
How would I position the smart window so that it is aligned to the right edge of the containing component and centered vertically within the containing component?

[yavordashew]

Hi davout,
I have another code snippet for your requirements.
With adding the following code it will position the window inside the container to the right edge and it will be centered vertically within the container.
Note that by default the ‘<smart-window>’ component will be centered vertically without adding additional code.
.smart-window:not(.smart-container){
right: 0 ;
margin-left: auto;
}
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/
 

[Author]

Posts