Styling around fields in modal pop-up is transparent in LR7

[Mohammed Rawoof Shaik, modifié il y a 6 années.]

Hello LR Community,

Background:
I had developed a portlet on LR6.2. I upgraded the portlet using the Liferay Code Upgrade Tool, and after resolving few dependency conflicts in the pom.xml the portlet deployed successfully.

In this portlet, I developed a view with a modal, with fields that drive advanced search logic. The fields were developed using AUI taglibs, i.e., aui:input, aui:select, aui:option, etc... Further, I've enclosed these input fields in aui:col, aui:row and aui:container for good layout. Below is a sample code that closely resembles by work.

<div id="advanced-search-bb" hidden="true">
			<div id="advanced-search-cb">
				<aui:container>
					<aui:row>
						<aui:col span="6">
							<aui:select>...<aui:option />...</aui:select>
						</aui:col>
						<aui:col span="6">
							<aui:input />
						</aui:col>
					</aui:row>
					...
				</aui:container>
			</div>
		</div>

I trigger this modal with a button onclick tied with the below JS code,

<aui:button value="Advanced" onClick="advancedSearch()" />
<aui:script>
function advancedSearch() {
		debug('&gt;&gt; advancedSearch()');
		
		AUI().use('aui-base', function(A) {
			
			A.one("#advanced-search-bb").set('hidden', false);
			
			YUI().use('aui-modal', function(Y) {
				new Y.Modal({
		    	    	    	    boundingBox: '#advanced-search-bb',
		    	    	    	    contentBox: '#advanced-search-cb',
		    	    	    	    headerContent: '<h4>Advanced Search</h4>',
		    	    	    	    centered: true,
	    		    	    	    modal: true,
		    	    	   	     resizable: false,
		    	    	    	    draggable: true,
				}).render();
		    });

		});
		
		debug('&lt;&lt; advancedSearch()');
	}
</aui:script>

The console log have no errors. See attached 'console_logs_modal.PNG'.

Issue:
The modal in 6.2 was rendering well. See attached 'modal 6_2.PNG'.
The same modal in 7 has a transparent background. See attached 'modal 7.PNG'.

Question:

• Does this have to do something with CSS styling in LR7?
• How do I fix this issue with transparency?

[Massimo Bevilacqua, modifié il y a 6 années.]

Hi,

I don't know if there is a better way, but I solved the problem adding a style to container

[Mohammed Rawoof Shaik, modifié il y a 6 années.]

Hi Massimo,

Thanks for the reply. This does solve the issue partially. This fixes the background, but the content of the page is not disabled. The page is a table with search results. See attached 'search_page.PNG'. When the modal pops-up the background isn't disabled, i.e., buttons in the background are clickable and the page content overlaps with the modal content. See attached 'modal_page_not_disabled.PNG'.

[Massimo Bevilacqua, modifié il y a 6 années.]

Hi Mohammed,

I surrounded your div with class "yui3-skin-sam" as raccomended in alloy page,

 

<div id="advanced-search-bb" hidden="true" style="background-color:#fff;">
             <div id="advanced-search-cb">
                 <aui:container>
                     <aui:row>
                         <aui:col span="6">
...</aui:col></aui:row></aui:container></div></div>

and as you can see in the images below, in the first screen without the class the buttons in the page are not disabled



with the class they are disabled:



For the page overlapping it is important the position of your modal div inside the page...look at the images below, in this case I put the modal div at the top of the page, in the previously images I putted the div at the bottom of the page.
In the browser check if your form uses "form-wrap, form-group..." in this cases check the z-index because in one of my cases

<aui:input name="search" type="text" label="" prefix="Search" placeholder="title,author or genre" />

the "prefix" created a form group and it has z-index:2 so it was "over" the modal



By the way...if you can adapt data table to your project you don't need to add additional style to make table looks good
datatable

[Mohammed Rawoof Shaik, modifié il y a 6 années.]

Hi Massimo,

Thanks for the insight. I worked in my cave for a while and here's what I got from your recommendations,

• Solution 1: Surrounded div with class "yui3-skin-sam", suggested in AlloyUI's modal - This fixed the issue
• Solution 2: Integration with Datatables - I faced an issue and have posted another thread for it here.