Is it possible to create a sticky header or footer such that no matter where you scroll the header/footer stays put? I'm looking for a HTML/css/javascript solution for iPhone/webkit.
You'd need to do this with JavaScript, as MobileSafari deliberately leaves out support for CSS's position: fixed. You should be able to detect the current viewport and absolutely position an element in the right spot, and update its location when the viewport changes.
Answering my own question: best resource I've found so far is this one: http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
However, I think I'm going to end up using Titanium from Appcelerator instead of just html/css.
There is also another attempt to emulate position: fixed :
http://cubiq.org/scrolling-div-on-iphone-ipod-touch/5
But it's hacky, and not very performant too.
You are right, Titanium or phonegap do the job well...
Related
I also have this issue. I am using Ubuntu and just completed the Hello world tutorial. I wrote some more text and I am unable to scroll. I can see where the words keep going but nothing I have tried lets it scroll. I have not made any HTML/CSS edits. I have only added more text to the <p> tag.
There is some default CSS applied for chrome packaged apps. Putting the following in your CSS should re-enable scrolling:
html {
overflow-y:scroll;
}
Someone is putting together a cool guide which might have some more tips. See https://gist.github.com/maicki/7622137#scrolling
Chrome apps have a default stylesheet applied to them, to help the web "page" be more of an "app" by default.
For Chrome Apps on Mobile, we also include this (well, a nearly identical) default stylesheet.
So that is the reason for that behavior. Scrolling is absolutely useful in very many contexts, and is absolutely supported in any DOM element by adding overflow-y: auto;.
It was simply deemed to be the wrong default for packaged apps which live inside a dedicated window of set bounds and where we encourage not having full page content overflow (very much the opposite of the web). Most apps usually surround a main scrolling element with fixed navigational elements (but not always).
FYI, there is also another open issue for Chrome Apps on Mobile to replicate yet more of the Chrome for Desktop default styles.
Got an issue I've been trying to solve without much luck for a while across various projects.
I've got some divs with text inside that is centered with CSS using display: block and line-height. I also tried with padding and a fixed height. Typically, these are setup as either just headers, or sometimes buttons.
Either way, I always seem to have an offset on the top from vertical center in the mobile safari browser that I don't get in ANY web browser (it's perfectly vertically aligned in a desktop browser). I can alter the setting to center in the mobile browser, but this throws out all the other browsers and this is a responsive design.
Has anyone experienced this issue?
I've got -webkit-text-size-adjust: 100%; but that doesn't seem to be related to this issue.
So far my hack work around is to have devices only css which sets a different line-height, but as you can imagine, that's a horrible solution.
This article has some great information on many different options for centering content when you don't know anything about the widths and heights:
http://css-tricks.com/centering-in-the-unknown/
It builds on from user1002464's answer quite well.
you can use display:table-cell and vertical-align:middle for the div containing the text
Some of the stakeholders on my project expressed doubt in easily recognizing hidden vertical content to scroll to in an MGWT ScrollPanel (without taking a swipe at it). As an attempt to address the concern I'd like to always show the pretty semi-transparent vertical scrollbar as both a hint of more content to scroll to and an indication of the ratio between the amount of displayed vs. all content in the panel.
Is it possible to keep the panel's scrollbars permanently displayed? At first I thought the setShowScrollBarY(boolean) would do the trick but quickly proved myself wrong.
P.S.: Shouldn't there be an m-gwt StackOverflow tag by now? AFAIKT MGWT has gained sufficient traction to have an MGWT-specific stream of questions.
I have had the same issues with clients that suggested that showing scrollbars would be a good idea. If you cut your content right its easy to see for the user that there is more content..
Anyhow I just added a setHideScrollBar(boolean) to the trunk. Download it from ( https://oss.sonatype.org/service/local/artifact/maven/redirect?r=snapshots&g=com.googlecode.mgwt&a=mgwt&e=jar&v=LATEST) and give it a try. Maybe we should also think of an option to flash the scrollbars once to indicate that there is more content.
By the way I would be supporting an mgwt specific tags as I do with the mailing list: https://groups.google.com/group/mgwt
I am trying to achieve the same effect facebook has with wrapping your status if it's too long.
Try to set your status to something like 300 "A" characters with a webkit user agent. How do they do that?
Yes... I know you can use:
word-wrap: break-word
I googled alot and all these tricks only work if you can set the width in advance, which I cannot.
My width is adjusting to 100% screen size to allow stretching when resizing (landscape).
So to sum this up, how can I achieve text wrap without giving a specific width to the element or a parent element, without using JS, under webkit only browser?
I could notice that FB use this property on the parent container:
-webkit-box-sizing: content-box
But I was not able to apply this to my case...
I would assume it's done this way with a server side language before given to the front-end. You typically want to stay away from content manipulation when you have such a large user base. There is a new CSS3 property that will do this for you, but it's not widely supported.
text-overflow:ellipsis;
More info can be found via Google
I think I know what you are looking for,
The trick is the combo of:
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
See this jsfiddle for a demonstration http://jsfiddle.net/bPsav/
I'm an iPhone developer, but new to web development. I've done some basic HTML websites and made one in iWeb as well. I'm trying to branch out to mobile web development now, so I checked out Dashcode.
Anyway, I'm trying to put a Call Button, Mail Button, and Map Button in horizontal alignment. I realize that I can add a Column Layout and have two buttons in a row, but that's the most I've gotten.
Any ideas? Thanks!
Thomas
Edit: I still haven't figured this out yet. I was given advice about a fixed position button bar, but I am not sure how to implement it. I've been looking at code, but haven't gotten it yet. Still trying though. Any help is appreciated!
What i do usually is to select the element you can't align horizontally and then go to the inspector -> dimension tab and in disposition you select fixed absolute.
This should work but beware because if you've the intention to change element's place dynamically you may have some surprise...
I think you are looking for something like this.
A fixed position button bar is created with several buttons side by side.
/Mogens