cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Want the oppurtunity to discuss enhancements to PTC products? Join a working group! X

Can I change the modal pop up location by css

SK_9989757
6-Contributor

Can I change the modal pop up location by css

I want to check if the modal popup location, that is center of the screen can be changed by any means?

ACCEPTED SOLUTION

Accepted Solutions

We do this using custom CSS on mashup level where navigation function is used.

Steps to reproduce:

  1. Define navigation function as ModalPopup
  2. View mashup and execute navigation
  3. Use devtools to inspect the html and find the id of the modal popup div 
    • JK_10164157_0-1710238423549.png
  4. Define the required position in the mashup custom CSS section (We also change the background blur opacity in this example):

 

.mashup-popup[id$='-2_navigationfunction-54-popup'] {
	left: 6px !important;
	top: 106px !important;
	position: absolute !important;
}

.mashup-popup[id$='-2_navigationfunction-54-popup'] .widget-bounding-box[id$='-2_navigationfunction-54-popup-bounding-box'] {
	width: auto !important;
	height: auto !important;
	position: absolute !important;
}

.mashup-popup-overlay {
	opacity: 0.25 !important;
}

 

 

Hope this helps.

View solution in original post

3 REPLIES 3

Hi @SK_9989757  Look at the below issue, looks similar to your issue, let us know if it does not match your use-case.

https://community.ptc.com/t5/ThingWorx-Developers/Border-Radius-to-Modal-Pop-ups/m-p/778073#M56806

We do this using custom CSS on mashup level where navigation function is used.

Steps to reproduce:

  1. Define navigation function as ModalPopup
  2. View mashup and execute navigation
  3. Use devtools to inspect the html and find the id of the modal popup div 
    • JK_10164157_0-1710238423549.png
  4. Define the required position in the mashup custom CSS section (We also change the background blur opacity in this example):

 

.mashup-popup[id$='-2_navigationfunction-54-popup'] {
	left: 6px !important;
	top: 106px !important;
	position: absolute !important;
}

.mashup-popup[id$='-2_navigationfunction-54-popup'] .widget-bounding-box[id$='-2_navigationfunction-54-popup-bounding-box'] {
	width: auto !important;
	height: auto !important;
	position: absolute !important;
}

.mashup-popup-overlay {
	opacity: 0.25 !important;
}

 

 

Hope this helps.

Much appreciated, really nice example!

Announcements


Top Tags