Jump to content


Photo
- - - - -

Adjusting size of modal window from the pl_modal shortcode


  • Please log in to reply
11 replies to this topic

#1 asha23

asha23

    Newbie

  • Members

  • 5 posts
  • Country: Country Flag

Posted 24 January 2014 - 03:35 PM

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?



#2 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 25 January 2014 - 09:39 AM

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


#3 Aires

Aires

    Advocate

  • Members

  • 267 posts
  • LocationAlabama
  • Framework Version:DMS-2
  • Country: Country Flag

Posted 25 January 2014 - 01:36 PM

Thank you for this ;)

Sent from my Lumia 900 using Tapatalk

#4 Frederic

Frederic

    Super Member

  • Members

  • 186 posts
  • Country: Country Flag

Posted 15 February 2014 - 09:36 AM

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?


#5 Danny

Danny

    Is Awesome!

  • Moderators
  • 15242 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 16 February 2014 - 12:53 PM

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



#6 Frederic

Frederic

    Super Member

  • Members

  • 186 posts
  • Country: Country Flag

Posted 16 February 2014 - 03:42 PM

Thanks @Danny,

 

page is here

 

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



#7 Danny

Danny

    Is Awesome!

  • Moderators
  • 15242 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 16 February 2014 - 03:52 PM

You will want to use:

 

#site .modal {

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

width: 1000px;



#8 Frederic

Frederic

    Super Member

  • Members

  • 186 posts
  • Country: Country Flag

Posted 17 February 2014 - 02:14 AM

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


#9 Frederic

Frederic

    Super Member

  • Members

  • 186 posts
  • Country: Country Flag

Posted 17 February 2014 - 02:34 AM

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



#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 15242 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 17 February 2014 - 11:09 AM

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



#11 Frederic

Frederic

    Super Member

  • Members

  • 186 posts
  • Country: Country Flag

Posted 17 February 2014 - 11:30 AM

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/w...gest-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>


#12 Danny

Danny

    Is Awesome!

  • Moderators
  • 15242 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 17 February 2014 - 01:07 PM

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.