BS blocks iframe usage

Bug Reports
1

Hi,

With BS, it is impossible to use any iframe, their content is displayed but impossible to use any form inside them. These iframes are used in many other places, the problem comes from BS for sure since any other single code is working, for example this simple code works perfectly, it is not depending on neither HTTP nor HTTPS :

<html>
<body>
    <div id="myiframe">
        <iframe src="https://gezim.careers"></iframe>
    </div>
</body>
</html>

But in BS, impossible to use the form inside the iframe, however I use in BS a custom code containing ONLY the div “myiframe” as written above. Adding “allow-scripts” or “allow-forms” or anything else does not change anything. Looks like “sandbox” is forced transparently … Crazy … :frowning:

If anyone has a solution, thanks in advance.

2

What do you mean by “use” forms inside iframes? Are you talking about being able to submit the form from within the Bootstrap Studio program itself, because that will likely not work. The subject has been discussed numerous times throughout the forums. Certain features (like running external js) are disabled in the BSS workspace for security purposes.

If you preview your embedded form in a browser, you should have no trouble submitting it. I do it all the time with Jotform, and a number of other third-party form companies.

3

I mean it’s impossible even to fill up a form inside an iframe, as in the simple example above, and impossible to focus anything inside the iframe.
If I preview with BS, same problem. It really looks like “sandbox” attribute is set, but you can see in my example that nothing is set. And I repeat : these iframes I use are perfectly used with Wordpress and other dedicated CMS.
The problem does not come from iframe content, but from the calling iframe.
There is something in BS that blocks iframe access, and sure I know testing inside BS is not meaningful, my problem is on the generated site (as well as inside BS but that is not meaningful).

April 28 morning : I just find the guilty in bootstrap.min.css, it was the class “clean-block clean-hero” applied on a section. This class has a :before which set a content to “”, this content blocks all access to iframe content !!! DANGER, SO TAKE CARE IF YOU HAVE THIS CLASS AND YOU NEED IFRAME. Don’t ask me how these class was set, but sure I did not did it from myself, I suppose it comes from a predefined component.

4

If you are using one of the pre-made templates that come with the program, they often have things done to them that are different from the plain, vanilla boootstrap.min.css file.

I KNOW Iframes work in this software because I have dozens of websites using them with forms in the iframes.

5

There are also a handful of default and online components this could have come from. Lots of them have the word “clean” in them or start with it so it could be any one or more different places that it was messed up in.

Best way to narrow down the problem is by starting a new site and add things in that you have added from the components until you see it show up. That is of course, if you care to know.

6

As I said, just to be clear and let anybody know the issue, the class “clean-block clean-hero” was applied on a section containing the iframe. This class has a :before which set a content to “”, and this blocks all access to iframe content, even its own scrollbar. Just delete that class and everything was ok, without changing anything else.
Since I use BS, bootstrap CSS made me loose many days of works with many pre-defined settings, especially margin and padding everywhere, now this useless class …

7

Try to apply the class “clean-block clean-hero” on a section containing an iframe and just tell me is your form inside the section is still working fine.
Interesting to know… thanks.

8

What “I’m” saying, is tht the clean-block clean-hero class can come from many different places. As @printninja asked you, are you using a premade site template such as Clean Sky etc.? And I asked if you added any of the “Clean” named components from the default built in components or the online components?

There’s really no help to be done here since you did already find the problem causing the issue, but … it would help the developers and/or component creators to know where that setting came from so they can fix it for future users. Without knowing where it came from it’s hard to fix it is what I’m saying. See if you can track down where that class got added, or share your project file in here or to the Dev (Contact info on Contact page of this site) so they can find it.

9

I empathize with your frustration, but the simple fact is, Bootstrap Studio is not a program like Wix or Squarespace or Weebly, where you can just drag and drop things from templates that are very limited deliberately to ensure inexperienced users cannot do things to “break” the website, or not make it work.

Bootstrap Studio is a program made primarily for developers, who already have a working knowledge of HTML, CSS (and to a lesser extent, Javascript.) Web development is a hobby for many, and a profession for some. You don’t need to be an expert to use BSS, but if you are not familiar with CSS, and things like pseudo classes, you may find yourself struggling at times to solve problems that a more experienced developer would spot in a second. I’m sorry, but this is the nature of web design. It’s a constant learning process, and sometimes I’ve spent hours trying to solve problems that were stupid things I should have spotted in 2 seconds.

I have been doing web development for 12 years, (I am by no means an expert) and when I look back at the websites I built just 5 years ago, I cannot believe how riddled they are with errors - things that are essentially “novice” mistakes. And I think, “how could I have done something so obviously wrong???”

