• 0

Adjusting size of modal window from the pl_modal shortcode

Question

Posted · Report post

Is there any way of adjusting the width and height of the Modal window from the [pl_modal] shortcode.

I see that there are a few options. But height and width aren't there. I think this would be very useful. Has anyone achieved a customisation or is this an undocumented feature already?

Share this post


Link to post
Share on other sites

11 answers to this question

  • 0

Posted · Report post

Hi there, the modal is preset with a max-height of 400px, it will respond to the content placed inside. Changing the max-height to min-height and giving it a figure you want it to display at then the modal will never go below that value. You can do the same with the width, just add the code into your css and save.

 

.modal-body {
    min-height: 600px;
    overflow-y: auto;
    padding: 21px;
    position: relative;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thank you for this ;)

Sent from my Lumia 900 using Tapatalk

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi james,

 

I have used the code above in custom css and it works very well for the height but not for the width ...

 

I have adjusted your code to:

 

 

.modal-body {
    min-height: 500px;
    min-width: 900px;
    overflow-y: auto;
    overflow-x: auto;
    padding: 21px;
    position: relative;
}
 
 
Any insight?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Frederic - Can you provide a link to the page where the modal issue is please.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks Danny,

 

page is here

 

It is a test page. I tried the same code in media box on another page and same 'effect'

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You will want to use:

 

#site .modal {

left: 500px; // Must be half of the width value.

width: 1000px;

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks Danny,

 

I have used the two codes below but situation remains the same.

 

 

#site .modal {
left: 450px; // Must be half of the width value.
width: 900px;
}
 
.modal-body {
    min-height: 500px;
    min-width: 900px;
    overflow-y: auto;
    overflow-x: auto;
    padding: 21px;
    position: relative;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

FYI (that you have probably already understood :-):

 

all modals seem to be affected by the customisation.

 

This is the window that pops up on deleting one section - link

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I mean the code you used to add the modal to your site, was it HTML or the shortcode ?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ah, sorry,

 

It was both actually.

 

On the same page, there is one mediabox with the shortcode :

 

[pl_modal title="Title" type="btn" colortype="info" label="Click Me!"]
<iframe width="420" height="260" src="//www.youtube.com/embed/mv1TVpAyvfc" frameborder="0" allowfullscreen></iframe>

[/pl_modal]

 

 

and one with the HTML James gave in another thread :

 

 

<!-- Button to trigger modal -->
    <a href="#myModal" data-toggle="modal"><img src="http://seeduni.com/wp-content/uploads/2013/12/VBT-Paul-Hawkens-largest-mvment.jpg" alt="VBT-Paul-Hawkens-largest-mvment" width="500" height="354" class="aligncenter size-full wp-image-9315" /></a>
 
        <!-- Modal -->
        <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
        </div>
        <div class="modal-body">
<iframe width="420" height="260" src="//www.youtube.com/embed/mv1TVpAyvfc" frameborder="0" allowfullscreen></iframe>
        </div>
        <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        </div>
        </div>

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

OK, lets keep your issue to your other topic, as I am getting confused.

 

Basically there is a an issue with the HTML method, I think the best course of action would be to use a FancyBox or Lightbox plugin.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now