pandoc beamer text overflows - latex

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}

Related

Latex line numbers spacing issues at the beginning of each new page

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}

Setting a picture to "bleed" over parent md-content

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>

Remove outer tags but keep inside ones

I'm trying to remove outer p tags if there is another tag inside, the rest of the p tags should be kept. (The last line in the code block below).
<p><img id="__mcenew" src="/media/1902/agf.jpg" alt="" rel="11861" /></p>
<p><h1>Nyt design formidler oplevelserne</h1></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a erat et quam luctus tincidunt. Mauris convallis mattis sapien, eu laoreet lectus tempus vitae. Duis bibendum feugiat neque, eget porta purus egestas at. Mauris a libero et risus pretium efficitur ut nec diam. In rutrum maximus condimentum. Donec id est turpis. Sed nulla magna, dignissim at tellus sed, pretium pharetra ante. Suspendisse dolor est, gravida sed ultricies non, tempus sed elit.</span></p>
<p><h1>Nyt design formidler oplevelserne</h1></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a erat et quam luctus tincidunt. Mauris convallis mattis sapien, eu laoreet lectus tempus vitae. Duis bibendum feugiat neque, eget porta purus egestas at. Mauris a libero et risus pretium efficitur ut nec diam. In rutrum maximus condimentum. Donec id est turpis. Sed nulla magna, dignissim at tellus sed, pretium pharetra ante. Suspendisse dolor est, gravida sed ultricies non, tempus sed elit.</p>
This is how I want it to look:
<img id="__mcenew" src="/media/1902/agf.jpg" alt="" rel="11861" />
<h1>Nyt design formidler oplevelserne</h1>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a erat et quam luctus tincidunt. Mauris convallis mattis sapien, eu laoreet lectus tempus vitae. Duis bibendum feugiat neque, eget porta purus egestas at. Mauris a libero et risus pretium efficitur ut nec diam. In rutrum maximus condimentum. Donec id est turpis. Sed nulla magna, dignissim at tellus sed, pretium pharetra ante. Suspendisse dolor est, gravida sed ultricies non, tempus sed elit.</span>
<h1>Nyt design formidler oplevelserne</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a erat et quam luctus tincidunt. Mauris convallis mattis sapien, eu laoreet lectus tempus vitae. Duis bibendum feugiat neque, eget porta purus egestas at. Mauris a libero et risus pretium efficitur ut nec diam. In rutrum maximus condimentum. Donec id est turpis. Sed nulla magna, dignissim at tellus sed, pretium pharetra ante. Suspendisse dolor est, gravida sed ultricies non, tempus sed elit.</p>
Any help is appreciated, I've tried a few things out in JS/JQuery and Razor/C#, but i'm stuck on this.
Fixed it using jQuery unwrap() method.
for images:
$("#maincontent img").unwrap();
for span:
$("#maincontent span").unwrap();
Also changes span tags to p tags using (not in the question, but part of the solution to the problem I had):
$("#maincontent span").each(function () {
var $this = $(this);
var $html = $this.html();
$this.replaceWith("<p>" + $html + "</p>");
});
Try to use this
("body p")
.html()
.appendTo("body")
.end()
.remove();
This should remove all <p> in the body of your document

jQuery UI Accordion Disobeys Height

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>

LaTeX: indent from second line

