Bug with stain lines when using ScrollView in SwiftUI - ios

Create some view and put it in ScrollView.
Important: The view should be less than iPhone screen bounds to observe the bug. If we make ScrollView full-screen (from left to right bounds) the bug isn't observed.
The bug is observed on any simulator model.
Platform: iOS 15.4
Xcode: Version 13.3 (13E113)
Machine: MacBook Air M1 2020
Pictures (watch the white lines on the right and on the bottom):
Sample code:
import SwiftUI
struct ContentView: View {
var text: String {
"""
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultrices nec erat ut dictum. Mauris non urna ac leo eleifend commodo ac eu neque. Aenean tellus orci, dictum vel ullamcorper eu, condimentum vitae arcu. Vivamus consectetur sem tellus, in efficitur ante fringilla non. Nam eleifend dui vel felis mattis, eu mattis nunc fermentum. Curabitur feugiat arcu convallis, sodales felis vel, condimentum ipsum. Curabitur auctor urna mauris, sit amet porttitor justo cursus at. Mauris condimentum mi ac velit sollicitudin, ac commodo tortor imperdiet. Vestibulum consectetur, purus quis vulputate condimentum, libero libero imperdiet massa, in imperdiet enim dolor at erat. Nulla sapien dui, maximus id rhoncus eu, luctus at tellus. Praesent rutrum velit vel libero sodales eleifend. Phasellus in condimentum lectus.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent et sapien sapien. Sed dapibus mi vitae porttitor vulputate. Suspendisse vel erat blandit, pellentesque leo vitae, mattis leo. Pellentesque dictum ex sit amet nibh molestie, in hendrerit nibh accumsan. Sed mollis neque quam, rhoncus elementum ex efficitur eget. Nunc quis tristique leo. Nullam sed rhoncus massa, quis blandit nisi. In pharetra pretium eros, non convallis felis mattis in. Sed eleifend elit risus, in tincidunt massa varius id. Morbi velit nunc, faucibus eget est eu, porttitor pharetra mauris. Nam aliquam ligula diam, nec commodo elit commodo ut. Nunc consectetur fermentum est, placerat eleifend neque dictum id.
Nullam et lobortis metus. In eget metus lacinia, bibendum augue eget, elementum nibh. Quisque tempor lorem nec purus dapibus finibus. Vivamus dui enim, viverra et mattis quis, dictum sit amet erat. Mauris nec purus hendrerit, elementum nibh id, mollis urna. Nulla molestie mi id turpis egestas tincidunt. Praesent porttitor, lorem nec venenatis gravida, libero est vulputate mauris, eu elementum sem augue eget magna. Pellentesque vehicula mauris non nibh volutpat vestibulum. Vestibulum auctor dictum sapien a fringilla. Quisque sed mauris ex. Maecenas at tortor sit amet ligula pretium vehicula. Pellentesque tempor lectus sed dui sollicitudin, ut luctus diam tincidunt. Morbi a vestibulum ante. Donec elementum sed lorem nec ornare. Nam varius dignissim ante. Nullam aliquam vitae magna sit amet viverra.
"""
}
var body: some View {
Background {
ScrollView(.vertical, showsIndicators: false) {
TextSheet {
Text(text)
.padding(24)
}
}
}
}
}
struct TextSheet<Content: View>: View {
private let content: () -> Content
var body: some View {
ZStack {
Rectangle()
.foregroundColor(.white)
content()
}
.padding([.leading, .trailing], 32)
}
init(#ViewBuilder content: #escaping () -> Content) {
self.content = content
}
}
struct Background<Content: View>: View {
private let content: () -> Content
var body: some View {
ZStack {
Rectangle()
.foregroundColor(.purple)
.ignoresSafeArea()
content()
.clipped()
}
}
init(#ViewBuilder content: #escaping () -> Content) {
self.content = content
}
}
Note: This is a simplified example to show the bug, I know there're better ways to implement text views.
If we enable scroll indicators the problem goes away:
...Background {
ScrollView(.vertical, showsIndicators: true) {
TextSheet {...
However, in our case, the problem resolves only in the vertical direction since this is the only direction which is being involved. Removing .vertical doesn't help either:
...Background {
ScrollView(showsIndicators: true) {
TextSheet {...
I suppose that this is a SwiftUI 3 bug, but I haven't found a workaround for this or the respective Apple Developer Forum discussion of the bug.

Related

SwiftUI ScrollView won't scroll when using fixedSize() to keep text from truncating

While trying to create a ScrollView with text inside it, my text was truncating so that it never expanded beyond the height of the view. While googling the issue, I found the solution of including .fixedSize(horizontal: false, vertical: true) on the text, which solved the truncation issue. But now my ScrollView won't scroll unless I don't specify a frame height for the VStack inside the ScrollView (I can't do that because I need the contents of the VStack to align to the bottom of the ScrollView).
Here is a simplified version of the code to reproduce the issue:
import SwiftUI
struct TestView: View {
var body: some View {
GeometryReader { geo in
ScrollView(.vertical, showsIndicators: false) {
VStack(spacing: 24) {
Text("START")
Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit elit non magna bibendum, id mattis turpis tristique. Sed non rhoncus dui. Proin consequat scelerisque eros, in interdum velit pellentesque et. Proin at odio nec tellus feugiat suscipit ac nec tellus. Integer ac consectetur justo. Aenean in sagittis nisi. Duis et ultricies elit. Aliquam erat volutpat. Nam iaculis eget mi at fermentum. Proin ut sapien leo. Aliquam elementum vehicula arcu sit amet placerat. Quisque gravida felis ante, et rhoncus est congue viverra. Sed sagittis ornare mollis. Vivamus lorem libero, tincidunt vel feugiat nec, ultricies sed orci. Nulla facilisi. Etiam imperdiet condimentum eros, at sagittis quam euismod et. Maecenas cursus imperdiet mi, at ultrices nulla lacinia lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit elit non magna bibendum, id mattis turpis tristique. Sed non rhoncus dui. Proin consequat scelerisque eros, in interdum velit pellentesque et. Proin at odio nec tellus feugiat suscipit ac nec tellus. Integer ac consectetur justo. Aenean in sagittis nisi. Duis et ultricies elit. Aliquam erat volutpat. Nam iaculis eget mi at fermentum.")
.fixedSize(horizontal: false, vertical: true)
Text("END")
}
.padding(.horizontal, 80)
.padding(.top, 160)
.frame(width: geo.size.width, height: geo.size.height, alignment: .bottom)
}
}
}
}
Does anyone know what I'm doing wrong here? Any ideas would be much appreciated!
Things I've tried:
Removing the GeometryReader and setting the height and width of the VStack manually
Removing the VStack and just having text
Putting fixedSize() on the entire VStack instead of the Text element
Adding a Spacer to force the VStack to full height instead of specifying the height with the frame property
Found a fix by #antoine-lamy! It's very hacky but it works. Double Rotation Trick
Here's the working version of the simplified code:
struct TestView: View {
var body: some View {
GeometryReader { geo in
ScrollView(.vertical, showsIndicators: false) {
VStack(spacing: 24) {
Spacer()
Text("START")
Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit elit non magna bibendum, id mattis turpis tristique. Sed non rhoncus dui. Proin consequat scelerisque eros, in interdum velit pellentesque et. Proin at odio nec tellus feugiat suscipit ac nec tellus. Integer ac consectetur justo. Aenean in sagittis nisi. Duis et ultricies elit. Aliquam erat volutpat. Nam iaculis eget mi at fermentum. Proin ut sapien leo. Aliquam elementum vehicula arcu sit amet placerat. Quisque gravida felis ante, et rhoncus est congue viverra. Sed sagittis ornare mollis. Vivamus lorem libero, tincidunt vel feugiat nec, ultricies sed orci. Nulla facilisi. Etiam imperdiet condimentum eros, at sagittis quam euismod et. Maecenas cursus imperdiet mi, at ultrices nulla lacinia lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit elit non magna bibendum, id mattis turpis tristique. Sed non rhoncus dui. Proin consequat scelerisque eros, in interdum velit pellentesque et. Proin at odio nec tellus feugiat suscipit ac nec tellus. Integer ac consectetur justo. Aenean in sagittis nisi. Duis et ultricies elit. Aliquam erat volutpat. Nam iaculis eget mi at fermentum.")
.fixedSize(horizontal: false, vertical: true)
Text("END")
}
.padding(.horizontal, 80)
.padding(.top, 160)
.rotationEffect(Angle(degrees: 180))
}
.rotationEffect(Angle(degrees: 180))
}
}}

pandoc beamer text overflows

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}

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>

Primefaces Scrollable Layout

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.

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>

Resources