100% width problems on iphones

I have a layout with an accordion which I'm trying to get to work correctly on iPhones. The problem I have is that when viewed in Safari on the phones, there is horizontal play (the pages moves a lot with a side to side swipe gesture). To get around this issue, I implemented several changes including:
Change the text box width from 360 px to 95% in the CSS files (If I do 100%, some characters can get cut off by the scroll bar on the right)
Change the viewport from 380 px to 320 px in the CSS files (This prevents the horizontal play on iPhone 4-5S)
Add <meta name="viewport" content="width=device-width"/> to the html files
This workaround was ok but with the introduction of iOS 8 and the new iPhone 6 and 6+, the higher resolution is throwing everything off. I think the issue is that the viewport is greater than 320 pixels. This is making my design off-center and with play.
Any ideas how to work around this? I need a layout that will only allow vertical scrolling and look good on both iOS 7/8 and iPhones 4-6+.
Sang

Hi Zak,
Thanks for the reply. I'm confident that there are no protruding objects outside the width of the pages. The page content is pretty straight forward. The master page has a color background and a vertical menu nav. The content pages have just an accordion object. It displays fine without any issues in browser desktops, but on mobile safari the behavior is different.
Unfortunately I have to modify the text box width because unlike the accordion object, the text boxes inside of it won't resize based on the device width.
Sang

Similar Messages

Problem 100% width in tablet

Hi,
I'am working on Muse CC 2014.3 I'm using 100% width on my pages. The desktop version is ok. When I look it in my tablets ( IPad Retina Mini ou IPad 2) the welcome page is pushed to the left with extra space on the right, but the others pages are ok. I've verified all elements, there is no outlying content past the working space. I can't understand this. I've also made a tablet version with same result…
Could you help please ?
Here is an image of the tablet displaying (the orange page is not ok, and the green one is ok)

i experienced something similar and i tracked it down to different page dimensions which was coming through from the page masters

100% width items doesn't display correctly on iOS

On this thread "
New Features now available in Adobe Muse
http://forums.adobe.com/message/4636052
It states:
"The display of 100% width items on iOS devices is now enabled."
I can not get this to work. Tested my site on iPad, Android and iPhone.
Full width items do not expand.
The black background in the header is cut off.
How do I correct this.

Hi Andrew,
Here is a link: http://www.brandtimmigration.com
My page width is the default 960 so I am using the viewport=1160 on the home page only:
<meta name="viewport" content="width="1160">
It loads correctly in portrait initially on iOS. If you resize the page or adjust the view to landscape you experience my problem. Here is a screenshot:
http://cl.ly/image/0B2f0x0D021T
Thanks in advance for your help.

Suddenly scrollbar at 100%width&height sites

Very, very strange: Suddenly I get a scrollbar at 100%width&height compositions. That started a few days ago. Somebody else recognized? It is in all the browsers (at least on mac).
And it is getting stranger: When you preview the site from edge in browser it is there. When you directly open the html file in the browser it is not there. When I upload the html file it appears again. ???
Was there a secret update on edge? Or all the browsers at once? This is so enological and I spent hours to find the reason for this.
And the scrollbar suddenly is in all of m edge projects when I open them in edge and then save it. I also tried to open a blank document, just set the width&height to 100% and there it is - vertical scrollbar appears.
Please help. This is super disturbing. Maybe somebody form the edge team has an answer to this?
Or for now maybe someone can tell me a code fro turn of the scrollbar manually with a code in edge.
Thanks a lot!

Hello.
Tanks for your answer. This is my site: www.dnzstudio.com
If you scroll down you ll see the scrollbar and some white at the bottom. At least on mac. This was Never there before. Also when I open other projects again in edge and make preview in browser it is like that coming out of nowhere.
And the strangest thing is when I open up a complete new document, set w&h to 100percent it is doing the same. It would be great if you could try that.
I also tried it on my laptop where I also have cc tuning.same thing.
Really interested in your answer if you experience the same thing also when you look on my site on the browser.
Thank you, regards, Deniz
Von meinem iPhone gesendet
Am 16.05.2014 um 11:34 schrieb hemanth kumar r <[email protected]>:
suddenly scrollbar at 100%width&height sites
created by hemanth kumar r in Edge Animate CC - View the full discussion
Its strange ,can you mail me your files so that i can try to find the reason for this problem.
There was not update from at-least edge recently
If your scroll bras are appearing in the body of the page you can hide them by adding the following snippet in composition ready event listener
$("body").css({"overflow":"hidden"});
By do mind this might prevent user from seeing content that user will have to scroll.
Please note that the Adobe Forums do not accept email attachments. If you want to embed a screen image in your message please visit the thread in the forum to embed the image at https://forums.adobe.com/message/6384005#6384005
Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page:
To unsubscribe from this thread, please visit the message page at . In the Actions box on the right, click the Stop Email Notifications link.
Start a new discussion in Edge Animate CC by email or at Adobe Community
For more information about maintaining your forum email notifications please go to http://forums.adobe.com/thread/416458?tstart=0.

