• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Muse page as interactive responsive iframe - white space at bottom

Community Beginner ,
Jul 19, 2018 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

Views

1.2K

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
community guidelines

correct answers 1 Correct answer

Community Beginner , Jul 24, 2018 Jul 24, 2018

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,

...

Votes

Translate

Translate
Jul 19, 2018 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

Votes

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
community guidelines
Community Beginner ,
Jul 19, 2018 Jul 19, 2018

Copy link to clipboard

Copied

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

Votes

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
community guidelines
Jul 19, 2018 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

Votes

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
community guidelines
Community Beginner ,
Jul 19, 2018 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.]

Votes

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
community guidelines
LEGEND ,
Jul 19, 2018 Jul 19, 2018

Copy link to clipboard

Copied

Votes

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
community guidelines
Community Beginner ,
Jul 20, 2018 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

Votes

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
community guidelines
Jul 20, 2018 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

Votes

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
community guidelines
LEGEND ,
Jul 21, 2018 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

Votes

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
community guidelines
Community Beginner ,
Jul 24, 2018 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!

Votes

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
community guidelines
LEGEND ,
Jul 24, 2018 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

Votes

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
community guidelines
Community Beginner ,
Jul 24, 2018 Jul 24, 2018

Copy link to clipboard

Copied

OH. Crap.

Votes

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
community guidelines
Community Beginner ,
Jul 24, 2018 Jul 24, 2018

Copy link to clipboard

Copied

LATEST

Thanks everybody!

Votes

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
community guidelines