I want to indent from the second line.
I want to write in LaTeX something like this:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu tempor velit. Fusce accumsan ultrices fringilla. Praesent sed odio mi. Mauris non ligula turpis. Duis posuere lacus nec diam interdum dictum suscipit magna molestie. Vestibulum nibh dolor, interdum eget rhoncus ut, sodales eget justo. Morbi blandit lorem sit amet nulla egestas aliquam. Nunc pharetra est at nibh ullamcorper in commodo erat dignissim. Cras et suscipit enim.
Nunc adipiscing ligula at ligula egestas id ullamcorper felis luctus. Aliquam tincidunt turpis sed eros pellentesque iaculis. Nulla imperdiet cursus enim condimentum congue.
And I want to produce:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin eu tempor velit. Fusce accumsan ultrices fringilla. Praesent
sed odio mi. Mauris non ligula turpis. Duis posuere lacus nec diam
interdum dictum suscipit magna molestie. Vestibulum nibh dolor,
interdum eget rhoncus ut, sodales eget justo. Morbi blandit lorem
sit amet nulla egestas aliquam. Nunc pharetra est at nibh ullamcorper
in commodo erat dignissim. Cras et suscipit enim.
Nunc adipiscing ligula at ligula egestas id ullamcorper felis luctus.
Aliquam tincidunt turpis sed eros pellentesque iaculis. Nulla
imperdiet cursus enim condimentum congue.
Depending on why you want to do this, you might be better off using the built-in TeX support for hanging indentation, which the hanging package sugars. If it's a one-off, use the package, but if it's built in to some other layout, the package might just confuse things. Up to you.
The \hangindent dimension gives the size of the indentation, and the \hangafter number indicates when that indentation should start or stop. If the \hangafter number is positive, then indentation starts after that number of lines; if it's negative, then it starts immediately and stops after (minus) that many lines.
These apply only to the immediately following paragraph. The hanging package handles this by using \everypar. That's an occasionally problematic technique, which is why the package includes a 'word of caution' about it.
\documentclass{article}
\parindent=0pt
\parskip=\medskipamount
\begin{document}
\hangindent=2em
\hangafter=2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin eu tempor velit. Fusce accumsan ultrices fringilla. Praesent
sed odio mi. Mauris non ligula turpis. Duis posuere lacus nec diam
interdum dictum suscipit magna molestie. Vestibulum nibh dolor,
interdum eget rhoncus ut, sodales eget justo. Morbi blandit lorem
sit amet nulla egestas aliquam. Nunc pharetra est at nibh ullamcorper
in commodo erat dignissim. Cras et suscipit enim.
\hangindent=2em
\hangafter=-2
Nunc adipiscing ligula at ligula egestas id ullamcorper felis luctus.
Aliquam tincidunt turpis sed eros pellentesque iaculis. Nulla
imperdiet cursus enim condimentum congue.
\end{document}
Negative hanging indentations in LaTeX are most easily handled with the hanging package.
Edit: Fixed the broken link.
Similar to Ricibald's answer but simpler (it wasn't clear to me in his post which length was doing the job). I was using this for a bulleted list to indent each line after the first:
\begin{list}{}%
{\leftmargin=1em \itemindent=-1em}
\item
\item
\end{list}
\hangindent=\parindent
\hangafter=1
\noindent
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin eu tempor velit. Fusce accumsan ultrices fringilla. Praesent
sed odio mi. Mauris non ligula turpis. Duis posuere lacus nec diam
interdum dictum suscipit magna molestie. Vestibulum nibh dolor,
interdum eget rhoncus ut, sodales eget justo. Morbi blandit lorem
sit amet nulla egestas aliquam. Nunc pharetra est at nibh ullamcorper
in commodo erat dignissim. Cras et suscipit enim.
I found this solution. For me it's better because it is valid for all text since this point: I don't need to repeat the command for every paragraph:
\begin{list}{}{%
\setlength{\topsep}{0pt}%
\setlength{\leftmargin}{0.1in}%
\setlength{\listparindent}{-0.1in}%
\setlength{\itemindent}{-0.1in}%
\setlength{\parsep}{\parskip}%
}%
\item[]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin eu tempor velit. Fusce accumsan ultrices fringilla. Praesent
sed odio mi. Mauris non ligula turpis. Duis posuere lacus nec diam
interdum dictum suscipit magna molestie. Vestibulum nibh dolor,
interdum eget rhoncus ut, sodales eget justo. Morbi blandit lorem
sit amet nulla egestas aliquam. Nunc pharetra est at nibh ullamcorper
in commodo erat dignissim. Cras et suscipit enim.
Nunc adipiscing ligula at ligula egestas id ullamcorper felis luctus.
Aliquam tincidunt turpis sed eros pellentesque iaculis. Nulla
imperdiet cursus enim condimentum congue.
\end{list}
Now my normal text!
When you create a list the list margin is indented by one indent (\leftmargini) and \itemindent is 0; if you set the \itemindent equal to the negative of the left margin, the hanging indent will line up exactly with the outer scope margin, and you'll get exactly one indent inside the list. It is a quick and simple way to get in and out of a hanging indented list setting only one value: \itemindent.
\documentclass{article}
\usepackage{lipsum}
\begin{document}
\begin{list}{}{\setlength\itemindent{-\leftmargin}}
\item \lipsum[1]
\item \lipsum[2]
\end{list}
\end{document}
How about:
\usepackage{changepage}
\newenvironment{indentblock}{\begin{adjustwidth}{\parindent}{}\hspace{-\parindent}}{\end{adjustwidth}}
\begin{document}
\begin{indentblock}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu tempor velit. Fusce accumsan ultrices fringilla. Praesent sed odio mi. Mauris non ligula turpis. Duis posuere lacus nec diam interdum dictum suscipit magna molestie. Vestibulum nibh dolor, interdum eget rhoncus ut, sodales eget justo. Morbi blandit lorem sit amet nulla egestas aliquam. Nunc pharetra est at nibh ullamcorper in commodo erat dignissim. Cras et suscipit enim.
\end{indentblock}
\end{document}
Simply change \parindent to a value of your liking, e.g., 4em.
You can modify globally or locally the length named parindent (that has a default value depending on your documentclass and packages and options):
\documentclass{article}
\usepackage{lipsum}
\setlength\parindent{-3em}
\begin{document}
\lipsum[1]
\setlength\parindent{0pt}
\lipsum[2]
\end{document}

Resources