I am trying to implement dynamic tabs using Kendo UI Tabstrip in Angular JS. How to indicate the active state? For example I want the second tab to be active by default.
Markup with directives
<div data-kendo-tab-strip="" data-k-animation="false" k-data-source="panes" k-data-text-field="'title'" k-data-content-field="'content'" ></div>
//Tabs controller
ngUI.controller('nguiTabsController', function($scope) {
$scope.panes = {
data : [ {title:"First", content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor sed lacus interdum rutrum. Mauris mauris dui, rhoncus ut magna vitae, faucibus elementum lectus. "},
{title:"Second", content:"Sed auctor, turpis at scelerisque dapibus, dolor quam laoreet nibh, in pulvinar augue est a est. Nulla eu nulla nunc. Donec eu augue placerat, tincidunt diam vel, fringilla velit. Ut convallis faucibus neque. Nullam pellentesque, nisi quis facilisis tincidunt."},
{title:"Third", content:"Maecenas posuere tellus vel elit cursus porttitor. Proin auctor lorem risus, sit amet blandit ligula ultricies sit amet. Pellentesque eget velit ut libero faucibus lobortis."},
{title:"Fourth", content:"Suspendisse sodales consequat aliquet. Mauris ultricies nisl a metus convallis, at iaculis elit scelerisque. Nullam dignissim convallis lectus eu malesuada. Etiam libero mi, suscipit at auctor id, porta eu justo. Nullam a ipsum dictum, gravida erat vitae, sollicitudin justo."},
{title:"Fifth", content:"Phasellus suscipit ipsum molestie augue interdum sodales. Sed sit amet eros in odio viverra aliquam vitae nec odio. Nulla condimentum eleifend tortor, non malesuada purus placerat non. Mauris porttitor odio tortor."}]
};
});
Change the div to define the widget reference;
<div data-kendo-tab-strip="tabStrip"...
In the controller, create the tabStrip scope variable and place a watch on it. When it is set, select the desired tab by number.
ngUI.controller('nguiTabsController', function($scope) {
$scope.tabStrip = null;
$scope.$watch('tabStrip', function() {
$scope.tabStrip.select(0);
});
$scope.panes...
}
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 wish I was able to recreate this small menu from the material ui website in my app :
By now I have a component with a list and links :
import { Link, List, ListItem } from '#material-ui/core';
const burgerRecipe = [
{
id: 0,
name: "bread",
quantity: 2
},
{
id: 1,
name: "steak",
quantity: 1
},
{
id: 2,
name: "cheddar",
quantity: 1
},
{
id: 3,
name: "pickles",
quantity: 2
}
]
/**
* MenuInteractiveColumn :
* #description
*/
const MenuInteractiveColumn = props => {
return (
<>
<List>
{burgerRecipe.map(value => {
return (
<ListItem key={value.id}>
<Link href={`/reservations#${value.name}`}
underline="none"
onClick={() => {
console.info("bip bop");
}}
>
{value.name}
</Link>
</ListItem>
)
})}
</List>
<List>
{burgerRecipe.map(value => {
return (
<div id={value.name}>
{value.name} -------------
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in lectus sit amet est mollis pharetra nec non augue. Phasellus eleifend ac erat non aliquam. Donec varius vel orci vel tempus. Suspendisse non dolor est. Duis at consequat diam. Etiam at bibendum orci, at tincidunt nulla. Integer vel quam non urna malesuada auctor. Quisque feugiat ligula dolor, vitae consequat magna mattis nec. Nulla massa nisl, fringilla et felis nec, lobortis placerat lectus. Praesent eget vehicula nulla. Cras lobortis metus sed pellentesque maximus. Proin nisi diam, euismod sit amet lacinia in, fringilla eget dolor. Nunc molestie magna id varius facilisis. Pellentesque sit amet posuere justo. Nullam faucibus lectus at mauris efficitur, sit amet hendrerit massa auctor.
Fusce a dapibus nibh, at dignissim nulla. Donec tempus ut justo eu volutpat. Pellentesque eget diam ipsum. Nullam vehicula lorem et rhoncus mattis. Duis arcu libero, consectetur a sodales eget, malesuada at purus. Integer a mattis eros. Etiam sagittis, lectus cursus commodo molestie, ante justo maximus diam, pellentesque hendrerit nibh est sed ex. Cras pharetra interdum sagittis. Nulla tincidunt scelerisque purus, eget varius ipsum venenatis porta. Etiam fermentum, diam vitae tempor tempus, quam diam iaculis eros, id fringilla sapien felis ut metus. Quisque et mi condimentum, semper justo ultrices, euismod metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras posuere et nisl ac ultrices. Donec eu dolor tincidunt, maximus augue quis, suscipit metus. Praesent convallis ut metus vel eleifend.
Sed eu dignissim urna. Quisque sit amet risus sollicitudin, lobortis purus nec, consequat justo. Vestibulum non mauris faucibus, maximus nulla eu, convallis augue. Aenean vel libero nec felis ullamcorper auctor. Mauris efficitur sed tellus eget semper. Etiam blandit et lectus ut lacinia. Suspendisse faucibus enim convallis, placerat eros vitae, ullamcorper mauris. Quisque quis quam vestibulum, mollis justo ac, pellentesque nisl. Nunc iaculis tortor sit amet ex tristique convallis sit amet sit amet augue. Nulla aliquam sit amet enim eget placerat. Ut quis ex tincidunt, dignissim ligula non, euismod mauris. Sed euismod faucibus massa, vel aliquam elit euismod in.
Aliquam id sapien nibh. Sed eu tellus eros. Cras interdum magna quis arcu dignissim, eget posuere felis dictum. Donec dictum euismod lectus, nec ornare erat suscipit at. Fusce mi nibh, ullamcorper porttitor orci sit amet, placerat ultrices eros. Nam rutrum mauris sit amet magna iaculis aliquet. Sed venenatis urna in metus volutpat, id sagittis nulla tempor. Curabitur odio metus, porttitor sit amet urna ac, posuere rhoncus neque. Morbi tortor libero, dapibus vitae finibus rutrum, placerat quis leo. Vivamus nunc leo, vehicula vulputate cursus ac, placerat vitae ex. Nullam eu nisl purus. Curabitur vitae egestas turpis, quis volutpat felis. Quisque sit amet purus facilisis, posuere ante in, laoreet nisl. Pellentesque ornare dolor nec lectus porttitor, et venenatis orci auctor. Vestibulum ultrices id enim vel interdum. Ut non tortor placerat, consectetur sem at, viverra elit.
Etiam non tellus in nisl facilisis pharetra. Vivamus porttitor justo at fringilla euismod. Nunc neque lacus, scelerisque sed pellentesque quis, ullamcorper nec leo. Nullam sed dolor metus. Vivamus aliquet at erat eu blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis neque at eros feugiat, nec lacinia lorem finibus. In semper vel lacus eu porttitor. Curabitur mollis lectus ac purus pretium, non facilisis odio viverra. Aliquam erat volutpat. Pellentesque ultrices nulla et nisi placerat, non tempus nisl elementum. Sed dui dui, vestibulum posuere enim vitae, sollicitudin rhoncus metus.
</div>
)
})}
</List>
</>
)
};
export default MenuInteractiveColumn;
And I would like it to go to some div in my page like it does on the material ui website
EDIT : It kinda works now but it hides the top of the lorem Ipsum under my navbar
While i do not have the time to make an example based on your code here are some resources which might be interesting to you:
material-ui - AppTableOfContents
react-scrollspy - see example on how this can be used with tabs
react-scroll-agent
Antd anchor
see also material-ui: issue 16359 for more information
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;
}
}