Highlighted

Muse page as interactive responsive iframe - white space at bottom

Community Beginner ,
Jul 19, 2018

Copy link to clipboard

Copied

Hey folks I could really use some help here - I have a page that I created in muse and my client needs it to display as an interactive responsive iframe in another site within a Wild Apricot platform page.

I'm a designer with no programming expertise and this problem is making me crazy. It concerns the height of display when the screen sizes down responsively. I'm getting a massive white space at the bottom of the page that I created in Muse when viewed on mobile devices. Maybe this is an easy fix that I'm completely ignorant on how to go about making?

I gotta make this work - deadline approaching rapidly. Thank you for any assistance!

My original page is here:

Home

https://bygauntt.com/nmmap/

Here's the code I am using to bring the iframe into the client site

<iframe src="https://bygauntt.com/nmmap/"width="100%" height="912" frameborder="no" scrolling="no"></iframe>

I set the height to 912px but when the browser is resized tons of white space shows up at the bottom!

And below are two screen grabs showing the responsive display results

Full width in browser - looks great

Screen Shot 2018-07-19 at 3.54.12 AM.png

Narrow width in browser - tons of white space below

Screen Shot 2018-07-19 at 3.54.22 AM.png

Community Beginner
Correct answer by idezin | Community Beginner

OK Folks - here's what I did so far. Pretty exciting (hopefully)

1. Recreated the Muse page

2. Turned off Sticky Footers

3. Made all assets centered

4. Adjusted bottom of page and footer placements

Home

Brought the page into the new Wild Apricot site as inserted html iframe using the following code (it's not prefect but I'm getting there)!

<style>

.embed-container { position: relative; padding-bottom: 100%; height: 0; overflow: hidden; max-width: 100%; }

.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

</style>

<div class='embed-container'>

<iframe src='https://bygauntt.com/nm13/' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

</div>

Still trying to get a little white space off the top of the full width!

Views

614

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Muse page as interactive responsive iframe - white space at bottom

Community Beginner ,
Jul 19, 2018

Copy link to clipboard

Copied

Hey folks I could really use some help here - I have a page that I created in muse and my client needs it to display as an interactive responsive iframe in another site within a Wild Apricot platform page.

I'm a designer with no programming expertise and this problem is making me crazy. It concerns the height of display when the screen sizes down responsively. I'm getting a massive white space at the bottom of the page that I created in Muse when viewed on mobile devices. Maybe this is an easy fix that I'm completely ignorant on how to go about making?

I gotta make this work - deadline approaching rapidly. Thank you for any assistance!

My original page is here:

Home

https://bygauntt.com/nmmap/

Here's the code I am using to bring the iframe into the client site

<iframe src="https://bygauntt.com/nmmap/"width="100%" height="912" frameborder="no" scrolling="no"></iframe>

I set the height to 912px but when the browser is resized tons of white space shows up at the bottom!

And below are two screen grabs showing the responsive display results

Full width in browser - looks great

Screen Shot 2018-07-19 at 3.54.12 AM.png

Narrow width in browser - tons of white space below

Screen Shot 2018-07-19 at 3.54.22 AM.png

Community Beginner
Correct answer by idezin | Community Beginner

OK Folks - here's what I did so far. Pretty exciting (hopefully)

1. Recreated the Muse page

2. Turned off Sticky Footers

3. Made all assets centered

4. Adjusted bottom of page and footer placements

Home

Brought the page into the new Wild Apricot site as inserted html iframe using the following code (it's not prefect but I'm getting there)!

<style>

.embed-container { position: relative; padding-bottom: 100%; height: 0; overflow: hidden; max-width: 100%; }

.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

</style>

<div class='embed-container'>

<iframe src='https://bygauntt.com/nm13/' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

</div>

Still trying to get a little white space off the top of the full width!

Views

615

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 19, 2018 0
Jul 19, 2018

Copy link to clipboard

Copied

Hey idezin,

To me it looks like the white space is followed due to the forced page height.

If I change the height to "auto" or "100%" it does not work. therefore it is worked as coded.

The 912px height is covered leaving a blank space in the bottom.

Therefore, I would suggest you to get the code rectified.

@community what are your thoughts on this?

Thanks!

Ankush

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 19, 2018 0
Community Beginner ,
Jul 19, 2018

Copy link to clipboard

Copied

