I am creating an ordered list within a webview and I want to remove the indentation from the list, i.e. have the list aligned with the first paragraph. Here's HTML:
<body style="font-family: arial""font-size:18">
<p>First paragraph.</p>
<p>
<ol style="margin-left:0px">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ol>
</p>
</body>
Notice that with the margin-left:0px, the webview still indents the list by about 17 points. If I say margin-left:-17px, I can make it work with a hack but would rather not as it seems more like I'm doing something wrong with the construction of my HTML.
Can anyone see any problems with it?
Updated HTML - Still doesn't work:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-family: arial;
font-size: 18px;
}
ol {
padding-left: 0px;
}
</style>
</head>
<body>
<p>Paragraph.</p>
<p>
<ol>
<li>List item 1.</li>
<li>List item 2.</li>
<li>List item 3.</li>
</ol>
</p>
</body>
</html>
I'm using iOS 5.1 on iPhone 3GS
You can archive style like that with :
ol {
list-style-type: none;
margin: 0;
padding: 0;
}
Try This....
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-family: arial;
font-size: 18px;
}
.flush-left {
padding-left: 25px;
}
</style>
</head>
<body>
<p>First paragraph.</p>
<p>
<ol class="flush-left">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ol>
</p>
</body>
</html>
A couple of other pointers. Test your stuff out in test files in html on your desktop and load them into Safari and the iOS Simulator (Drag html file onto safari open in simulator).
But then you can use Regular Safari Debug tools to examine the html and css. or Firebug in Firefox.
Also, when in doubt www.w3schools.com ... :)
Perhaps I'm a bit late for your needs – I just came across this.
I only noticed this on my iPhone, and not my iPad, nor Safari on the Mac. I found that a bit strange that this issue would only be in the one version of Safari, and not all. I wasn't happening in Chrome either.
When looking in the Chrome developer tools, I noticed that the user agent stylesheet had added a number of -webkit prefixed styles, all to do with margin and padding:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
When I first saw that, I was wondering if that was the issue, but, it was late, and I had to take a sleep break. Today, I tackled it again, but forgot about these styles. I looked around, and came across #Remover's question. But, setting a specific pixel-based margin or padding didn't sit well with me.
At some point, I decided to narrow my browser window in Chrome, and low and behold the issue was there as well, only when I narrowed it to be close to the width of an iPhone. So, this isn't just an iOS issue. It's webkit.
I looked again at the styles in the dev tools, and saw again the -webkit styles, and the 40px on -webkit-padding-start. I played around with my css, and that was indeed the culprit.
I then added the following to my stylesheet:
ol {
-webkit-padding-start: 2em;
-ms-padding-start: 2em;
-moz-padding-start: 2em;
-o-padding-start: 2em;
padding-start: 2em;
}
I did some quick research, and it looks like only -webkit and -moz are using padding-start, but I added the rest, just in case they pick it up – though, now that Opera has switched to webkit, -o probably isn't needed.
In my case, I used 2em, as that worked with my style. Not sure if 2em will work across the board or not.
Edit
I should have also mentioned that it probably only shows up on small screens because it's set at 40px. In my design, my base font-size at full screen is 23px, and at 480px and below is 10px, which is quite a bit of a difference.
If you merely assign a padding of zero, the bullets go off the screen. I found that the following worked perfectly for my webview
ul,ol {padding-left: 20px;}
li {padding-left:2px;}
isn't it
<ul><li></li></ul>
not <ol> ?
also it looks the you might have a syntax error on your style for your body tag
:)
~ Dan
Related
I'm having a weird display issue when testing a site on an iPhone4 running iOS6.
For some reason, the iPhone ignores the display: inline; rule when I click on the parent link. I've been browsing the test site using Safari developer tools, and the toggle class names are working as intended.
I'm using this piece of javascript to toggle class names on the div:
$('.toggle').click(function() {
$(this).toggleClass('toggle');
$(this).toggleClass('toggle_open');
});
The mark up looks like this:
<div class="toggle">
<span>Parent</span>
<div>
<span>Child 1</span>
<span>Child 2</span>
<span>Child 3</span>
</div>
</div>
CSS:
div.toggle div { display: none; }
div.toggle, div.toggle_open { display: inline; }
If I change display: inline to inline-block it works. If I remove display: inline completely it works, but then causes display issues in the browser. I want to use display: inline; so the contents of my mark up display on 1 line or 2 if required.
I'm aware I could use modinizer to create a rule for 'touch' and 'no-touch', but this seems like over kill for something that is probably a bug created by my code :)
What have I done to upset mobile Safari?
I'm trying to use this HTML:
<ol>
<li>link
<li>link
</ol>
<ol>
<li>Some Link: link
<li>Some Link: link
</ol>
On iPhone or the simulator, I get this result:
Why is this happening, and what are some possible workarounds?
Note: This affects UL lists in the same way. It does not happen on iPad (only on iPhone and, I suppose, iPod touch).
Workaround 1
ol, ul {
-webkit-text-size-adjust: 100%;
}
Source: http://blog.55minutes.com/2012/04/iphone-text-resizing/
As noted in the link, Twitter Bootstrap uses -webkit-text-size-adjust: 100%; out of the box.
As for why this workaround works, MDN's document on text-size-adjust may help.
Workaround 2
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I have always wanted to add Facebook share buttons to my applications, but the problem that I have is that they all look different. I see sites like this that have custom designed share buttons. Does anybody know a good tutorial, or have any pointers, about how to tackle this?
Sharing something one facebook is quite easy, here is the HTML for my custom share button.
<div id="share_div">
<div id="share">
<a class="click" href="http://www.facebook.com/dialog/feed?app_id={{fbapp_id}}&link={{link_url}}&message={{share_message|urlencode}}&display=popup&redirect_uri={{link_url}}" target="_blank">
Share
</a>
</div>
</div>
Where all the {{variables}} are to be replace by correct value :
fbapp_id is the id of your facebook application.
link_url is a link attached to the shared content (like a link to your site)
and share_message|urlencode is the message that is shared and it needs to be urlencoded.
Also here some css to style this like a real facebook button :
#share {
border:1px solid #0D386F;
background-color:#5D7DAE;
height:24px;
width: 100px;
}
#share a.click {
font-size:13px;
font-weight:bold;
text-align:center;
color:#fff;
border-top:1px solid #879DC2;
background-color:#5D7DAE;
padding: 2px 10px;
cursor: pointer;
text-decoration:none;
width:80px;
display:block;
}
But I let you the pleasure of customizing as you like, the important part being the href of the a tag
Does it answer your question ?
I was aware of multiple scrolling libraries (TouchScroll, iScroll) for the iPhone/iOS due to its inability (???) to support overflow:scroll . However, I was not aware (and I am looking for confirmation) that IFRAMEs don't really work either. It appears that the iframe doesn't respect any attempt to give it a fixed size and always just resizes itself to its content. Am I correct on this? Is the only way to scroll an IFRAME to place it inside a block element with the overflow CSS property set and then to use a lib like the aforementioned?
simply adding...
overflow-y:auto;
-webkit-overflow-scrolling:touch;
to a div around my iframe worked for me
You can scroll any content which is set to overflow:auto by touching with two fingers and dragging. Don't put iFrame inside a div with overflow:auto, and instead set the iframe to overflow:auto itself. Unfortunately, iframe scrolling is very choppy, regardless of content or device, so the best solution is to find a way to make your content fit into one long page, with "top" & "bottom" view divs set to follow the viewport (if this is the effect you're going for.)
Have you given Joe Hewitt's Scrollability library a go?
You can read more about it here:
Scrollability, New iOS Physics Project from Facebook for iPhone Creator, Joe Hewitt
Hope this helps.
The code below works for me (thanks to Christopher Zimmermann for his blog post http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/). The problems are:
1. There are no scroll bars to let the user know that they can scroll
2. Users have to use two-finger scrolling
3. The PDF files are not centered (still working on it)
<!DOCTYPE HTML>
<html>
<head>
<title>Testing iFrames on iPad</title>
<style>
div {
border: solid 1px green;
height:100px;
}
.scroller{
border:solid 1px #66AA66;
height: 400px;
width: 400px;
overflow: auto;
text-align:center;
}
</style>
</head>
<body>
<table>
<tr>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
</tr>
<tr>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
</tr>
</table>
<div> Here are some additional contents.</div>
</body>
</html>
Flippant answer: don't use IFRAMES anymore.
Whenever there is a SPAN element in HTML content, the mobile version of Safari renders content differently- it seems that font size increases for the whole paragraph. Consider two examples.
<div style="border: 1px solid red; width:500px;">
<p>This is a paragraph. This is a paragraph. This is a paragraph.</p>
</div>
and
<div style="border: 1px solid red; width:500px;">
<p>This is a <span>paragraph</span>. This is a paragraph. This is a paragraph.</p>
</div>
Second example breaks page structure because font size increases, and thus the content exceeds div's width. Is there any way around this (besides not using SPAN)?
iPhone OS 3.1.2
try adding -webkit-text-size-adjust: none; to the CSS and iPhone safari should stop making the span font size look differnet.
The display of those two HTML fragments look identical to me on iPhone Safari (also iPhone OS 3.1.2).
Is there any CSS being applied to SPAN tags?
[Edit: I see the difference now; you won't see any difference if both examples are on the same page.]
[Added:]
By explicitly setting the size, it appears you can get consistent text size between the two. For example:
<style type="text/css">
div, p, span {
font-size: 24px;
}
</style>
Paul, could you try explicitly setting the font-size for the span to match that of the paragraph tag and see if this solves your issue?