Foros de discusión
Styling around fields in modal pop-up is transparent in LR7
Mohammed Rawoof Shaik, modificado hace 6 años.
Styling around fields in modal pop-up is transparent in LR7
Junior Member Mensajes: 37 Fecha de incorporación: 25/09/16 Mensajes recientes
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.
I trigger this modal with a button onclick tied with the below JS code,
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:
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('>> 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('<< 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?
Archivos adjuntos:
Massimo Bevilacqua, modificado hace 6 años.
RE: Styling around fields in modal pop-up is transparent in LR7
Regular Member Mensajes: 210 Fecha de incorporación: 27/12/16 Mensajes recientes
Hi,
I don't know if there is a better way, but I solved the problem adding a style to container
I don't know if there is a better way, but I solved the problem adding a style to container
<div id="advanced-search-cb"> <aui:container style="background-color:#fff"> <--- if you have a css file maybe put this inside of it ...</aui:container></div>
Mohammed Rawoof Shaik, modificado hace 6 años.
RE: Styling around fields in modal pop-up is transparent in LR7
Junior Member Mensajes: 37 Fecha de incorporación: 25/09/16 Mensajes recientes
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'.
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'.
Archivos adjuntos:
Massimo Bevilacqua, modificado hace 6 años.
RE: Styling around fields in modal pop-up is transparent in LR7 (Respuesta)
Regular Member Mensajes: 210 Fecha de incorporación: 27/12/16 Mensajes recientes
Hi Mohammed,
I surrounded your div with class "yui3-skin-sam" as raccomended in alloy page,
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
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
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, modificado hace 6 años.
RE: Styling around fields in modal pop-up is transparent in LR7
Junior Member Mensajes: 37 Fecha de incorporación: 25/09/16 Mensajes recientes
Hi Massimo,
Thanks for the insight. I worked in my cave for a while and here's what I got from your recommendations,
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.