Ankush - I tried the same solutions too - "100%" and "auto". Neither worked correctly. Argh.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 19, 2018 0
Jul 19, 2018

Copy link to clipboard

Copied

The space is that extra height only.

If you drag the scrubber inside your Muse file, there also yo can see that empty space in the height of iframe.

I din't even see any scope in modifying the current code, as i guess the problem lies in source of that code - https://bygauntt.com/nmmap.

Not sure where can we proceed further.

Lets see if any other community member has any insight for your issue.

Thanks!

Ankush

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 19, 2018 0
Community Beginner ,
Jul 19, 2018

Copy link to clipboard

Copied

Ok thanks - hopefully someone knows more about this than I do.

I have a suspicion this might need a css container to control it and to be honest, I have no idea how to do that!!

Blair

[Email signature removed by moderator.]

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 19, 2018 0
Most Valuable Participant ,
Jul 19, 2018

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 19, 2018 0
Community Beginner ,
Jul 20, 2018

Copy link to clipboard

Copied

Thanks for the suggestion Ussnorway - unfortunately I don't need to bring the Muse page that I have created into a Muse environment as an iframe. I'm trying to bring the muse page into another site inside a dashboard by inserting the html iframe code.

"<iframe src="https://bygauntt.com/nm10/"width="100%" height="906" frameborder="2" scrolling="no"></iframe>"

I just need to get the page I created to display the smaller responsive breakpoints without all the extra white space at the bottom. Setting height to "auto" or to "100%" doesn't do it. It just truncates it. Looks great when I set height to "906px" but of course that locks the height into that size when displaying the smaller breakpoints.

I have tried several edits on the original Muse page - including resetting footer positions on all breakpoints, and even disabling the master completely but the white space at the bottom is still there with each solution I try out.

Updated Version

Home

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 20, 2018 0
Jul 20, 2018

Copy link to clipboard

Copied

I think that the mulib shared by Ussnorway​ works totally well as we can't do any thing much when it comes to embedded code in Muse.

However, the only difference I found is the vertical scroll bar appears even if "hide browser scroll" is enabled.

Ussnorway​ can we somehow disable the scroll bar and force the map to be on full width mode?

Thanks!

Ankush

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 20, 2018 1
Most Valuable Participant ,
Jul 21, 2018

Copy link to clipboard

Copied

  1. that widget is the work of Pavel Homeriki and he knows more about Bootstrape style code than I do
  2. width = 100% + auto = bad code... do not use undefinded amounts or modern browsers will ignore your code and do whatever they think is best
  3. my test example of his map shows no white space *... isn't that the object here = iframe2

ankushr40215001  wrote

Ussnorway  can we somehow disable the scroll bar and force the map to be on full width mode?

no, what we are really doing is saying "we don't want a scroll bar but if you insist then a max of one please" ... now Pavel Homeriki may know some workaround but I tend to hide the scroll bars under my design

* his base map is only interactive at size 721 and above... at 720 < his server offers up a single image and imo this is the real cause of the white space but that is not a Muse issue

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 21, 2018 2
Community Beginner ,
Jul 24, 2018

Copy link to clipboard

Copied

OK Folks - here's what I did so far. Pretty exciting (hopefully)

1. Recreated the Muse page

2. Turned off Sticky Footers

3. Made all assets centered

4. Adjusted bottom of page and footer placements

Home

Brought the page into the new Wild Apricot site as inserted html iframe using the following code (it's not prefect but I'm getting there)!

<style>

.embed-container { position: relative; padding-bottom: 100%; height: 0; overflow: hidden; max-width: 100%; }

.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

</style>

<div class='embed-container'>

<iframe src='https://bygauntt.com/nm13/' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

</div>

Still trying to get a little white space off the top of the full width!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 24, 2018 0
Most Valuable Participant ,
Jul 24, 2018

Copy link to clipboard

Copied

idezin  wrote

Still trying to get a little white space off the top of the full width!

Muse 2018 has a 50 space at the top of page reserved for Masters... if you have no Master page then there will be a blank space at the top of your Muse page

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 24, 2018 0
Community Beginner ,
Jul 24, 2018

Copy link to clipboard

Copied

OH. Crap.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 24, 2018 0
idezin LATEST
Community Beginner ,
Jul 24, 2018

Copy link to clipboard

Copied

Thanks everybody!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 24, 2018 1