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>
Related
using pandoc's beamer SLIDES example, if one slide is too long, the PDF slide overflows.
How can I make the font size automatically adapt to fit the content in the slide ?
% Eating Habits
% John Doe
% March 22, 2005
# In the morning
- Eat eggs
- Drink coffee
# In the evening
- Eat spaghetti
- Drink wine
# Lorem ipsum
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
- Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.
Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.
You could use the beamer shrink frame option which will scale down the content of the whole frame:
% Eating Habits
% John Doe
% March 22, 2005
# In the morning
- Eat eggs
- Drink coffee
# In the evening
- Eat spaghetti
- Drink wine
# Lorem ipsum {.shrink}
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
- Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.
Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.
If you don't mind using a bit of tex code, you could use a tcolorbox to automatically choose a font size with which the text will fit the page:
---
output:
beamer_presentation:
keep_tex: true
header-includes:
- \usepackage{tcolorbox}
- \tcbuselibrary{fitting}
- \usepackage{lipsum}
---
# In the morning
- Eat eggs
- Drink coffee
# In the evening
- Eat spaghetti
- Drink wine
# Lorem ipsum
\begin{tcolorbox}[fit,width=\textwidth,height=.9\textheight,size=minimal,colback=white,colframe=white,fit algorithm=fontsize]
\begin{itemize}
\item Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
\item Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.
Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.
\end{itemize}
\end{tcolorbox}
I have an issue using the lineno package. It numbers all the lines and equations perfectly but, it results a big empty space at the beginning of each new page. An example of the syntax that I am using is as follows:
\documentclass[preprint,12pt]{elsarticle}
\usepackage{amssymb}
\usepackage{rotating}
\usepackage{theorem}
\usepackage{bm}
\usepackage{amsmath,amsfonts,amssymb,mathabx}
\usepackage{booktabs}
\usepackage{pdfsync}
\usepackage{pdfpages}
\usepackage{float}
\usepackage{threeparttable}
\usepackage{xfrac}
\usepackage{multirow}
\usepackage{multicol}
\usepackage{amsfonts}
\usepackage{amssymb}
\usepackage{bbm}
\usepackage{hyperref}
\usepackage[mathlines]{lineno}\linenumbers
\begin{document}
\begin{frontmatter}
\title{ABCDEFG}
\author[inst1,inst2]{F1}
\affiliation[inst1]{organization={School},%Department and Organization
city={1225},
postcode={2111},
state={5251},
country={5222214}}
\author[inst3]{F2}
\affiliation[inst3]{organization={School},%Department and Organization
city={1225},
postcode={2111},
state={5251},
country={5222222214}}
\begin{abstract}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
\end{abstract}
\end{frontmatter}
\section{Introduction}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
\end{document}
any advice?
Remove the pdfsync package to solve the problem. If you would like to jump between your editor and pdf, use synctex instead.
\documentclass[preprint,12pt]{elsarticle}
\usepackage{amssymb}
\usepackage{rotating}
\usepackage{theorem}
\usepackage{bm}
\usepackage{amsmath,amsfonts,amssymb,mathabx}
\usepackage{booktabs}
%\usepackage{pdfsync}
\usepackage{pdfpages}
\usepackage{float}
\usepackage{threeparttable}
\usepackage{xfrac}
\usepackage{multirow}
\usepackage{multicol}
\usepackage{amsfonts}
\usepackage{amssymb}
\usepackage{bbm}
\usepackage{hyperref}
\usepackage[mathlines]{lineno}
\linenumbers
\begin{document}
\begin{frontmatter}
\title{ABCDEFG}
\author[inst1,inst2]{F1}
\affiliation[inst1]{organization={School},%Department and Organization
city={1225},
postcode={2111},
state={5251},
country={5222214}}
\author[inst3]{F2}
\affiliation[inst3]{organization={School},%Department and Organization
city={1225},
postcode={2111},
state={5251},
country={5222222214}}
\begin{abstract}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
\end{abstract}
\end{frontmatter}
\section{Introduction}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
\end{document}
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).
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.
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>