Notes by JDeveloper for JDeveloper
Once you master it, you're gonna like it

"Remove" that POP UP in iJoomla's Guru

Written by Viktor Iwan

iJoomla Guru's is one of the best Learning Management System (LMS) available in Joomla. So if you want to build the next udemy ? i think Guru is one of the way, it's on the right track but still far for a complete out of the box experience. In this article i will show you one of iJoomla's problem in my perspecitve, and that is User Interface when managing course.

*) Last Tested on Guru V3.2.0.1

Here's what the original screen looklike :

 

It's kind a awful, when a half screen POP-UP appears and it reload another POP-UP... and looks... three scrollbars in the POP-UP. I don't know about you, but for me, this workflow is bit really hurting the usability aspect when managing course, can you imagine typing when you have to scroll in here-and-there in a small screen on wide area ?

 

Fortunately I found a workaround !

After strugling for an hour, i finally found temporary solution where i can hack the CSS to solve this problem.

1. You need to open g_admin_modal.css in /administrator/com_guru/css/

2. Replace this following css:

div#myModal{
border-radius: 6px 0 6px 6px !important;
left: 100px;
margin-left: 0;
position: fixed;
right: 100px;
width: auto;
}

 Become:

div#myModal{
border-radius: 6px 0 6px 6px !important;
left: 0px;
margin-left: 0;
position: fixed;
right: 0px;
width: auto;
top:0px;
} 

-----------------

 

div#myModal .modal-body{
	margin: 0;
}

Become

div#myModal .modal-body{
	margin: 0;
	height: 9999px;
	max-height: 9999px;
}
 

------------------

 

 

/*div#myModal iframe{
	width: 100%;
	min-height: 380px;
}*/ 

Become:

 
div#myModal iframe{
	width: 100%;
	min-height: 9999px;
}

And viola ! you just simulate the POP-UP just like a full-screen page !

And hope one of iJoomla's guru developer will visit this page and agree with this approach instead the current one