OBIEE 11g - 100% width

Hi all,
In OBIEE 10g it was possible to use the very neat 100% width on e.g. tables/pivots, but in OBIEE 11g it seems like this function is not working anymore. Which is very bad for the graphical user interface. It just looks a lot better when the tables are filling up the screen when using the 100% width option. (Which you set in the Formatting area of the table/pivot).
Is his something Oracle has "forgot" to bring further from 10g to 11g or am I missing out something here??
Another thing which also is really annoying is that it's not possible to open the log (the SQL Query log!!) in a new window. I use this a lot when building the BI Server, to make sure the BI server is acting as I want. Any workarounds here?
Any help appreciated.

I'm getting the Invalid Number Format when the Indent (Left Padding) on the Style is populated with something like 10px. When a left padding value is set, I cannot set a numeric format for this column.
If I remove the 10px left padding, go back to the Data Format tab, set a format and click OK, it keeps the new format as well as the 10px that I removed. But you have to remove the 10px every time you want to change the data format.
1. Open Column Properties
2. Kill the 10px
3. Change the data format
4. Click OK. The 10px padding is still observed in the results, and is still present if you come back in to Column Properties.
To change the data format again, I have to repeat all 4 steps.
I just tested all six fields in the Additional Formatting Options section. They all cause this same behavior. So the problem isn't the use of 100% in the width field. The problem is the use of any value in any field in the Additional Formatting Options section. Bug. I've reported it.

100% Width Slideshow Not Displaying Images Correctly In Phone Version...

Hi all... Again.
2nd issue encountered tonight since working on the mobile version of my current project. Having copied, pasted and resized the 100% width slideshow from the homepage of my Desktop version to my Phone version and after having applied different resolution images and published successfully, I made some edits to a different page (the main "About" page, nothing to do with the Homepage) and published only to find that the images in the slideshow are now not displaying correctly...
After the first (of eight) image, it seems to skip the next one entirely and apply the text for the 2nd image to the 3rd image, the text for the 3rd image to the 4th image and so on... Additional to that, it seems to also randomly use the Desktop resolution images for four of the images... WHY?!
I made NO changes to the slideshow since the last publish so WHY has it changed?
I've tried re-applying the correct images and re-uploading; no change. I've tried doing a full-upload; no change. I've tried closing down Muse and trying again; no change. My only option left really is to either update to the October 27th edition of Muse (which I was deliberately holding off on, until I completed this project, which aside from the mobile version is done!), or to revert back to the previous version of Muse in the hopes either of these will resolve the issue. Only problem with that is I've started using the text sync features and the new contact form features (such as ReCaptcha, which is a pain in and of itself if you want to use two forms on one page!! Heaven forbid!)... So I'd really rather not have to revert back but I also don't really want to risk screwing anything up further with the latest update, as has happened on more than one occasion for me when in the middle - or near the end - of projects!
Is anyone else encountering this? Anyone able to replicate it? Anyone know how to fix it? I'm really reluctant to continue on with the Phone version of this project until I know I won't keep encountering this sort of thing...
Any help would be appreciated.
Thanks.

In the words of Gomer Pyle, "Well Golly!"
Thanks. lol

100% Width Not Working on Some Mobile Page

