Here is the undesired result I'm getting:
Click for image (can't embed yet)
Note how the tabs instead of being next to each other all stretch to 100% width and are lined up like a list.
The HTML:
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
JS:
$("#tabs").tabs();
Jquery version: 1.11.0.
Jquery-ui version: 1.10.4.
CSS is the jquery-ui.css you get by downloading 1.10.4 from the official site.
Here is the link to my ThemeRoller just in case (though I've tried with default theme also, to no avail).
I've tried upgrading / downgrading, disabled any other css I have on the page - But I just can' get the tabs to look OK even with no edits or custom code (I've changed some colors but it was done using official jquery-ui ThemeRoller).
Ooops!!!! When downloading the theme from the jquery ui site, I just noticed the components were toggled off! Hence no .css for the Tabs component.
One of those moments...
And something to be aware of for others.
(I will accept this as answer but I have to wait 2 days. As a famous Austrian once said: I'll be back. -- I have now accepted the answer).
Related
Had this working magically on an earlier version (but it broke almost everything else about the layout), but tI thought it was so COOL that I want to recreate it, but without breaking anything else.
So I have a logo (the one I use in this example is just one I borrowed on the internet). But lets say its the logo below:)
I want to use this one on the toolbar, but I want it to "bleed" over the cmd-content below AND above. Easy to get it to bleed to the below one, but how do I let it bleed on the above one?
I created a JSfiddle to show the issue
http://jsfiddle.net/avbd0o2n/
<body>
<md-content layout="column" class="filler" layout-fill id="page">
<md-content id="topbleed" flex=10 class="filler" layout="row"></md-content>
<md-content id="mid" class="filler" layout="row" flex>
<md-content layout="column" class="filler sidebleed" flex="10" id="leftbleed"></md-content>
<md-content layout="column" id="section4-5" flex>
<md-toolbar id="toolbar" class="md-toolbar-tools">
<img layout="row" layout-align="center center" src="http://cf067b.medialib.glogster.com/dimond-queen/media/f4/f4268cbbc332de67e0d2e49d30ee777f4e17845c/tumblr-mgj4rnf0jz1s1e931o1-400.png" style="padding-bottom: 10px;"/>
<span flex></span>
<md-button>
<span style="font-size: 150%;">A</span> A <span style="font-size: 75%;">A</span>
</md-button>
</md-toolbar>
<md-content id="section5 flex">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at nibh sed libero tristique rutrum eu sed est. In a pulvinar risus, dictum faucibus magna. Suspendisse sed quam orci. Proin convallis finibus tortor, eget euismod dolor rutrum in. Nunc lacinia hendrerit massa eu pretium. Donec gravida placerat suscipit. Nam ut hendrerit enim. Donec lacinia ullamcorper diam, et tempus ligula iaculis lacinia. Duis blandit massa sapien, sed egestas nisi fermentum sed. Praesent aliquet, enim in vulputate maximus, risus ante eleifend magna, sed lobortis metus eros maximus justo. Etiam venenatis sem eu nisi tempor tempor. Proin dignissim metus eget interdum vulputate. Praesent iaculis metus ut lorem ornare tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p><p>
Nunc porta laoreet turpis, in ullamcorper turpis suscipit nec. Integer molestie, mi lacinia accumsan sollicitudin, neque felis commodo dolor, interdum suscipit nisi lectus in ligula. Etiam tristique ullamcorper massa. Sed placerat felis at tortor vehicula, vitae ornare felis interdum. Vestibulum lacus velit, egestas vel ante sit amet, sodales vehicula ligula. Etiam auctor nibh tellus, a efficitur lectus porta eu. Suspendisse potenti. Cras placerat ligula orci, feugiat fringilla eros varius convallis. Pellentesque dolor erat, tristique lobortis imperdiet ac, condimentum id nulla. Duis vestibulum est vitae sodales tempor. Sed dictum accumsan rutrum. Pellentesque euismod ornare est a suscipit.
</p><p>
Curabitur nec ipsum hendrerit, lacinia diam in, placerat erat. Morbi hendrerit id est id mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin metus mauris, tincidunt eget dui at, luctus elementum metus. Aenean convallis tellus sit amet velit tempus, eget aliquet urna ultrices. Nam malesuada erat non felis egestas, eget ultrices diam elementum. Fusce eget ante ac urna fermentum molestie id eget nisi.
</p><p>
Curabitur eros diam, facilisis lobortis gravida ac, tincidunt et velit. Fusce suscipit, ex ut vulputate pretium, nisi ligula iaculis tellus, a ornare ex arcu at nisi. Suspendisse interdum iaculis eros, non ullamcorper dolor. Maecenas semper leo auctor malesuada eleifend. Quisque sit amet nunc eu metus faucibus condimentum finibus eu dolor. Quisque vel dui tincidunt, tristique diam eu, scelerisque lacus. In sit amet ipsum molestie, laoreet leo ac, bibendum urna. Sed id erat vitae lacus bibendum porta ac ut velit. In vel nunc tempus, laoreet ante a, dapibus tellus. Nunc fermentum arcu sed vulputate laoreet. Quisque magna ante, fermentum nec rhoncus non, pretium eget sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sem elit, volutpat eget ultrices in, iaculis at lorem. Sed lobortis felis lectus, eget auctor diam molestie eget.
</p><p>
Aliquam condimentum massa ut blandit interdum. Suspendisse varius ultrices quam a auctor. Mauris at ornare quam. Donec rutrum dictum scelerisque. Suspendisse finibus pulvinar odio, sit amet vulputate ipsum accumsan condimentum. Nulla at auctor neque, sollicitudin vehicula lacus. Curabitur tincidunt sagittis orci, vel imperdiet dui congue ut. Curabitur ac sapien ut dolor pharetra malesuada in lacinia metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur non suscipit enim. Phasellus in eros euismod, malesuada dolor sit amet, mattis sapien. Donec maximus libero vel est imperdiet, vel fermentum sapien rhoncus. Integer ultricies non sem nec facilisis. Ut gravida id quam quis finibus.
</p><p>
Maecenas vel neque laoreet, accumsan risus sed, sollicitudin sem. Fusce semper sapien ex, vitae posuere metus tempor id. Sed lacinia ex vel elit efficitur vestibulum. Praesent vitae dapibus ante. Curabitur suscipit nulla id feugiat finibus. Cras ut est ut neque vestibulum rutrum. Proin vel tristique velit. Morbi ut urna felis. Sed vitae tortor maximus est accumsan porta. Nunc ut dapibus justo, tincidunt suscipit ipsum. Aenean dapibus velit ut mollis efficitur.
</p><p>
Aenean in lorem suscipit ante elementum interdum. Donec pretium suscipit lacinia. Vestibulum quis ultricies elit. Donec condimentum sollicitudin neque. Etiam a viverra erat. Vivamus posuere volutpat magna, ac pellentesque elit vulputate at. Vestibulum in turpis eu turpis ullamcorper tristique vitae nec turpis. Curabitur vestibulum vehicula nisl, in vulputate neque vehicula in. Suspendisse dignissim, sem non rutrum iaculis, augue nisi aliquet urna, ac faucibus ligula risus vel mauris. Aenean sem justo, viverra nec tincidunt ac, mollis vehicula magna. Aenean eu mi dapibus, pulvinar felis in, maximus nisl. Nulla mollis purus eu viverra rutrum.
</p>
</md-content>
</md-content>
<md-content id="rightbleed" flex=10 class="filler sidebleed"></md-content>
</md-content>
</md-content>
</body>
OK, so I sort of fixed it.
If the md-content and md-toolbar is on the same "level" it seems to work. So in the above example, if you move the md-content above into the same set of md-contents. It works (check out where topbleed ended up). Or:
<md-content id="mid" class="filler" layout="row" flex>
<md-content layout="column" class="filler sidebleed" flex="10" id="leftbleed"></md-content>
<md-content layout="column" id="section4-5" flex>
<md-content id="topbleed" flex=10 class="filler" layout="row"></md-content>
<md-toolbar id="toolbar" class="md-toolbar-tools">
<img layout="row" layout-align="center center" src="http://cf067b.medialib.glogster.com/dimond-queen/media/f4/f4268cbbc332de67e0d2e49d30ee777f4e17845c/tumblr-mgj4rnf0jz1s1e931o1-400.png" style="padding-bottom: 10px;"/>
<span flex></span>
<md-button>
<span style="font-size: 150%;">A</span> A <span style="font-size: 75%;">A</span>
</md-button>
</md-toolbar>
<md-content id="section5 flex">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at nibh sed libero tristique rutrum eu sed est. In a pulvinar risus, dictum faucibus magna. Suspendisse sed quam orci. Proin convallis finibus tortor, eget euismod dolor rutrum in. Nunc lacinia hendrerit massa eu pretium. Donec gravida placerat suscipit. Nam ut hendrerit enim. Donec lacinia ullamcorper diam, et tempus ligula iaculis lacinia. Duis blandit massa sapien, sed egestas nisi fermentum sed. Praesent aliquet, enim in vulputate maximus, risus ante eleifend magna, sed lobortis metus eros maximus justo. Etiam venenatis sem eu nisi tempor tempor. Proin dignissim metus eget interdum vulputate. Praesent iaculis metus ut lorem ornare tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p><p>
Nunc porta laoreet turpis, in ullamcorper turpis suscipit nec. Integer molestie, mi lacinia accumsan sollicitudin, neque felis commodo dolor, interdum suscipit nisi lectus in ligula. Etiam tristique ullamcorper massa. Sed placerat felis at tortor vehicula, vitae ornare felis interdum. Vestibulum lacus velit, egestas vel ante sit amet, sodales vehicula ligula. Etiam auctor nibh tellus, a efficitur lectus porta eu. Suspendisse potenti. Cras placerat ligula orci, feugiat fringilla eros varius convallis. Pellentesque dolor erat, tristique lobortis imperdiet ac, condimentum id nulla. Duis vestibulum est vitae sodales tempor. Sed dictum accumsan rutrum. Pellentesque euismod ornare est a suscipit.
</p><p>
Curabitur nec ipsum hendrerit, lacinia diam in, placerat erat. Morbi hendrerit id est id mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin metus mauris, tincidunt eget dui at, luctus elementum metus. Aenean convallis tellus sit amet velit tempus, eget aliquet urna ultrices. Nam malesuada erat non felis egestas, eget ultrices diam elementum. Fusce eget ante ac urna fermentum molestie id eget nisi.
</p><p>
Curabitur eros diam, facilisis lobortis gravida ac, tincidunt et velit. Fusce suscipit, ex ut vulputate pretium, nisi ligula iaculis tellus, a ornare ex arcu at nisi. Suspendisse interdum iaculis eros, non ullamcorper dolor. Maecenas semper leo auctor malesuada eleifend. Quisque sit amet nunc eu metus faucibus condimentum finibus eu dolor. Quisque vel dui tincidunt, tristique diam eu, scelerisque lacus. In sit amet ipsum molestie, laoreet leo ac, bibendum urna. Sed id erat vitae lacus bibendum porta ac ut velit. In vel nunc tempus, laoreet ante a, dapibus tellus. Nunc fermentum arcu sed vulputate laoreet. Quisque magna ante, fermentum nec rhoncus non, pretium eget sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sem elit, volutpat eget ultrices in, iaculis at lorem. Sed lobortis felis lectus, eget auctor diam molestie eget.
</p><p>
Aliquam condimentum massa ut blandit interdum. Suspendisse varius ultrices quam a auctor. Mauris at ornare quam. Donec rutrum dictum scelerisque. Suspendisse finibus pulvinar odio, sit amet vulputate ipsum accumsan condimentum. Nulla at auctor neque, sollicitudin vehicula lacus. Curabitur tincidunt sagittis orci, vel imperdiet dui congue ut. Curabitur ac sapien ut dolor pharetra malesuada in lacinia metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur non suscipit enim. Phasellus in eros euismod, malesuada dolor sit amet, mattis sapien. Donec maximus libero vel est imperdiet, vel fermentum sapien rhoncus. Integer ultricies non sem nec facilisis. Ut gravida id quam quis finibus.
</p><p>
Maecenas vel neque laoreet, accumsan risus sed, sollicitudin sem. Fusce semper sapien ex, vitae posuere metus tempor id. Sed lacinia ex vel elit efficitur vestibulum. Praesent vitae dapibus ante. Curabitur suscipit nulla id feugiat finibus. Cras ut est ut neque vestibulum rutrum. Proin vel tristique velit. Morbi ut urna felis. Sed vitae tortor maximus est accumsan porta. Nunc ut dapibus justo, tincidunt suscipit ipsum. Aenean dapibus velit ut mollis efficitur.
</p><p>
Aenean in lorem suscipit ante elementum interdum. Donec pretium suscipit lacinia. Vestibulum quis ultricies elit. Donec condimentum sollicitudin neque. Etiam a viverra erat. Vivamus posuere volutpat magna, ac pellentesque elit vulputate at. Vestibulum in turpis eu turpis ullamcorper tristique vitae nec turpis. Curabitur vestibulum vehicula nisl, in vulputate neque vehicula in. Suspendisse dignissim, sem non rutrum iaculis, augue nisi aliquet urna, ac faucibus ligula risus vel mauris. Aenean sem justo, viverra nec tincidunt ac, mollis vehicula magna. Aenean eu mi dapibus, pulvinar felis in, maximus nisl. Nulla mollis purus eu viverra rutrum.
</p>
</md-content>
</md-content>
<md-content id="rightbleed" flex=10 class="filler sidebleed"></md-content>
</md-content>
</md-content>
I want to use jquery UI tabs in more than one pages. However the number of tabs are different and I am stuck on how to adjust the tab width on every page.
On one page I have this :
<div id="tabs">
<ul>
<li>5 Star Hotel in Delhi</li>
<li>Budget Hotels in Delhi</li>
<li>50th IIGF Officials Hotels</li>
</ul>
it is ok and working fine. Now on second page I have again this :
<div id="tabs1">
<ul>
<li>About Delhi</li>
<li>Reaching Delhi</li>
<li>Delhi Attractions</li>
<li>Other Places of interest in Delhi</li>
<li>Nearby City Tours from Delhi</li>
</ul>
Now I have to adjust the tab li width as well as anchor font size of this to get them on single row.
Hope now it is clear
I don´t understand your question.
If you are using jQuery UI tabs you call the "plugin" like this:
$( "#tabs" ).tabs();
});
Your DOM Elements should look like this:
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
If you add a new Tab, jQuery automatically build the wrapper around it.
The width of each element is fluid or made with CSS.
Is it possible to make a Primefaces Layout Scrollable? I dont want to make my layoutUnits scrollable as I dont really want multiple scrollable elements on the pages. I would prefer for the page & content panels to resize according to the content, so the user can view the data in a linear fashion. I am currently using a full page primefaces layout:
<p:layout fullPage="true">
If this isnt possible then what is my best alternatives as I quite like the primefaces components but could live without its layout features.
Cheers
You can create a layoutUnit for center, then provide a style class in it, where in your css you can provide scrollable along to x and y position.
<p:layoutUnit position="center">
<div id="myScreen" class="right col scroll-x scroll-y">
<ui:insert name="content">My Screen Content Goes Here</ui:insert>
</div>
</p:layoutUnit>
And in cc file --
.col {
top: 0; bottom: 0;
}
.scroll-x {
overflow-x: auto;
}
.scroll-y {
overflow-y: auto;
}
Hope this would help.
as far as i can tell it cannot be done! I dumped the primefaces layout and went with a generic web layout...
Just put everything in a <p:scrollPanel> component inside the <p:layoutunit>, that will work (now that it's 2015 and we are on Primefaces v5.1.x!). Make sure you add absolute positioning and height to stretch the <p:scrollPanel> to the innards of the <p:layoutunit> - see below.
http://www.primefaces.org/showcase/ui/panel/scrollPanel.xhtml
<p:scrollPanel mode="native" style="position: absolute; height: 100%;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean blandit tortor a ipsum vehicula, in semper sapien auctor. Nulla tempor eget est non consequat. Nulla sit amet lorem justo. Cras non tellus eros. Sed ultricies orci ut quam interdum fringilla. Nam vitae massa ac mi elementum mattis vel vitae sem. Ut eros ipsum, scelerisque a erat a, eleifend luctus nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<p>
Vivamus ac ullamcorper magna. Aenean felis ante, elementum sit amet urna at, eleifend aliquet velit. Morbi a convallis magna. In nec leo vel dolor hendrerit pharetra. Cras in iaculis enim. Aenean porta sapien dignissim turpis dapibus, eu dictum velit elementum. Aliquam sollicitudin gravida luctus.
</p>
<p>
Ut vel nulla sit amet erat laoreet eleifend nec sed lacus. Quisque placerat diam vitae justo eleifend, rutrum mollis mauris fringilla. Curabitur turpis odio, euismod id lorem a, ultricies suscipit ligula. Pellentesque ut erat a leo rhoncus porta ac sed velit. Nunc at erat ligula. Fusce vehicula posuere interdum. Curabitur tempus, tortor at sollicitudin dapibus, erat ante varius nisl, id dictum erat ipsum porttitor ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla id varius enim, sed rutrum orci.
</p>
<p>
Sed tincidunt urna quis metus lacinia commodo. Praesent convallis eros vel quam scelerisque bibendum. Mauris eget dignissim libero. Pellentesque sagittis sem quis ipsum viverra, sed consequat mi consectetur. Donec facilisis dapibus ultrices. Donec luctus auctor lacus, at congue nisi aliquet eu. Praesent in justo at risus faucibus ultricies. Fusce et libero lectus. Donec elementum pharetra sapien, at placerat purus sodales et. Vivamus iaculis lacus sed placerat rhoncus. Mauris iaculis sit amet nunc at placerat. Donec consequat euismod lacinia. Etiam nec quam vehicula, cursus massa in, ullamcorper erat.
</p>
<p>
Praesent volutpat scelerisque vestibulum. In eu massa non neque rutrum commodo. Nunc vel enim nisi. Aenean leo ipsum, molestie vel justo nec, pharetra luctus dui. Nunc rhoncus turpis id lorem luctus consequat. Nulla condimentum adipiscing turpis consequat semper. Etiam ullamcorper velit nec hendrerit malesuada. Praesent venenatis leo sit amet arcu commodo, sit amet porta tellus suscipit. Quisque mi tortor, vestibulum in arcu non, pretium auctor libero. In commodo luctus placerat.
</p>
</p:scrollPanel>
I don't believe that layouts are right for what you want to do here. This is good for enabling templating on a single page and the such. You might be able to however put an iframe within a layoutUnit to emulate the same effect though I have never tried this personally and couldn't tell you if it will work or not.
I need to create tabs dynamically based on db results, but since I am just starting to learn jquery and UI, I thought of creating something simple first.
basically I am starting with three tabs initially, and trying to add another through jquery
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<img src="content/user_avatars/User_full_blank.jpg" width="200px" height="300px"/>
</div>
</div>
As you can see, I simply tried creating a list item in the ul, before calling the tabs method.
$(function(){
$('#tabs ul').append('<li><span>New Tab<span></li>');
$('#tabs').tabs();
})
This worked great in firefox, but in IE, I see "New Tab" appear as simple text beside the three initial tabs, it is not stylised or clickable or anything.... any help?
I don't think IE likes the span inside of the anchor.
This works:
$(function(){
$('#tabs ul').append('<li>New Tab</li>');
$('#tabs').tabs();
});
This should be any easy one for you. I have an accordion that I'd like to be a fixed height. Each pane should be the same size, if there is any overflow on a pane a scroll bar should appear. In the code below the scroll bars appear on load for the first pane, but after the first pane change, the accordion expands it's height, so scroll bars are no longer needed.
What am I doing wrong?
<head>
<script type="text/javascript">
jQuery(document).ready(function(){
$('#accordion').accordion({autoHeight: false, clearStyle: true});
});
</script>
</head>
<body>
<div id="accordion">
<h3>First Section</h3>
<div style="height:50px; overflow:auto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis vehicula dui, quis volutpat odio bibendum a. Proin posuere convallis lorem id mattis. Vestibulum lacinia lacinia enim ut euismod. Aenean sit amet tincidunt nunc. Vestibulum gravida, ipsum in tempor dictum, diam nulla auctor purus, a vehicula ante odio quis massa. Pellentesque imperdiet urna ut elit adipiscing ac gravida lectus facilisis. Curabitur laoreet, justo vel dapibus auctor, enim sem dapibus nulla, sed lacinia felis felis sit amet dolor. Nulla lacus dolor, tincidunt convallis sodales vitae, interdum a sapien. Cras ut iaculis orci. Mauris vel nisl vel leo venenatis hendrerit. Duis aliquet lobortis purus, non malesuada lorem sagittis quis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sit amet posuere eros. Nam vel turpis at sem adipiscing scelerisque a ac dolor. Morbi lobortis tristique felis, at aliquam libero suscipit sed. Aliquam erat volutpat. Donec porta lorem sed nisl fermentum pulvinar vehicula risus tempus. Integer ultricies dignissim vehicula. Morbi non dolor a arcu rutrum congue. Fusce non urna vitae eros blandit vehicula quis vel ligula.
</div>
<h3>Second Section</h3>
<div style="height:50px; overflow:auto">
Etiam varius, orci sit amet pharetra laoreet, diam augue dictum justo, et aliquam enim leo ut nulla. Quisque mi nunc, sagittis at euismod vel, feugiat a erat. In a metus quam. Pellentesque ullamcorper volutpat congue. Nunc facilisis varius velit eu lacinia. Quisque est nulla, tempus commodo gravida quis, consequat ut felis. Donec mattis, neque sagittis feugiat sollicitudin, augue lectus vulputate ligula, eget interdum nulla massa at nunc. Proin rhoncus nunc non felis mattis accumsan. Aliquam metus ligula, adipiscing ac ullamcorper vel, lobortis non erat. Aenean placerat libero porta enim dictum malesuada molestie sapien ultricies. Nullam ac commodo ligula.
</div>
<h3>Third Section</h3>
<div style="height:50px; overflow:auto">
Morbi nec risus velit, eget ornare nibh. Duis semper elementum erat, ac egestas purus congue et. Sed commodo lacinia lorem, ac semper risus dapibus mattis. Aliquam quam quam, ultrices quis luctus sit amet, cursus vitae dolor. Nam id lectus justo. Pellentesque in leo sit amet metus eleifend lobortis eget nec turpis. Praesent vitae magna eget mauris cursus tempus vel at mi. Nulla vitae leo accumsan magna mollis luctus. Curabitur viverra nisi ac nisl pulvinar gravida. Curabitur consectetur, diam non placerat sagittis, velit nunc porttitor quam, vel interdum lorem est ut arcu. Suspendisse potenti. Pellentesque vitae leo nunc.
</div>
</div>
</body>
</html>
I appears that the height property is being animated as the accordion opens and closes. So once the top panel has been closed one time, it's height has been changed from the one specified in the inline style and is 'lost'.
I found when I factor the style out into the header the accordion works as desired:
<head>
<style type="text/css">
#accordion>div{
height:50px;
overflow:auto;
}
</style>
</head>