Columns issue in iframe

  • Resolved rotertal

    (@rotertal)


    10 months, 3 weeks ago

    Hi CFF-Team,

    I’m using a lot of your Bootstrap/Grid system col-lg-4 etc. Now when loading the form in iframe, these don’t act because CSS is not loaded (no matter if “1” is added to the shortcode or not). When using your columns-selection (instead of col-lg …) of the fieldsets, it works perfectly fine. Since I need the col-lg sysstem, I added additional CSS on the page where the form is loaded but nothing happens:

    fbuilder .row::after {

    content: “”;
    display: table;
    clear: both;
    } fbuilder .col-lg-1 { width: 8.333333%; float: left; box-sizing: border-box; padding: 0 15px; } fbuilder .col-lg-2 { width: 16.666667%; float: left; box-sizing: border-box; padding: 0 15px; } fbuilder .col-lg-3 { width: 25%; float: left; box-sizing: border-box; padding: 0 15px; } fbuilder .col-lg-4 { width: 33.333333% !important; float: left; box-sizing: border-box; padding: 0 15px; } fbuilder .col-lg-5 { width: 41.666667%; float: left; box-sizing: border-box; padding: 0 15px; } fbuilder .col-lg-6 { width: 50%; float: left; box-sizing: border-box; padding: 0 15px; } fbuilder .col-lg-7 { width: 58.333333%; float: left; box-sizing: border-box; padding: 0 15px; } fbuilder .col-lg-8 { width: 66.666667% !important; float: left; box-sizing: border-box; padding: 0 15px; } fbuilder .col-lg-9 { width: 75%; float: left; box-sizing: border-box; padding: 0 15px; } fbuilder .col-lg-10 { width: 83.333333%; float: left; box-sizing: border-box; padding: 0 15px; } fbuilder .col-lg-11 { width: 91.666667%; float: left; box-sizing: border-box; padding: 0 15px; } fbuilder .col-lg-12 { width: 100%; float: left; box-sizing: border-box; padding: 0 15px; } fbuilder .row {

    margin-left: -15px;
    margin-right: -15px;
    } fbuilder .col-lg-1, fbuilder .col-lg-2, fbuilder .col-lg-3, fbuilder .col-lg-4, fbuilder .col-lg-5, fbuilder .col-lg-6, fbuilder .col-lg-7, fbuilder .col-lg-8, fbuilder .col-lg-9, fbuilder .col-lg-10, fbuilder .col-lg-11, fbuilder .col-lg-12 {

    float: left;
    box-sizing: border-box;
    padding: 0 15px;
    text-align: left; /* <== Wichtig für Beschriftung / vertical-align: top; / <== Für gleichmäßige Ausrichtung */
    }

    Kind regards!

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author CodePeople2

    (@codepeople2)

    10 months, 3 weeks ago

    Hello @rotertal

    Thank you for choosing our plugin! Could you please provide the URL to the page containing the form to check how your website is loading the resources?

    Note that when you load a page into an iframe, the browser calculates the screen width based on the iframe context (iframe width), and you probably require using col-sm-… (like col-sm-2, col-sm-7, etc.) instead of col-lg-

    Best regards.

    Thread Starter rotertal

    (@rotertal)

    10 months, 3 weeks ago

    Hi, I put the css directly into the form, it loads and there are some changes but does not display the same when not using in iframe, no matter if col-lg oder -md etc. Is there a css code for iframe (col system only) that behaves exactly the way when not loading in iframe.

    Kind regards!

    Plugin Author CodePeople2

    (@codepeople2)

    10 months, 3 weeks ago

    Hello @rotertal

    No, the problem is that when you use iframes, only the plugin’s styles are applied to the form. Otherwise, the theme and active plugin styles on your website also affect the form. Please provide a link to the page so that we can examine the website’s behavior.

    Best regards.

    Thread Starter rotertal

    (@rotertal)

    10 months, 3 weeks ago

    Hi, ok, the sheet loads (forms.css) but no style applied in general.

    https://app.trialanderrorsoftware.com/test/

    Thanks!

    Plugin Author CodePeople2

    (@codepeople2)

    10 months, 3 weeks ago

    Hello @rotertal

    Please insert an “HTML Content” field in the form, tick the checkbox in its settings to accept advanced tags, and enter the following piece of code as its content:

    <style>body>*:not(form){visibility: hidden; width: 0; height: 0;} .pac-container, .ui-tooltip, .ui-tooltip *,.ui-datepicker,.ui-datepicker *{visibility: visible; width: auto; height: auto;}</style>
    <link rel="stylesheet" id="hello-elementor-css" href="https://app.trialanderrorsoftware.com/wp-content/themes/hello-elementor/style.min.css?ver=3.3.0" media="all">
    <link rel="stylesheet" id="hello-elementor-theme-style-css" href="https://app.trialanderrorsoftware.com/wp-content/themes/hello-elementor/theme.min.css?ver=3.3.0" media="all">
    <link rel="stylesheet" id="hello-elementor-header-footer-css" href="https://app.trialanderrorsoftware.com/wp-content/themes/hello-elementor/header-footer.min.css?ver=3.3.0" media="all">
    <link rel="stylesheet" href="https://app.trialanderrorsoftware.com/wp-content/themes/hello-elementor-child/forms.css">

    Best regards.

    Thread Starter rotertal

    (@rotertal)

    10 months, 3 weeks ago

    Hi,

    thanks, the css is now loading but only on chrome, not on edge. Also, the col-stuff is not appliying, no matter which browser …

    Plugin Author CodePeople2

    (@codepeople2)

    10 months, 3 weeks ago

    Hello @rotertal

    All the issues you are experiencing are due to your website’s cache. Please ensure you clear both the website and browser caches.

    Please watch the following video:

    https://resources.developers4web.com/cff/tmp/2025/07/10/video-cache.mp4

    Best regards.

    Thread Starter rotertal

    (@rotertal)

    10 months, 3 weeks ago

    Hi Sir,

    thanks but thats the forms url, when loading it in iframe (see my link), the css applies but not the col- … the two div container (left and right) were seperate with your selection (2 columns), works fine, but when using col- the division of fields does not apply in iframe … Right now i test it with an iframe 80% so it sould perfectly work with lg (like it does when I just use shortcodes) …

    Thats why I asked for some additional css that somehow works like with your div containers (dropdown):

    Columns1 column2 columns3 columns4 columns5 columns6 columns7 columns8 columns9 columns10 columns11 columns12 columns 

    Shown in columns the fields into the container.

    • This reply was modified 10 months, 3 weeks ago by rotertal.
    Plugin Author CodePeople2

    (@codepeople2)

    10 months, 3 weeks ago

    Hello @rotertal

    I’m sorry if my previous explanation wasn’t clear, so I’ve created a short video demonstration. When content is loaded inside an iframe, the page’s width is constrained by the iframe’s own width, so you should use col-sm-* classes instead of col-lg-* to ensure proper responsiveness. Also, it appears your site’s cache is serving an outdated version. Please clear or disable your cache while testing.

    https://resources.developers4web.com/cff/tmp/2025/07/10/video-iframe_o.mp4

    Best regards.

    Thread Starter rotertal

    (@rotertal)

    10 months, 3 weeks ago

    Hi Sir, ok thanks, now it works! So no matter if loading in iframe or not, no matter which screen, would you always recommand col-sm … to be safe?

    Thanks again for your support!

    Plugin Author CodePeople2

    (@codepeople2)

    10 months, 3 weeks ago

    Hello @rotertal

    Depending on the appearance you want to apply to the form based on the screen’s size, you assign the classes to the fields. For example, if you have a form with four fieldsets and want to display them in four columns on wide screens and two columns on standard screens, you can assign both class names col-lg-4 and col-sm-6 to each field by entering col-lg-4 col-sm-6 through their “Add CSS Layout Keywords”. The number of columns will vary based on the screen size.

    Please watch the following video tutorial:

    https://youtu.be/NSac2cAN8RE?list=PLY-AOoHciOKgZQsqWfkQlHJ21sm3qPF9X

    Best regards.

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Columns issue in iframe’ is closed to new replies.