Hello,
I have encountered an issue that I cannot diagnose. I am building a mobile site in Muse (the desktop site is already completed), and on all of the pages, there are images that span 100% width. However, on some of those pages, there is a gap along the right hand side between the edge of the image and the edge of the browser window. I unfortunately only have access to Android devices, and it is doing this on Chrome, Chrome Beta, and the default Android Browser. I have tested it using the device emulation features in the Chrome developer tools on desktop, and the issue is there for all devices.
EDIT: It does the same on iOS devices (iPhone)
I have set up my site at a temporary business catalyst URL at: http://mobilewidthissue.businesscatalyst.com/index.html
The issue is appearing on the pages titled 'live' and 'care', but the images and rectangles are great on the 'plan' page. I did notice that those pages (live and care) have the same master, while the other (the plan page) has a different master. However, in an attempt to solve the issue, I tried making 'live' and 'care' have the same master as the 'plan' page, and the issue still existed.
Again, this issue is ONLY ON MOBILE. The desktop site is completed, so please do not evaluate that.
I am open to sending my .muse file to an Adobe employee (in fact, I hope this happens, I have spent too long trying to solve this).
Thanks for your help!

Hello,
I have encountered an issue that I cannot diagnose. I am building a mobile site in Muse (the desktop site is already completed), and on all of the pages, there are images that span 100% width. However, on some of those pages, there is a gap along the right hand side between the edge of the image and the edge of the browser window. I unfortunately only have access to Android devices, and it is doing this on Chrome, Chrome Beta, and the default Android Browser. I have tested it using the device emulation features in the Chrome developer tools on desktop, and the issue is there for all devices.
EDIT: It does the same on iOS devices (iPhone)
I have set up my site at a temporary business catalyst URL at: http://mobilewidthissue.businesscatalyst.com/index.html
The issue is appearing on the pages titled 'live' and 'care', but the images and rectangles are great on the 'plan' page. I did notice that those pages (live and care) have the same master, while the other (the plan page) has a different master. However, in an attempt to solve the issue, I tried making 'live' and 'care' have the same master as the 'plan' page, and the issue still existed.
Again, this issue is ONLY ON MOBILE. The desktop site is completed, so please do not evaluate that.
I am open to sending my .muse file to an Adobe employee (in fact, I hope this happens, I have spent too long trying to solve this).
Thanks for your help!

Can't create %100 width object

I'm new to Muse and am having problems creating a %100 width object.
I have a rectangle containing a fill image that is set to tile horizontally which is part of a group. When I snap the edge of the rectangle it's a blue line instead of a red one and does not indicate that it's a %100 width object.
What could I be doing wrong? Or is this a glitch of some kind? Thanks so much!

Hi
With group objects we cannot do that as 100% width, please ungroup the rectangle and then it would be 100%.
Thanks,
Sanjit

Insert 100% width flash banner in HTML

Hi all,
i am trying to insert a 100% width flash banner in an html
page. The problem i am facing is that i am inserting the banner
inside a div which has some margin in it. This is effecting the
percentage size of the flash banner. How can i display the flash
banner in that div without the margin width effecting the flash
banner size.
(01) - <div style="margin:0px;"> <object
classid="somevalues"></object>
The size of the flash banner is perfect and when the window
is resized the flash banner fills in perfectly with the div tag and
the retains its width and height
(02) - <div style="margin:50px;"><object
classid="somevalues"></object>
The flash banner gets effect and the width is effected.
Please help....

> BUT if I try to insert a Flash movie/banner into the
template - then it
> does not appear of ANY of the site files.
Because of the active content .js fix, when you insert a .swf
file into a
template, you must use a Site Root relative path for it.
Open the .dwt template file.
Double-click on the .swf in design view- the "browse to file"
dialog box
should come up showing the currently selected file.
look in the bottom of that dialog box for the pulldown to
change from
document relative path to site root relative path. Change it
to site root.
click okay and save the file, and let changes propagate.
does it show in the child files now?
[note- It may still not show during local preview because
site root relative
paths in javascript will not make any sense during local
preview- they
should work fine on the remote host if the site has it's own
domain name
though]
Alan
Adobe Community Expert, dreamweaver
http://www.adobe.com/communities/experts/

Horizontal scrolling with a table that is 100% width of window/container

Hello,
I'm a bit perplexed - it seems to me that the only way that I can have both fixed and scrollable columns in a table, with a table that resizes to the width of the user's screen, is to have percentage widths for all the entries.
Warning imminent rant
This seems to me to almost defeat the purpose. I want to be able to show more columns if the user has a large screen, and less if they have a small screen, keep certain key fields always showing and have the space avaliable for each column fixed to the size of the column contents. Having percentages of the screen for all columns just means that the column will get wider and thinner, not more or less!
Is there any hope that this might come along with client side scrolling in NetWeaver EhP2? Or does anyone have a cunning solution to the problem?
Now, I can sort of understand why this functionality has been build like this (the ABAP not having any real idea of how wide the screen actually is) - but why deliever such a solution at all? I can almost understand a fixed width situation, although all that code for a minimal improvement over just specifying the number of scrollable columns is suprising - but I struggle to see the use case for setting all the columns in a table to display as percentage widths.
Rant over -
If anyone does have any ideas how to have a 100% width table with fixed width columns - please do let me know.
Cheers,
Chris

