Related
I currently have two views for an app, "about" and "work." Both pages are in a horizontal scroll view that snaps to feel like a page.
The only problem is when there is a lot of content on one page the other page stretches to be as large which causes there to be a lot of blank space at the bottom.
Here is an example of what I'm talking about.
"About" and "Work Pages
<scrollview>
<View>
//small content
</View>
<View>
//large content
</View>
</scrollview>
You need to wrap the content of each page with a div that has the same height.
.horizontal-pages {
width: 300px;
max-height: 400px;
display: flex;
flex-direction: column;
}
.page-slider {
display: flex;
flex: auto;
overflow: hidden;
}
.page-wrapper {
width: 100%;
height 100%;
overflow: auto;
}
<body>
<section class="horizontal-pages">
<div class="page-header">
page header
</div>
<div class="page-slider">
<div class="page-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisi sem, congue eu diam sit amet, malesuada commodo elit. Ut semper ante id lacus faucibus luctus. Mauris vitae turpis et quam blandit eleifend. Nam laoreet lacus vel egestas molestie. Pellentesque vulputate lacus id orci rutrum dapibus. Proin maximus ligula sit amet justo fringilla volutpat. Integer porta posuere tempus. Aliquam semper blandit est in faucibus.</p>
<p>Morbi vel metus lorem. Aliquam sapien massa, tempus in vehicula eu, sodales vitae magna. Sed vel rhoncus purus, tristique egestas nisi. Sed cursus nulla elit, nec malesuada augue facilisis sit amet. Morbi placerat euismod magna sit amet euismod. Duis quis feugiat massa, quis scelerisque mi. Curabitur eu quam pretium, auctor metus posuere, bibendum libero. Donec eu diam lectus. Sed pellentesque porttitor leo. Curabitur iaculis neque vel dignissim finibus. Vestibulum placerat sollicitudin dictum. Donec dignissim pharetra leo et finibus. Curabitur venenatis ligula a elit laoreet, id facilisis augue ultricies.</p>
<p>Aliquam volutpat enim quis ante vehicula faucibus. Fusce aliquet laoreet malesuada. Morbi tristique nibh sit amet nunc posuere, non facilisis velit venenatis. Aliquam id finibus elit, vitae auctor metus. Ut mollis ex vitae metus placerat condimentum. Donec consequat dapibus accumsan. Nullam mollis dui odio, et pharetra urna auctor non.</p>
<p>Sed sed tellus eu nunc scelerisque mattis. Suspendisse leo dui, congue vitae euismod quis, iaculis et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. In ac condimentum ex. Curabitur tristique velit purus, eget tempus tortor posuere sodales. Nullam vestibulum felis id quam ullamcorper pharetra. Nunc at ultricies purus. Maecenas molestie magna id faucibus lacinia. Vivamus consequat gravida eros, nec pharetra turpis interdum iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam feugiat mauris arcu, vel auctor eros faucibus at. Aliquam tincidunt est non arcu sodales aliquet.</p>
<p>Donec tristique tempor sapien vel vestibulum. Nulla eleifend gravida congue. Donec feugiat arcu sit amet odio posuere, eu lacinia ex iaculis. Fusce a mollis ligula. Donec varius, purus in gravida iaculis, est risus posuere ante, quis tincidunt purus velit sodales ante. Ut ut nulla ligula. Cras enim neque, feugiat dignissim urna pretium, cursus condimentum justo. Praesent mauris quam, vehicula at sem id, sodales consectetur tellus. Suspendisse quis magna rhoncus, dapibus ipsum vel, vulputate lacus. Fusce molestie dui neque, eu iaculis augue porta in. In faucibus interdum massa, et tempor lorem imperdiet a. Aenean sed nulla porttitor, maximus massa eget, pulvinar orci. Suspendisse non volutpat leo, in feugiat dui. Vestibulum eu suscipit purus, in suscipit leo. Nam urna mauris, efficitur vitae commodo non, mollis facilisis massa.</p>
</div>
<div class="page-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisi sem, congue eu diam sit amet, malesuada commodo elit. Ut semper ante id lacus faucibus luctus. Mauris vitae turpis et quam blandit eleifend. Nam laoreet lacus vel egestas molestie. Pellentesque vulputate lacus id orci rutrum dapibus. Proin maximus ligula sit amet justo fringilla volutpat. Integer porta posuere tempus. Aliquam semper blandit est in faucibus.</p>
<p>Morbi vel metus lorem. Aliquam sapien massa, tempus in vehicula eu, sodales vitae magna. Sed vel rhoncus purus, tristique egestas nisi. Sed cursus nulla elit, nec malesuada augue facilisis sit amet. Morbi placerat euismod magna sit amet euismod. Duis quis feugiat massa, quis scelerisque mi. Curabitur eu quam pretium, auctor metus posuere, bibendum libero. Donec eu diam lectus. Sed pellentesque porttitor leo. Curabitur iaculis neque vel dignissim finibus. Vestibulum placerat sollicitudin dictum. Donec dignissim pharetra leo et finibus. Curabitur venenatis ligula a elit laoreet, id facilisis augue ultricies.</p>
</div>
</div>
<div class="page-footer">
page footer
</div>
</section>
</body>
I was able to more or less get what I was looking for. I set a conditional for the content in the large view to only show when the scroll was > 0. That way the smaller view isn't stretched when the other view isn't visible
I want to create a div of max width 200px; how can i auto increase the height in my div? can some help me which css properties should i use ?
my use case is my width of box should be constant but the text i keep in the box should not come out of the box and if excess is there height of the box should increase dynamically ?
This can be easily done. You can use below code :
min-height: 100px;
overflow: hidden;
Let me know if it doesn't resolve, I will help you with this.
If you set width of your div, it's height will automatically adjust to fit the content. There is nothing you need to do for this to work.
div {
max-width: 200px;
/* For clarity */
border: 1px solid black;
}
<div>Hello</div>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam quis nulla. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Cras pede libero, dapibus nec, pretium
sit amet, tempor quis. Vestibulum fermentum tortor id mi. Mauris dictum facilisis augue. Etiam quis quam. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Curabitur sagittis hendrerit ante. Integer vulputate sem a nibh rutrum consequat. Nulla quis diam. Mauris elementum mauris vitae tortor. Aenean placerat. Nunc tincidunt ante vitae
massa. Pellentesque sapien. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Cras elementum. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Itaque earum rerum hic tenetur a sapiente
delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Mauris elementum mauris vitae tortor. Integer imperdiet lectus quis justo. Duis risus. Etiam egestas wisi a erat. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos hymenaeos. Morbi scelerisque luctus velit.
</div>
I'm using this directive to implement a read-more in my ionic app.
My HTML looks like this:
<ion-list>
<ion-item class="item item-thumbnail-left item-text-wrap" ng-repeat="sh in schedule_hosts" type="item-text-wrap">
<img ng-src={{sh.imageURL}}>
<h2>{{sh.firstName}} {{sh.lastName}}</h2>
<p>{{sh.profession.EN}}</p>
<p read-more ng-model="content" words="true" length="5"></p>
</ion-item>
</ion-list>
And in my controller:
$scope.content = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros." +
"Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis. Donec eget sem sit amet ligula viverra gravida. Etiam vehicula urna vel turpis. Suspendisse sagittis ante a urna. Morbi a est quis orci consequat rutrum. Nullam egestas feugiat felis. Integer adipiscing semper ligula. Nunc molestie, nisl sit amet cursus convallis, sapien lectus pretium metus, vitae pretium enim wisi id lectus." +
"Proin at eros non eros adipiscing mollis. Donec semper turpis sed diam. Sed consequat ligula nec tortor. Integer eget sem. Ut vitae enim eu est vehicula gravida. Morbi ipsum ipsum, porta nec, tempor id, auctor vitae, purus. Pellentesque neque. Nulla luctus erat vitae libero. Integer nec enim. Phasellus aliquam enim et tortor. Quisque aliquet, quam elementum condimentum feugiat, tellus odio consectetuer wisi, vel nonummy sem neque in elit. Curabitur eleifend wisi iaculis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non velit non ligula laoreet ultrices. Praesent ultricies facilisis nisl. Vivamus luctus elit sit amet mi.";
This works fine, but as you can see, the content is now the same for every item.
I looking for a way to create a read more functionality that allows me to add the text in HTML, like this:
<p read-more ng-model="content" words="true" length="5">{{sh.content}}</p>
I'm very (very) new to Angularjs and Ionic, any help is appreciated!
It seems you looking for directives. The directive is a feature same as web components.
You issue may be solved like that.
read-more-content.html
<p ng-if="content" read-more ng-model="content" words="true" length="length">{{content}}</p>
read.more.content.js
angular.module('App')
.directive('readMoreContent', function () {
return {
restrict: 'E',
transclude: true,
scope: {
content: '=',
length: '='
},
templateUrl: 'app/components/_read-more.html'
};
});
And usage can be similar like that
<read-more-content content="content" length="5"></read-more-content>
My personal advice split your own code in angular on small components/directives. That allow you avoid lot's of headacke in nearest refactoring. I'm looking forward doing something similar to http://bradfrost.com/blog/post/atomic-web-design/ but in angular.
I am trying to create a table header which gets fixed at a certain. Here is a sample I have worked on(this is what i really need in AngularJS) http://plnkr.co/edit/cxZzrMeiYyaoQQOotX3H?p=preview but it doesn't work in a real application, I am not sure what am I missing on. It would be great to get some suggestions and maybe sample of code .
vm.testScroll = function() {
console.log("insideTestScroll---");
var window_top = $($window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
console.log(window_top + " " + div_top);
$('#sticky').addClass('stick');
} else {
console.log(window_top + " " + div_top);
$('#sticky').removeClass('stick');
}
console.log("after removeClass!");
};
console.log("entering testScroll function call-");
$window.onscroll = vm.testScroll();
console.log("running windowScroll");
With-out seeing more of your real app it's difficult to say what the problem.
But I think you're probably working with document.ready from jQuery and that's breaking something.
For code that's working with the DOM you should add your code to the link method of a directive. Then you can work safely with the DOM because it's ready when the link method is invoked.
Please have a look at the demo below or in this fiddle.
The base code is from this blog post I've only added it into a directive.
angular.module('demoApp', [])
.directive('sticky', StickyDirective);
function StickyDirective() {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
$(window).scroll(sticky_relocate);
sticky_relocate();
}
};
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
} else {
$('#sticky').removeClass('stick');
}
}
}
#sticky {
padding: 0.5ex;
width: 600px;
background-color: #333;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
}
#sticky.stick {
position: fixed;
top: 0;
z-index: 10000;
border-radius: 0 0 0.5em 0.5em;
}
body {
margin: 1em;
}
p {
margin: 1em auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" sticky="">
<p>Made for my post: Stick div at top after scrolling.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque,
lectus in pharetra blandit, augue mauris pulvinar erat, ut euismod nibh
lectus sed diam. Nulla fringilla ultrices ligula. Aliquam vitae felis metus.
Maecenas lacinia bibendum accumsan. Curabitur lobortis convallis purus
non imperdiet. Morbi ut vulputate mauris. Curabitur lacinia faucibus volutpat.
Nulla elit tortor, rhoncus ut luctus eget, blandit in risus. Integer accumsan
ullamcorper lorem id porttitor. Aliquam vitae libero eget magna mollis
gravida.</p>
<div id="sticky-anchor"></div>
<div id="sticky">This will stay at top of page</div>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas
tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor,
justo at ornare bibendum, magna lectus cursus felis, tristique consectetur
arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum
orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p>
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi
sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum
neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices
mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit
quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur
accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque
ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar.
Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum.
Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse
molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna
porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris
nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris.
Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus
tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod
velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales
imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan.
Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla
id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque
ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero.
Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci
enim egestas arcu, sit amet sodales risus leo quis nisi.</p>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas
tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor,
justo at ornare bibendum, magna lectus cursus felis, tristique consectetur
arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum
orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p>
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi
sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum
neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices
mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit
quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur
accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque
ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar.
Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum.
Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse
molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna
porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris
nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris.
Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus
tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod
velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales
imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan.
Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla
id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque
ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero.
Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci
enim egestas arcu, sit amet sodales risus leo quis nisi.</p>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas
tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor,
justo at ornare bibendum, magna lectus cursus felis, tristique consectetur
arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum
orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p>
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi
sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum
neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices
mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit
quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur
accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque
ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar.
Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum.
Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse
molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna
porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris
nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris.
Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus
tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod
velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales
imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan.
Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla
id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque
ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero.
Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci
enim egestas arcu, sit amet sodales risus leo quis nisi.</p>
</div>
So the process is always to use directive when manupulating the html DOM,now the new issue is i am trying to implement this on a table header and the table header shrinks to the header data width,"what a DRAG!!!!!",here is the sample code
//Table HeaderLocking-------------
<table class="table" ts-wrapper>
<thead id="testTable">
<th><label class="checkbox">
<input type="checkbox" ng-model="vm.selectAll" ng-change="vm.selectAllResults();">
</label></th>
function tableScroll () {
var directive = {
restrict: 'A',
link: function(scope,element){
element.bind('scroll', function(){
console.log("scrollingTable");
//var test = element[0].scrollHeight - element.scrollTop();
var test = element.scrollTop();
scope.test = test;
console.log(test);
if(test >= '391'){
console.log("reached!");
angular.element($('#testTable')).addClass('tableHeader');
}
else if(test<'391'){
console.log("moreToGo");
angular.element($('#testTable')).removeClass('tableHeader');
}
});
}
};
return directive;
}
This is probably really simple but I've been on it for ages and can't figure it out....
If I have a simple ordered list, which when I view it in Fire Fox, everything looks fine; the list is displayed the full width of the browser.
If I look at the same page in my Android browser, the list only takes up about a third the width of the screen.
I don't understand it, I have no CSS rules applied so why should the Android browser not use the full width of the screen?
Here's my HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h2 style="text-align:center">This is a long heading which stretches across the page</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dolor diam, lobortis eu volutpat in, accumsan vel massa. Curabitur justo mauris, tempus ut feugiat nec, pellentesque et felis. Proin aliquam varius mi a ultrices. Nam purus tellus, posuere hendrerit tristique at, blandit eu tellus. Curabitur egestas diam at nunc volutpat rhoncus. Cras elementum, magna id tristique porta, justo leo ultrices nisl, et rhoncus magna odio id purus. Aenean pretium augue ut metus congue sed lobortis urna varius. Duis augue diam, posuere sit amet viverra vel, facilisis ac odio. Vestibulum nisi orci, luctus vitae luctus eget, lacinia ut dui. Ut imperdiet, enim nec mattis laoreet, tellus elit bibendum elit, non imperdiet enim mauris eu risus. Curabitur faucibus urna sed turpis tincidunt pulvinar. Etiam tristique nisl eu nibh sodales at convallis mi mattis. Fusce imperdiet posuere lorem quis vulputate. Ut in leo in lorem fermentum hendrerit quis vitae velit. Phasellus tristique mi ac neque tempus sollicitudin. In nec interdum enim. Fusce id magna et ipsum lobortis cursus. Nunc eleifend volutpat elit, a adipiscing tellus posuere et. Phasellus id mauris ante, vehicula suscipit leo.</li><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dolor diam, lobortis eu volutpat in, accumsan vel massa. Curabitur justo mauris, tempus ut feugiat nec, pellentesque et felis. Proin aliquam varius mi a ultrices. Nam purus tellus, posuere hendrerit tristique at, blandit eu tellus. Curabitur egestas diam at nunc volutpat rhoncus. Cras elementum, magna id tristique porta, justo leo ultrices nisl, et rhoncus magna odio id purus. Aenean pretium augue ut metus congue sed lobortis urna varius. Duis augue diam, posuere sit amet viverra vel, facilisis ac odio. Vestibulum nisi orci, luctus vitae luctus eget, lacinia ut dui. Ut imperdiet, enim nec mattis laoreet, tellus elit bibendum elit, non imperdiet enim mauris eu risus. Curabitur faucibus urna sed turpis tincidunt pulvinar. Etiam tristique nisl eu nibh sodales at convallis mi mattis. Fusce imperdiet posuere lorem quis vulputate. Ut in leo in lorem fermentum hendrerit quis vitae velit. Phasellus tristique mi ac neque tempus sollicitudin. In nec interdum enim. Fusce id magna et ipsum lobortis cursus. Nunc eleifend volutpat elit, a adipiscing tellus posuere et. Phasellus id mauris ante, vehicula suscipit leo.</li><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dolor diam, lobortis eu volutpat in, accumsan vel massa. Curabitur justo mauris, tempus ut feugiat nec, pellentesque et felis. Proin aliquam varius mi a ultrices. Nam purus tellus, posuere hendrerit tristique at, blandit eu tellus. Curabitur egestas diam at nunc volutpat rhoncus. Cras elementum, magna id tristique porta, justo leo ultrices nisl, et rhoncus magna odio id purus. Aenean pretium augue ut metus congue sed lobortis urna varius. Duis augue diam, posuere sit amet viverra vel, facilisis ac odio. Vestibulum nisi orci, luctus vitae luctus eget, lacinia ut dui. Ut imperdiet, enim nec mattis laoreet, tellus elit bibendum elit, non imperdiet enim mauris eu risus. Curabitur faucibus urna sed turpis tincidunt pulvinar. Etiam tristique nisl eu nibh sodales at convallis mi mattis. Fusce imperdiet posuere lorem quis vulputate. Ut in leo in lorem fermentum hendrerit quis vitae velit. Phasellus tristique mi ac neque tempus sollicitudin. In nec interdum enim. Fusce id magna et ipsum lobortis cursus. Nunc eleifend volutpat elit, a adipiscing tellus posuere et. Phasellus id mauris ante, vehicula suscipit leo.</li><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dolor diam, lobortis eu volutpat in, accumsan vel massa. Curabitur justo mauris, tempus ut feugiat nec, pellentesque et felis. Proin aliquam varius mi a ultrices. Nam purus tellus, posuere hendrerit tristique at, blandit eu tellus. Curabitur egestas diam at nunc volutpat rhoncus. Cras elementum, magna id tristique porta, justo leo ultrices nisl, et rhoncus magna odio id purus. Aenean pretium augue ut metus congue sed lobortis urna varius. Duis augue diam, posuere sit amet viverra vel, facilisis ac odio. Vestibulum nisi orci, luctus vitae luctus eget, lacinia ut dui. Ut imperdiet, enim nec mattis laoreet, tellus elit bibendum elit, non imperdiet enim mauris eu risus. Curabitur faucibus urna sed turpis tincidunt pulvinar. Etiam tristique nisl eu nibh sodales at convallis mi mattis. Fusce imperdiet posuere lorem quis vulputate. Ut in leo in lorem fermentum hendrerit quis vitae velit. Phasellus tristique mi ac neque tempus sollicitudin. In nec interdum enim. Fusce id magna et ipsum lobortis cursus. Nunc eleifend volutpat elit, a adipiscing tellus posuere et. Phasellus id mauris ante, vehicula suscipit leo.</li>
</ol>
</body>
</html>
Does anyone know how to fix this?
Screenshot follows
Please add the following meta tag between your head tags:
<meta name="viewport" content="width=device-width, initial-scale=1" />
It allows you to control the viewport's size and scale. If you need more info visit this documentation.
In case anybody has this same problem, I've found the answer - it is a bug with Android autofit in ICS & JB. Gingerbread seems ok.
The answer is here - android autofit mode causing issues with css width in web page
Just apply this workaround to the in question
/* work around mobile device auto-fitting */
#media only screen and (max-device-width: 800px) {
#content p {
background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
background-repeat:repeat;
}
}