Search
Other Modals questions
Forum

Is there a padding command for modals? If so, what is the syntax?

Patrick Finegan's Avatar Patrick Finegan
I would like to open a Contact form as modal, but the RSJoomla form extension does not include left margins or paddings for a form's title and introductory text. It assumes the form's container already contains some white space. See the Submit a Bug Report link on the bottom right of scnylab.org/j40/index.php/contact . It opens the bug reporting form as modal, but the title and intro text need padding. The generic Contact form, by contrast, is not modal ( scnylab.org/j40/index.php/contact ) but has plenty of white space to the left of its title because it is built into the template. Thank you in advance for your kind assistance.
Peter van Westen's Avatar Peter van Westen ADMIN
That is down to the css styling of the 'component' subtemplate of your template.
If you cannot solve it yourself, you'll need to ask the template developers for help.

Seeing the content is in an iframe (its own url), Modals cannot affect the styling inside it.
Please post a rating at the Joomla! Extensions Directory
Patrick Finegan's Avatar Patrick Finegan
Actually, it was easy-peasy after publishing the form as a module (all major form component vendors have plugins to publish their forms as modules).
<h4 style="margin-bottom: 0; padding-bottom: 0;">
Submit a Bug Report
</h4>
<p style="font-size: 90%; color: #000000;">⚙ 
{modal content="submit-bug-form" width="75%" height="98%" theme="dark"}
Bugs, Mistakes, Typos, Dead Links
{/modal}
</p>

<div style="margin-left: 10px;">
{modalcontent submit-bug-form}
{module id="130"}
{/modalcontent}
</div>
Peter van Westen's Avatar Peter van Westen ADMIN
Yes, that works too.
Please post a rating at the Joomla! Extensions Directory
Patrick Finegan's Avatar Patrick Finegan
There are a couple wrinkles: (1) the Captcha doesn't appear (Can't click Submit if the Captcha is mandatory), and (2) the Submit button closes the modal window, regardless of whether the form is filled in correctly or contains errors.

You only see the highlighted errors if you re-open the form by clicking on the "Submit a Bug Report" link that opened the modal window the first time. Similarly, even if the form is filled in correctly, you don't see the automated acknowledgement ("Thank you for submitting... Here is what we received... We will get back to you shortly.")unless you re-click on the link opening the modal window.

As attempted workarounds, I disabled the Captcha and added the command on-closed="alert('Thank you for...');", but the latter never popped up. So, I tried to force the modal window to stay open and to disregard the "finality" of the Submit button.
<h4 style="margin-bottom: 0; padding-bottom: 0;">Submit a Bug Report</h4>
<p style="font-size: 90%; color: #000000;">⚙ 
{modal content="submit-bug-form" width="75%" height="98%" theme="dark"  show-close-button="false" close-on-outside-click="false" keyboard-navigation="false")}
Bugs, Mistakes, Typos, Dead Links
{/modal}
</p>

<div style="margin-left: 10px;">
{modalcontent submit-bug-form}
<h5>
<span style="color:red;">
IMPORTANT: 
</span>
You can only close this popup form with this button:&nbsp;&nbsp;
<a class="button button-gradient" onclick="RegularLabs.Modals.close();">
Close this Modal
</a>
</span>
</h5>

{module id="130"}

{/modalcontent}
</div>
That only worked partially. The Close Modal button doesn't close the window but the Submit button still does. However, the close-on-outside-click="false"
and keyboard-navigation="false" commands do indeed work. Oh well, the form will remain non-modal.
You can only post on the extension support forum if you have an active subscription and you log in

Buy a Pro subscription