Can this work:
Emebed your table UI element in Transparent Container UI element ( give it a fixed width ), now make table width as 100 % and make each column width as Width of Transparent Container / No of Columns.
Although I'm suggesting this but in my opinion giving fixed width to any UI element height width property is not advisable and recommended. It is because when browser will be resized by the user then if there is a fixed width settings then scrollbars would appear and layout may also go haywire.
If on the other hand if we are giving % (relative of window ) in width height of UI elements then layout will be adjusted automatically.
Regards
Manas Dua

How can I set 100% width my slideshow on mobile version

Hello!
It's been a while I needed to ask this question here but a huge problem of authentication from ADOBE forum took months to be solved by them.
Anyway, I have a website made with muse (desktop). I tried to decline it in tablet and photo version as it said ti be easy from abode muse team video.
But the sideshow photo don't behave in the mobile version as expected.
http://demis.nu/phone/modeles.html
the worse is the landscape orientation. The photos are just to big for the screen.
I tried 100% width, and cancelled it, I tried to resize the size of the photo to fit the both sides of the page...anyway, anything I tried wasn't satisfying.
I know the solution is to make it responsive but I couldn't be able to find the way to do it in Muse.
I tried the demo of muse in the early hours (2011) and years after it's obvious the adobe muse team have understood responsive design rules everything and I'm sure they implemented it but can't find it.
Can someone give me a help please because the phone version is online and is horrible.
thank you so much.

No one could help me please?

How can I specify figure width percent in a div and still default to 100% width on small media

