We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Answered SOLVED: CSS for Ajax modal view window?

    • 32025
    • 305 Posts
    Dayton Web Design Reply #1, 11 years, 1 month ago
    I have been working on this for several hours, but I cannot get my modal view window to style any css. The items are pushed all the way against the left side of the page ,and my main stylesheet (that has these definitions) are not styling the page. I also tried adding a modal.css stylesheet with definitions and adding this to the blank template header that loads the AJAX window, but these styles did not carry over.

    I also found this stylesheet: assets/components/mxcalenders/themes/default/css/mxcalendar.css but these definitions are not in my modal window.

    Last, I went to the chunck: tplDetailModal and added some styling:
    <span class="mxModal">
<h2>[[+title]]</h2>
<p>[[+description]]</p>
<h4>[[+location_name]]</h4>
[[+map]]
</span>


    I then added the styling to the blank page stylesheet definitions but nothing happened.

    Since I cannot right click the modal window I cannot see what stylesheet it's loading. Is this because the window that is loading is AJAX? Where can I add the styles and definitions? I am missing something so easy here and don't know what it is.

    This question has been answered by charless. See the first response.

    [ed. note: charless last edited this post 11 years, 1 month ago.]
      Making the web a better place on site at a time! Dayton Web Design: http://www.dayton-web-design.com/
    • sottwell Reply #2, 11 years, 1 month ago
      You'll need something like the Firebug extension to Firefox to see the loaded modal window and where its styling comes from.
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 32025
        • 305 Posts
        Dayton Web Design Reply #3, 11 years, 1 month ago
        Quote from: sottwell at Mar 27, 2013, 03:35 AM
        You'll need something like the Firebug extension to Firefox to see the loaded modal window and where its styling comes from.

        Thank you. Apparently the Shadow box (AJAX Popup) inherits it's styles from this location: assets/components/mxcalenders/js/web/shadowbox/sa/shadowbox.css. In addition to the styling here for the shadowbox, you can set the size of the shadow box.

        I changed this:
        #sb-overlay{position:relative;height:100%;width:100%;}

        To this:
        #sb-overlay{position:relative;height:800px;width:650px;}


        Because my shadowbox (AJAX Popup) was huge. Everybody who wants to know where to size the AJAX box, this is where you do it! Thank you for your help.
          Making the web a better place on site at a time! Dayton Web Design: http://www.dayton-web-design.com/
        • discuss.answer
          CharlesMx Reply #4, 11 years, 1 month ago
          Quote from: wbbuilder at Mar 27, 2013, 04:42 AM
          Quote from: sottwell at Mar 27, 2013, 03:35 AM


          I changed this:
          #sb-overlay{position:relative;height:100%;width:100%;}

          To this:
          #sb-overlay{position:relative;height:800px;width:650px;}


          Because my shadowbox (AJAX Popup) was huge. Everybody who wants to know where to size the AJAX box, this is where you do it! Thank you for your help.

          You can use the the two parameters below to change the ajax window size without directly editing the CSS.

          [[!mxcalendar?&modalSetWidth=`300` &modalSetHeight=`300`]]
            Evo Revo // Ubuntu, CentOS, Win // Apache 2x, Lighttp (Lighty)
            Visit CharlesMx.com for latest news and status updates.
            • 43477
            • 1 Posts
            markperic Reply #5, 10 years, 11 months ago
            I'm not sure if you guys found a solution to this, but after much head banging and help from a programmer friend, we found a solution:) We basically discovered that the modal view window was being populated by the tplDetail chunk (under elements>chunks>mxcalendar). It essentially inherits no styling so we simply styled that chunk as it's own webpage and hey presto it finally worked:)
            So I added in the <html> <head> and <body> tags plus relevant CSS styles etc.....
            I hope that helps a little
              • 32025
              • 305 Posts
              Dayton Web Design Reply #6, 10 years, 3 months ago
              Quote from: markperic at May 22, 2013, 07:02 AM
              I'm not sure if you guys found a solution to this, but after much head banging and help from a programmer friend, we found a solution:) We basically discovered that the modal view window was being populated by the tplDetail chunk (under elements>chunks>mxcalendar). It essentially inherits no styling so we simply styled that chunk as it's own webpage and hey presto it finally worked:)
              So I added in the and tags plus relevant CSS styles etc.....
              I hope that helps a little

              Worked perfectly on my new installation. Your method is much easier than mine.

              Additional Notes:
              a. Don't forget to add the stylesheet definition to the header to help controls this pop-up block. Since the stylesheet is difficult to find without Firebug, add this to the beginning of the css header line: [[++site_url]] and you will give the popup full URL to the css stylesheet you are listing.
              b. I encompossed the entire chunck in a wapper div so I could add padding to the left. The words automatically come without padding and butt up against the left hand side of the pop-up window.
                Making the web a better place on site at a time! Dayton Web Design: http://www.dayton-web-design.com/