Extending the container when embedding into a Bootstrap site

API & Customization
1

I've been having problems with embedding knack pages into Bootstrap based website related to the width of the container.

e.g

When embedding page with table into simple HTML page, knack will present all columns from 1 to 9.

When embedded into Bootstrap, it only shows column 1 - 7

I understand it is to do with the width of the container set by the bootstrap stylesheet.

Is there any way around this? Eg Widen the container of bootstrap? Or effectively turn off the bootstrap styling with the container that holds the embedded code.

I've also noticed that bootstrap stylesheet sets maximum widths of the columns within the container.

I've been able to override this by setting style within the knack stylesheet

e.g

/* 11-10-2018 Fix Width Column */
.col-1 {
max-width: 100% !important
}

2

OK - I've been able to widen the container rather simply, but still have some troubles with styles within such as column and table widths.

My knack app was embedded in a section of the bootstrap styled page that looks like this:

<main role="main">
<div class="container">
<script type="text/javascript">app_id="<<myknackapp>>";distribution_key="dist_12"</script><script type="text/javascript" src="https://loader.knack.com/<<myknackapp>>/dist_12/knack.js"></script><div id="knack-dist_12">Loading...</div>
</div>
</main>

As the class "container" was causing the problem, I replaced with a non-existent class called "knackcontent"..i.e.

<main role="main">
<div class="knackcontent">
<script type="text/javascript">app_id="<<myknackapp>>";distribution_key="dist_12"</script><script type="text/javascript" src="https://loader.knack.com/<<myknackapp>>/dist_12/knack.js"></script><div id="knack-dist_12">Loading...</div>
</div>
</main>

However, styles within (eg. col-1, col-2) within are still impacted by bootstrap style attributes like "max-width: 0.08333%"