Jump to content

Archived

This topic is now archived and is closed to further replies.

asha23

Adjusting size of modal window from the pl_modal shortcode

Recommended Posts

asha23    0
asha23

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
James B    436
James B

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;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Aires+    258
Aires
Thank you for this ;)

Sent from my Lumia 900 using Tapatalk

ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
Frederic    3
Frederic

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
Danny    1,327
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Frederic    3
Frederic

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
Danny    1,327
Danny

You will want to use:

 

#site .modal {

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

width: 1000px;


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Frederic    3
Frederic

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
Frederic    3
Frederic

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
Danny    1,327
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Frederic    3
Frederic

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×