I have created a view which contains an image and a textview (which changes dynamically) and a button. This view is embedded in UIScrollView. But when I run it the Scrollview is not working. I had this problem in Swift4.
You can refer the link:
https://github.com/sravyagajavalli/Scrolling
It is good to thing about UIScrollView as two separate views. The Frame View (it defines scroll view's size in superview and sibling views) and the Content View (it defines contentSize). In Autolayout point of view are this two views absolutely independent. So you need to define the frameView. And then you need to define autolayout correctly to correct sizing of content View (you do not need to solve the x and y position of course it is matter of contentOffset and scrolling principles). Lets start with example:
1) create UIScrollView add it to superView and define frame View
let scrollView = UIScrollView()
scrollView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(scrollView)
NSLayoutConstraint.activate([
scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
scrollView.topAnchor.constraint(equalTo: view.topAnchor),
scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
])
2) From my expirience is always good practice to create clear view and add it as contentView into scrollView for better autolayouting.
let contentView = UIView()
contentView.translatesAutoresizingMaskIntoConstraints = false
scrollView.addSubview(contentView)
NSLayoutConstraint.activate([
contentView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
contentView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
contentView.topAnchor.constraint(equalTo: scrollView.topAnchor),
contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
contentView.widthAnchor.constraint(equalTo: view.widthAnchor)
])
notice the last constraint, where we need define the width of this content view as equal as screen - this is important to define that we want vertical scroll. Because of this, we can let autolayout do its job and count the scrollView's content height automatically according to content.
3) Add any content what you want into scrollView
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Maecenas libero. Etiam commodo dui eget wisi. Nullam at arcu a est sollicitudin euismod. Nullam rhoncus aliquam metus. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Duis risus. Fusce suscipit libero eget elit. Integer malesuada. Aliquam erat volutpat. Maecenas libero. Nam quis nulla. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Nunc tincidunt ante vitae massa. Sed convallis magna eu sem. Donec iaculis gravida nulla. Etiam commodo dui eget wisi. Integer in sapien. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Sed ac dolor sit amet purus malesuada congue. Vivamus luctus egestas leo. Etiam quis quam. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nullam eget nisl. Mauris metus. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Etiam commodo dui eget wisi. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris metus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Maecenas libero. Etiam commodo dui eget wisi. Nullam at arcu a est sollicitudin euismod. Nullam rhoncus aliquam metus. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Duis risus. Fusce suscipit libero eget elit. Integer malesuada. Aliquam erat volutpat. Maecenas libero. Nam quis nulla. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Nunc tincidunt ante vitae massa. Sed convallis magna eu sem. Donec iaculis gravida nulla. Etiam commodo dui eget wisi. Integer in sapien. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Sed ac dolor sit amet purus malesuada congue. Vivamus luctus egestas leo. Etiam quis quam. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nullam eget nisl. Mauris metus. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Etiam commodo dui eget wisi. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris metus."
label.numberOfLines = 0
contentView.addSubview(label)
NSLayoutConstraint.activate([
label.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
label.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
label.topAnchor.constraint(equalTo: contentView.topAnchor),
label.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
])
IOS 11 news
Finally in IOS 11 are new layout guides what solves problems with this frame view and content view in UIScrollView as I mentioned it before.
It is
scrollView.frameLayoutGuide
scrollView.contentLayoutGuide
so for ios 11 only you can avoid the contentView good practice and do it in this way (but usually we need the backward support for older ios versions)
1) create UIScrollView same as before but define the width with the help of new layout guides
let scrollView = UIScrollView()
scrollView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(scrollView)
NSLayoutConstraint.activate([
scrollView.frameLayoutGuide.leadingAnchor.constraint(equalTo: view.leadingAnchor),
scrollView.frameLayoutGuide.trailingAnchor.constraint(equalTo: view.trailingAnchor),
scrollView.frameLayoutGuide.topAnchor.constraint(equalTo: view.topAnchor),
scrollView.frameLayoutGuide.bottomAnchor.constraint(equalTo: view.bottomAnchor),
scrollView.contentLayoutGuide.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor)
])
2) Now just add any content what you want, but attach autolayout into scrollView.contentLayoutGuide
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Maecenas libero. Etiam commodo dui eget wisi. Nullam at arcu a est sollicitudin euismod. Nullam rhoncus aliquam metus. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Duis risus. Fusce suscipit libero eget elit. Integer malesuada. Aliquam erat volutpat. Maecenas libero. Nam quis nulla. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Nunc tincidunt ante vitae massa. Sed convallis magna eu sem. Donec iaculis gravida nulla. Etiam commodo dui eget wisi. Integer in sapien. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Sed ac dolor sit amet purus malesuada congue. Vivamus luctus egestas leo. Etiam quis quam. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nullam eget nisl. Mauris metus. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Etiam commodo dui eget wisi. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris metus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Maecenas libero. Etiam commodo dui eget wisi. Nullam at arcu a est sollicitudin euismod. Nullam rhoncus aliquam metus. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Duis risus. Fusce suscipit libero eget elit. Integer malesuada. Aliquam erat volutpat. Maecenas libero. Nam quis nulla. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Nunc tincidunt ante vitae massa. Sed convallis magna eu sem. Donec iaculis gravida nulla. Etiam commodo dui eget wisi. Integer in sapien. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Sed ac dolor sit amet purus malesuada congue. Vivamus luctus egestas leo. Etiam quis quam. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nullam eget nisl. Mauris metus. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Etiam commodo dui eget wisi. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris metus."
label.numberOfLines = 0
scrollView.addSubview(label)
NSLayoutConstraint.activate([
label.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor),
label.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor),
label.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor),
label.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor)
])
And thats it. You can copy paste both ways into yours viewController viewDidLoad method and it will work.
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}
I'm trying to set up everything in code. In my viewController, I have these properties declared:
var scrollView: UIScrollView!
var font: UIFont?
var label: UILabel!
var fontSize: CGFloat = 50
and my viewDidLoad looks like:
override func viewDidLoad() {
super.viewDidLoad()
font = UIFont(name: "HelveticaNeue-UltraLight", size: fontSize)!
scrollView = UIScrollView()
scrollView.translatesAutoresizingMaskIntoConstraints = false
scrollView.backgroundColor = UIColor.lightGray
view.addSubview(scrollView)
scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
scrollView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
scrollView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
scrollView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
label = UILabel(frame: CGRect.zero)
label.font = font
label.lineBreakMode = .byWordWrapping
label.translatesAutoresizingMaskIntoConstraints = false
label.numberOfLines = 0
label.text = """
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum urna nec risus dapibus, nec sagittis risus vulputate. Nullam volutpat eros nec sagittis eleifend. Nam sit amet convallis sem, quis tempus quam. Cras egestas est at ipsum tincidunt maximus. Vivamus suscipit justo vel sapien blandit, sed vehicula ipsum euismod. Etiam faucibus tortor at augue ullamcorper, at feugiat lorem varius. Quisque at purus vestibulum, varius ex quis, viverra nibh. Nulla ac porta enim. Nulla egestas mauris a pretium rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam lacinia augue nec augue dictum condimentum. Ut aliquam ac lacus a venenatis. Pellentesque egestas libero sed sem rutrum tempus. Duis posuere turpis at lacinia varius.
"""
scrollView.addSubview(label)
label.setContentHuggingPriority(UILayoutPriority(rawValue: 249.0), for: .vertical)
label.setContentCompressionResistancePriority(UILayoutPriority(rawValue: 751.0), for: .horizontal)
label.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 48.0).isActive = true
label.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16.0).isActive = true
label.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16.0).isActive = true
label.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor)
label.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor, constant: -48.0).isActive = true
}
So if I run it in the simulator, this works as I expect with no ambiguous layout in the console. But a couple things don't work.
If I increase the label.text to more paragraphs like this:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum urna nec risus dapibus, nec sagittis risus vulputate. Nullam volutpat eros nec sagittis eleifend. Nam sit amet convallis sem, quis tempus quam. Cras egestas est at ipsum tincidunt maximus. Vivamus suscipit justo vel sapien blandit, sed vehicula ipsum euismod. Etiam faucibus tortor at augue ullamcorper, at feugiat lorem varius. Quisque at purus vestibulum, varius ex quis, viverra nibh. Nulla ac porta enim. Nulla egestas mauris a pretium rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam lacinia augue nec augue dictum condimentum. Ut aliquam ac lacus a venenatis. Pellentesque egestas libero sed sem rutrum tempus. Duis posuere turpis at lacinia varius.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque vitae ligula mollis, vehicula mi at, venenatis justo. Nullam id imperdiet odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean arcu est, venenatis at sem commodo, condimentum feugiat arcu.
Suspendisse quis malesuada ipsum. Quisque lobortis est in dapibus fermentum. Sed lacinia lacus leo, ac euismod metus faucibus vitae. Curabitur fermentum vulputate vestibulum. Nullam quis turpis ac tortor pharetra accumsan. Aenean finibus lacus quis orci accumsan, iaculis dignissim purus lacinia. Maecenas convallis risus in pulvinar pharetra. Curabitur eu maximus risus. Nunc convallis finibus venenatis. Phasellus nec posuere est, at blandit magna. Nulla rutrum mi id sapien vestibulum eleifend. Nullam sapien nunc, feugiat ut elementum vitae, ultrices in tortor. Integer massa leo, mollis vitae mattis vel, sagittis eu libero. Cras tellus lacus, sodales at nisi ut, dictum mattis risus.
Curabitur at euismod purus, quis posuere nulla. Donec quam mauris, faucibus sed tellus sed, finibus convallis nulla. Ut vehicula consectetur ultricies. Morbi malesuada lorem eget cursus pharetra. Curabitur vitae convallis lacus, in aliquet arcu. Sed interdum ut mauris bibendum tincidunt. Proin consectetur elit diam, eget mattis augue euismod et. Nullam et iaculis dolor, ac scelerisque erat. In non volutpat velit, vitae vulputate augue. Quisque sollicitudin nunc erat, a cursus lorem faucibus sit amet. Suspendisse id augue non nisl congue tincidunt. Duis vulputate massa eu finibus semper. Integer tristique, massa a efficitur accumsan, ligula libero imperdiet enim, quis semper quam risus in sapien. Suspendisse potenti.
Aliquam magna elit, euismod non egestas id, sollicitudin vitae metus. Cras enim magna, placerat sit amet vestibulum non, pellentesque ac lacus. Aenean ut eros auctor diam tincidunt egestas et ac enim. Nunc tempor lorem eget purus eleifend, facilisis efficitur dui feugiat. Sed viverra suscipit luctus. Donec dignissim lorem a urna elementum, id efficitur turpis vestibulum. Praesent laoreet faucibus orci, vel dictum neque ullamcorper in.
The label is no longer rendered.
Or if I only use the one paragraph, but increased the font size to 100, the label is also not rendered.
Lastly, even with the single paragraph for the label, and font size of 50, even though it seems to run fine, if I click on the View Debugger, I get "Scrollable content size is ambiguous for UIScrollView".
Am I missing something with UILabels and UIScrollViews? Is there another event, property, or constraint I'm missing?
After playing around with your code a bit, I see that you're hitting a couple of issues.
Font not rendering in the Simulator:
This is apparently a Simulator bug. I'm seeing it on Xcode 10.2.1/Mojave 10.14.4. The text isn't rendering but the label is being sized correctly, so you can scroll the view and see the vertical indicator move down/up. This issue happens even if you specify the system font with a size larger than 32. On a real device (tested on an iPhone XS with iOS 12.2), the text renders correctly.
Please file a bug report on that at https://bugreport.apple.com, providing sample code for the issue.
Scrollable content size is ambiguous for UIScrollView:
The content of a scrollview needs to pin to every edge of the scrollview. The leading and trailing constraints for the label you're embedding are constrained to the root view, not the scrollView. They should be constrained to the scrollView like this:
label.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 48.0).isActive = true
label.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 16.0).isActive = true
label.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -16.0).isActive = true
label.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor).isActive = true
label.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: -48.0).isActive = true
While the changes above will fix the ambiguous content size issue, I'd suggest you activate all of your constraints at once, since it's more efficient:
NSLayoutConstraint.activate([
scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
scrollView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
scrollView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
scrollView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
label.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 48.0),
label.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 16.0),
label.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -16.0),
label.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor),
label.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: -48.0)
])
I didn't find that the contentHuggingPriority or contentCompressionResistancePriority lines were necessary, but maybe you have reasons for including those.
With those changes, the ambiguous content warning goes away. The layout looks correct on my iPhone XS in both portrait and landscape.
If you just need a text that is scrollable, why not just use a uitextview and scrap your uilabel and uiscrollview hierarchy
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).
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>