In fluid grids, I want a div that will display a figure and figure caption within a box where I can specify the float (left, center or right) and the percent width that defaults to 100% width below some display size. I would like this div to display correctly on all browsers and as many Internet Explorer versions as possible.
This appears to work fine in my fluid.css:
.myfig {
            background-color: #DAE7F1;
            border: medium solid #000;
            padding: 4px;
            margin: 4px;
            text-align: left;
             width: 33%;
/* On phones and vertical tablets make all figures 100% wide */
@media only screen and (min-width: 0px) and (max-width: 700px) {
    .myfig {
        width: 100%;
and my test.html:
<div class="myfig" style="float:right;" >
   <img src="Images/time-to-adapt.jpg" alt="stuff">
   Figure caption
</div>
But if I put the width in
<div class="myfig" style="float:right; width: 50%;" >
The figure will be 50% so this overrides the default 33% but the figure does not revert to 100% for small media.
I assume the problem is in the order of processing. Anyone know how to make this work or of a definition that will meet my needs?

Use CSS classes.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5, 3-figures</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
/**put this into your CSS Reset**/
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     margin: 0;
     padding: 0;
img {
     width: 100%;
     vertical-align: baseline
body {
     font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
     font-size: 100%;
     background-color: #536475;
     margin: 0 auto;
     padding: 0;
section {overflow:hidden;}
figure {
     float: left;
     padding: 2%;
     text-align:center;
     color:#FFF;
     font-size: 95%;
/**re-usable classes**/
     .twenty {width:20%}
     .forty {width:40%}
     .sixty {width:60%}
/* Special Rules for Mobile, Tablets */
@media only screen and (max-width: 768px) {
     figure, .twenty, .forty, .sixty {
          float: none;
          display: block;
          margin: 0 auto;
          width: 98%;
          font-size: 75%;
</style>
</head>
<body>
<section>
<figure class="twenty"><img alt="description" src="http://placehold.it/200x125"><p>Fig.1</p></figure>
<figure class="forty"><img alt="description" src="http://placehold.it/200x125"><p>Fig.2</p></figure>
<figure class="sixty"><img src="http://placehold.it/200x125" alt="description" ><p>Fig.3</p></figure>
</section>
</body>
</html>
Nancy O.

100% widths & skins on skinnableContainer

Hi all,
Having great fun with Flex 4 however I can't work out how to get 100% width on a SkinnableContainer.
I have the following MXML:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo"
               minWidth="1024"
               minHeight="768">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <s:SkinnableContainer skinClass="skins.SCSkin">
        <s:SimpleText text="Hello world"/>
    </s:SkinnableContainer>
</s:Application>
With my skinClass for skinnableContainer:
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:states>
        <mx:State name="normal"/>
    </s:states>
    <s:Rect top="1" bottom="1" left="1" right="1">
        <s:fill>
            <mx:SolidColor color="#FF0000"/>
        </s:fill>
    </s:Rect>
    <s:Group id="contentGroup"
             top="20"
             bottom="20"
             left="20"
             right="20">
        <s:layout>
            <s:BasicLayout/>
        </s:layout>
    </s:Group>
</s:Skin>
Now I understand that the skin sets things like the padding which I have placed on the Group above (top=20). What I can't figure is how to get 100% width for my SkinnableContainer to sit within it's parent. Reason is I want to style the SkinnableContainer to be kind of like a Box in Flex 3 and set width to be 100%. I can then style this as a containing box as a list item perhaps.
How do you do it? It appears that the SkinnableContainer skin cannot set it's self to be 100% of IT'S parent only it's children. I bet I'm missing something there?
Oh and I have also found that if you place a SkinnableContainer inside a Halo navigator (TabNavigator) you have to place a Halo container as the Halo navigator's first child, no problem. But t=any skin applied to the SkinnableContainer does not show. The only way round is to place the SkinnableContainer inside a Group, then the SkinnableContainer skin appears fine. This sounds like a bug to me, is it or is it intentional?

Opps, yes I forgot about the Metadata an oversight. So the correct way is to use hostComponent (no code hinting yet in IDE) instead of something like width="100%"? They work the same.
Ok so I now have (MXML snippet):
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <mx:TabNavigator width="280" height="100%">
        <mx:Box>
            <s:SkinnableContainer skinClass="skins.SCSkin" width="100%" height="100%">
                <s:SimpleText text="Hello world"/>
            </s:SkinnableContainer>
            <s:SkinnableContainer skinClass="skins.SCSkin" width="100%" height="100%">
                <s:SimpleText text="Hello world"/>
            </s:SkinnableContainer>
        </mx:Box>
    </mx:TabNavigator>
    <s:SkinnableContainer skinClass="skins.SCSkin" width="25" height="50">
        <s:SimpleText text="Hello world"/>
    </s:SkinnableContainer>
With the following Skin code (snippet):
    <fx:Metadata>
        [HostComponent("spark.components.SkinnableContainer")]
    </fx:Metadata>
    <s:states>
        <mx:State name="normal"/>
    </s:states>
    <s:Rect top="1" bottom="1" width="{hostComponent.width}" height="{hostComponent.height}">
        <s:fill>
            <mx:SolidColor color="#FF0000"/>
        </s:fill>
    </s:Rect>
    <s:Group id="contentGroup"
             top="20"
             bottom="20"
             left="20"
             right="20">
        <s:layout>
            <s:BasicLayout/>
        </s:layout>
    </s:Group>
This works fine.
What is strange is that when I use <mx:Box> instead of <mx:Container> my SkinnableContainer skin shows up strange as Box extends Container.
I agree with the concept of mixed Halo and Spark and the nsamespaces.
Thanks

100% width slideshow issue

i've created a full-width slideshow inside of a composition that is also 100% of the page width. when the browser window is re-sized, the page develops a wide margin next to the images.
if you go to http://blipdapp.com/ and click on the "about" link at the bottom, then resize the browser window and select one of the other tabs (connect, create or share), you'll see the problem.
the only way to correct the issue seems to be refreshing the browser. does anyone know of a way to fix this?

Hi, please see the below thread link for a workaround.
Re: slideshow within composition widget - 100%width image causes bug
Also, please vote on the idea to add 100% width support to the composition widget so that the Adobe Muse team will hopefully fix this soon.
100% width composition widget

100% width rectangles not stretching 100% in mobile (phone view)

Muse shows that the rectangle stretches to 100% width, but on iOS devices (iphone 4 and 5), there is a gap by the scroll bar. Since mobile is vital to web development, I would love to know when this fix is coming???

Could you please attach the file again?
Regards,
Neha
Re: 100% width rectangles not stretching 100% in mobile (phone view)

100% width problems on iphones

Similar Messages

Maybe you are looking for