Website development with a program like Bootstrap Studio requires a pretty serious commitment to learning, at the bare minimum, the Bootstrap Framework, and CSS (Cascading Style Sheets.) Knowing HTML is a plus. Knowing where to go when you have problems or need help (W3Schools, Stack Overflow, these Forums) is very helpful. This is not an ideal program for pure beginners hoping to just “drag-and-drop” a fully functional website together in a couple of days. Even with Bootstrap Studio (which saves me countless hours of work) It still takes me 4-5 weeks to build a solid, responsive, functional website that ranks well in its area in Google’s organic search (which is an entire career in iteself.)

This program only costs $60 for a reason. It’s not designed to “hold your hand” and “walk you through” the building of a website. It expects the user to have some familiarity with the fundamental way websites are built and function. If you’re coming from a platform like WordPress (which has millions of users, and thousands of plug-ins) you’re going to find a pretty steep learning curve switching to BSS. Wordpress has been around forever, and has a HUGE amount of support with numerous forums and communities dedicated to helping people. But just try to get a WordPress website to rank on page one of Google. Their sites are so bloated and slow it takes a minor miracle to get them to rank well. Or you could use a program like Webflow, which has a much more support, tutorial videos, and is arguably more polished than BSS (though not necessarily as powerful) and you’ll pay four times as much EVERY SINGLE YEAR. Same with Wix, or Weebly, or any “cloud-based” website builder. And those companies OWN your website, (At least Wix does.) Cancel you plan, and your site is gone forever. Webflow is bit better in that regard, and some plans let you download all your code. There’s no one-size-fits-all perfect solution when it comes to web development.

The internet is FILLED with BILLIONS of horribly constructed, terribly performing websites built by amateurs who really have no idea what they’re doing. That’s where we’ve come to after 30 years, when the first website went live in 1991. Billions of man-hours of development, hundreds of millions of developers and programmers, and (probably) hundreds and hundreds of website building programs that have come and gone over the last 30 years. Even billion dollar leviathans like Adobe could not manage to put together a website builder that’s as good as Bootstrap Studio. Dreamweaver is garbage. Muse was a nightmare… even worse garbage. So they finally gave up.

If you want to do web design for a career, I’d suggest taking some courses… Udemy, W3 Schools, whatever, and learn Bootstrap, CSS and HTML (and Javascript wouldn’t hurt.) If you just want to put up a website for yourself or your business, and don’t want to learn all that stuff, or deal with headaches like pseudo classes (or whatever), then go with a (forgive the term) “idiot-proof” solution like Wix or Weebly, and pay their monthly/annual fee.

Sorry if this post seems disillusioning, but it IS reality.

1 Like
10

Heuuuu … how to say … I agree with everything you said but you are not talking to the right person … I opened here that issue thinking to quickly find a solution, it was just a question of time because I manage my own IT company. In few time I finally find a working solution but not the origin of that problem, but when I’ll have a free weekend, be sure I’ll find it ! Some times you have to quickly deliver thing to customers, that’s the market.
I work in IT for 35 years, I’m a famous Linux expert in my area, in fact even before Linux with Unix Sys V, Xenix SCO, wrote kernel stuff for Minix (Linux grand father;)… I’ve been C programming teacher in 90’, I wrote famous Minitel servers (maybe non meaningful for non-french…;), my own HTTP server in 1995 … and so many things … cloudoffice.fr, CYJS framework, cloudfiles.fr …
Anyway I’m pleased to meet here very qualified people, thank you all.

11

Heheh… good to meet a fellow computer wiz. But I pre-date you by quite a bit. I was writing programs on punch-cards in BASIC back in the late 1970’s!!! By the 1990’s, I was already on my 4th computer, a Commodore Amiga 2500, which I still own to this day. It’s now an antique.

12

Haa … ya I also owned THE Commodore 64, bought it immediately when arriving in France , the worst BASIC language ever made ;)…
wow such good souvenirs… so both you and me had the chance the follow that fantastic IT epic by years…
All the best my friend !

13

Hi Luke,
To see the form you may need to give the iframe some width and height. To make the form work you will have to wrap the input and button within form tags. The basics for a form are as follows

<form action="http://">

<input type="text" placeholder="Search" />
    <button type ="submit">Search
    </button>

</form>
14

Hi Luke,

The iframe is to run an external page from some other website.

Your code shows that the iframe is pointing to a form at “https://gezim.career”.
The page at the https://gezim.career site is not coded correctly. This is where the input and button needs to be wrapped in the form tags.

Barry