No Scroll in Content Modal / Columns and format of Content Modal

[Tore_Lande_67]

Hi, am using content modal but trying to find a way to make format nicer. I’ve read about the using the lightbox option but Im not sure if this embeds a page inside the modal or just places a link inside the modal that will link to a page.
I am using the following codes from w3 schools (below) wonder if this makes the scroll for the modal disappear? Thanks.

.racehomemodalcolumn {
float: left;
width: 30%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
margin:1.66%;
}

/* Clear floats after the columns */
.racehomemodalrow:after {
content: “”;
display: table;
clear: both;
}

`/*

text

text

text

*/ `

[jumar]

Hello @Tore_Lande_67,

Thanks for writing in!

You can use the theme’s native [lightbox] shortcode instead of the Content Area Modal. With this shortcode, you can achieve placing a page inside the modal.

Use Shortcodes | Themeco Docs

http://demo.theme.co/integrity-1/shortcodes/responsive-lightbox/

E.g.

<div id="my-content" style="display:none;">
    <div class="racehomemodalrow">
        <div class="racehomemodalcolumn" style="background-color:#aaa;">
            text
        </div>
        <div class="racehomemodalcolumn" style="background-color:#bbb;">
            text
        </div>
        <div class="racehomemodalcolumn" style="background-color:#ccc;">
            text
        </div>
    </div>
</div>

<a href="#my-content" class="my-lightbox" data-type="inline">Click Me</a>

[lightbox selector=".my-lightbox"]

Then add this CSS code into X > Theme Options > CSS:

        #my-content,
        .racehomemodalcolumn {
            overflow: none;
         }
        .racehomemodalcolumn {
            float: left;
            width: 30%;
            padding: 10px;
            height: 300px; /* Should be removed. Only for demonstration */
            margin:1.66%;
        }

        /* Clear floats after the columns */
        .racehomemodalrow:after {
            content: "";
            display: table;
            clear: both;
        }      

Hope this helps.

[Tore_Lande_67]

Thanks for the reply, however what appears in our window is this:

Was hoping to achieve something like this, this was made thru html code posted earler, however it wont scroll

Thanks your reply is appreciated

[Alaa]

Hi Tore_Lande_67,

This is what I can see after applying Jumar’s snippet on my localhost:

The scrollbar is appearing fine, could you please provide us with your WordPress Dashboard login details in “Secure Note” so we can investgiate this issue for you?

Thanks.