I have a web app that looks fine on ipad air but on an Iphone 4s the footer is cutoff. I have the initial scale set to 1 and if I set it to .5 I can see the footer, but shouldn't work it at scale 1 which means no zoom, correct? I am not sure what is wrong that is cutting the footer off on the Iphone 4.
Thanks!
Here is a slimmed down version of my code and un-prefixed css
*, *:before, *:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 10px;
}
body {
margin: 0;
font-size: 1rem;
}
.page-host {
min-height: 100vh;
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.app-header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
padding: 1rem;
background: #F0CB45;
}
.content-wrapper {
flex: 1 1 auto;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.content {
flex: 1;
padding: 20px;
line-height: 1.6;
}
.icon-bar {
display: flex;
flex-direction: row;
background: #F0CB45;
}
.icon-bar a {
flex: 1;
}
.icon-bar a {
text-align: center;
padding: 1.5rem;
background: #EFCA51;
}
.icon-bar i {
display: block;
font-size: 2.5rem;
padding-bottom: 1rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="prefix.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <!--Needed for mobile-->
<!-- Allow web app to be run in full-screen mode. -->
<meta name="apple-mobile-web-app-capable"
content="yes">
</head>
<body>
<div class="page-host">
<header class="app-header">
<h1>My App</h1>
</header>
<div class="content-wrapper">
<div class="content">
<div>Ad at commodi cumque cupiditate dolorem, doloribus eaque eveniet excepturi laboriosam laudantium
molestiae necessitatibus omnis optio praesentium quaerat quod, repellendus rerum sed sequi sint sit
sunt
tempora ut vitae voluptatibus.
</div>
<div>Blanditiis esse explicabo fugiat hic in nemo odit omnis porro possimus quam quod reiciendis sequi,
totam veniam vitae. Alias distinctio ea et eum hic magnam odio officia officiis omnis praesentium!
</div>
<div>Aliquam, animi consectetur culpa deleniti dolore eius error ex hic ipsa iste molestias nesciunt
nisi
quam recusandae suscipit. Consectetur error fugit sapiente sequi. Atque consequatur incidunt ipsum
magnam quidem voluptas.
</div>
<div>Aspernatur blanditiis consectetur culpa dicta eos et facilis, iste itaque iusto minus molestias nam
nemo nobis nostrum nulla obcaecati optio quo ratione sed soluta tempora, temporibus velit voluptas,
voluptatem voluptatum.
</div>
<div>Cupiditate excepturi, laborum maxime nisi omnis quis suscipit. Assumenda culpa delectus dolorem
ducimus
exercitationem ipsa vero voluptate! Dolor doloremque excepturi quos veritatis. Ex impedit, modi
nostrum
officia perferendis suscipit veritatis.
</div>
<div>Adipisci, beatae cum dolorem eos exercitationem impedit molestiae obcaecati odio omnis suscipit
temporibus velit veniam, voluptatibus. A ducimus est ipsa rem vel! Cupiditate dignissimos hic
laboriosam, perspiciatis rerum tenetur voluptatem.
</div>
<div>Cupiditate excepturi, laborum maxime nisi omnis quis suscipit. Assumenda culpa delectus dolorem
ducimus
exercitationem ipsa vero voluptate! Dolor doloremque excepturi quos veritatis. Ex impedit, modi
nostrum
officia perferendis suscipit veritatis.
</div>
<div>Adipisci, beatae cum dolorem eos exercitationem impedit molestiae obcaecati odio omnis suscipit
temporibus velit veniam, voluptatibus. A ducimus est ipsa rem vel! Cupiditate dignissimos hic
laboriosam, perspiciatis rerum tenetur voluptatem.
</div>
<div>Cupiditate excepturi, laborum maxime nisi omnis quis suscipit. Assumenda culpa delectus dolorem
ducimus
exercitationem ipsa vero voluptate! Dolor doloremque excepturi quos veritatis. Ex impedit, modi
nostrum
officia perferendis suscipit veritatis.
</div>
<div>Adipisci, beatae cum dolorem eos exercitationem impedit molestiae obcaecati odio omnis suscipit
temporibus velit veniam, voluptatibus. A ducimus est ipsa rem vel! Cupiditate dignissimos hic
laboriosam, perspiciatis rerum tenetur voluptatem.
</div>
<div>Cupiditate excepturi, laborum maxime nisi omnis quis suscipit. Assumenda culpa delectus dolorem
ducimus
exercitationem ipsa vero voluptate! Dolor doloremque excepturi quos veritatis. Ex impedit, modi
nostrum
officia perferendis suscipit veritatis.
</div>
<div>Adipisci, beatae cum dolorem eos exercitationem impedit molestiae obcaecati odio omnis suscipit
temporibus velit veniam, voluptatibus. A ducimus est ipsa rem vel! Cupiditate dignissimos hic
laboriosam, perspiciatis rerum tenetur voluptatem.
</div>
<div>Cupiditate excepturi, laborum maxime nisi omnis quis suscipit. Assumenda culpa delectus dolorem
ducimus
exercitationem ipsa vero voluptate! Dolor doloremque excepturi quos veritatis. Ex impedit, modi
nostrum
officia perferendis suscipit veritatis.
</div>
<div>Adipisci, beatae cum dolorem eos exercitationem impedit molestiae obcaecati odio omnis suscipit
temporibus velit veniam, voluptatibus. A ducimus est ipsa rem vel! Cupiditate dignissimos hic
laboriosam, perspiciatis rerum tenetur voluptatem.
</div>
<div>Cupiditate excepturi, laborum maxime nisi omnis quis suscipit. Assumenda culpa delectus dolorem
ducimus
exercitationem ipsa vero voluptate! Dolor doloremque excepturi quos veritatis. Ex impedit, modi
nostrum
officia perferendis suscipit veritatis.
</div>
<div>Adipisci, beatae cum dolorem eos exercitationem impedit molestiae obcaecati odio omnis suscipit
temporibus velit veniam, voluptatibus. A ducimus est ipsa rem vel! Cupiditate dignissimos hic
laboriosam, perspiciatis rerum tenetur voluptatem.
</div>
</div>
</div>
<div class="icon-bar">
<a href="#">
<i class="fa fa-home"></i>
Home
</a>
<a href="#">
<i class="fa fa-user"></i>
Me
</a>
</div>
</div>
</body>
</html>
Figured it out the auto for .content was throwing it off it should be
.content-wrapper {
flex: 1;
...
}
I think flex: 1; equals flex: 1 1 0 , have to research this but the basis seems to be the issue and flex:1; does fix it
It was strange though because on desktop it worked fine and using chrome's ios simulator for iphone 4 it looked fine, but on the actual iphone 4 device it was messed up.
Related
I tried to follow a tutorial for a very simple parallax and I cannot seem to understand why my image is not scrolling at a slower speed. Would love any help on this. Thanks in advance. I think I might have some sort of disconnect with the perspective verses the transformZ or something like that but I am not sure.
Here is the exercise that I followed https://www.youtube.com/watch?v=mxHoPYFsTuk&t=578s&ab_channel=WebDevSimplified
The difference is I only used one img instead of two, for simplicity sake.
body {
margin: 0;
};
.parallax-wrapper {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
}
header{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
transform-style: preserve-3d;
z-index: -1;
color: antiquewhite;
flex-direction: column;
}
h1, p {
text-shadow: 0 0 5 black;
font-size: 100px;
}
img{
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
z-index: -1;
transform: translateZ(-10px);
}
.text {
height: 100vh;
padding: 100px 30%;
background-color: #333;
color: aquamarine;
font-size:20px;
} </div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="parallax.css"/>
<title>Document</title>
</head>
<body>
<div class="parallax-wrapper">
<header>
<img src="https://i.postimg.cc/xCcKnb4b/central-park-manhattan-new-york-huge-beautiful-park-surrounded-by-skyscraper-with-pond.jpg" alt="">
<h1>Parallax page</h1>
<p>Welcome to my parallax</p>
</header>
<div class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, reiciendis dolor nam natus aliquam labore deserunt, perferendis molestiae sequi provident exercitationem quasi hic doloribus sit tempora consequuntur odio quia consequatur numquam. Nemo earum ratione itaque inventore blanditiis placeat repudiandae? Non, soluta ullam. Vitae officia modi provident velit doloribus voluptate eligendi, consectetur magnam reiciendis. Alias tenetur, tempore aliquid itaque enim debitis voluptatibus atque distinctio maiores vitae quasi eveniet consectetur architecto laudantium molestias iusto odio autem totam corporis veniam vero consequuntur ducimus aut? Quidem, modi. Deserunt nesciunt facere amet quos ea. Ipsum nesciunt odit nam, doloremque laborum, dolor quaerat voluptatibus ab nulla amet, molestias deserunt ratione unde officiis at optio beatae esse voluptate cumque veniam? Quam, ea incidunt. Ipsa, illum. Distinctio, blanditiis quo? Explicabo sed nesciunt temporibus expedita voluptate non, nihil repellendus officiis odio qui voluptatum esse. Sunt illo eaque quisquam eveniet debitis quia eligendi praesentium, molestias, in optio mollitia consequatur similique qui! Sed iure ea perspiciatis laudantium quaerat fuga, veritatis corrupti quis suscipit provident ipsam sunt? Iusto libero dolor quam consequatur assumenda officiis quisquam dicta, suscipit iste amet illo voluptate enim deleniti exercitationem itaque! Minus ipsa voluptatibus explicabo tempore, eligendi natus velit laudantium, commodi recusandae quod quo repudiandae illo saepe id alias aliquam aliquid voluptatem numquam rem neque. Est, beatae delectus impedit alias laudantium dolor accusantium fugit sint. Odit, accusantium itaque soluta consectetur odio, sed consequatur similique dignissimos ex delectus nobis blanditiis, voluptate qui eveniet illum. Est autem voluptas amet qui vero temporibus minima quia accusamus sunt ex, delectus explicabo corporis cupiditate necessitatibus quo eos voluptates, consectetur, veritatis debitis! Corporis, optio. Explicabo ut libero obcaecati non. Odio iusto temporibus incidunt. Odio cumque laborum eum, velit laudantium voluptates saepe placeat, ipsa deleniti voluptatibus earum quibusdam repellendus iusto quos culpa eos architecto accusantium eveniet illum. Laudantium enim voluptates, quod deleniti maxime repellat molestias.
</div>
</div>
</body>
</html>
I'm new to Latex and am trying to make a book-style presentation. But I am quite confused by how Latex justifies text. I was told \begin and \end justified the text and it seemed to work until I add some \newline and then I got this :
We can clearly see the text is justified only on the lower text and not in the top.
Both are inside a \begin{raggedright} statement and did not used any other commands than \newline and \textit. The separation of the 2 text comes from a \scenechange commands that is defined as follow :
\newcommand{\scenechange}{
\par
\vspace{\baselineskip}
\par
\noindent}
%Creates a line break for a change of scene
As said, I am new to Latex and I have surely f-ed up something somewhere, but if someone has an explaination/solution, I'll take it ! Thanks anyway.
EDIT : As ask here is a code that reproduce the error I get :
%
% Body text font is Palatino!
%
% I copied the setting as is.
\documentclass[a5paper,pagesize,10pt,bibtotoc,pointlessnumbers,
normalheadings,DIV=9,twoside=false]{scrbook}
% twoside, openright
\KOMAoptions{DIV=last}
\usepackage{trajan}
\usepackage[english]{babel}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage[sc]{mathpazo}
\linespread{1.05}
\usepackage{verbatim} % for comments
\usepackage{listings} % for comments
% Margin
\usepackage{geometry}
\geometry{hmargin=1.5cm,vmargin=3cm}
%-------------------------%
%------Document Code------%
%-------------------------%
\newcommand{\thought}[1]{\textit{#1}}
% !!! This two commands seem to create the problem
\newcommand{\scenechange}{
\par
\vspace{\baselineskip}
\par
\noindent}
%Creates a line break for a change of scene
\newcommand{\majorchange}{
\par
\vspace{\baselineskip}
\hfill
\textasteriskcentered
\hspace{0.2em}
\textasteriskcentered
\hspace{0.2em}
\textasteriskcentered
\hfill
\vspace{\baselineskip}
\newline
\noindent}
%creates a major line break, split by an asterisk for scene changes at the end of a page of where a sense of a major change is required.
%-------------------------%
%------Main Document------%
%-------------------------%
\title{Book}
\author{Svartorm}
\date{2022}
\begin{document}
\maketitle
\newpage
\section*{Testing Section}
\begin{raggedright}
Lorem ipsum dolor sit amet consectetur adipisicing elit.
\newline
Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
optio, eaque rerum!
\newline
\textit{Provident similique accusantium nemo autem. Veritatis
obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam
nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,
tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit,
quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos
sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam
recusandae alias error harum maxime adipisci amet laborum. Perspiciatis
minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit
quibusdam sed amet tempora.}
\newline
Sit laborum ab, eius fugit doloribus tenetur
fugiat, temporibus enim commodi iusto libero magni deleniti quod quam
consequuntur! Commodi minima excepturi repudiandae velit hic maxime
doloremque. Quaerat provident commodi consectetur veniam similique ad
earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo
fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore
suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantium
modi minima sunt esse temporibus sint culpa, recusandae aliquam numquam
totam ratione voluptas quod exercitationem fuga. Possimus quis earum veniam
quasi aliquam eligendi, placeat qui corporis!
\scenechange % I think the problem comes from here.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
\newline
Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
optio, eaque rerum!
\newline
\textit{Provident similique accusantium nemo autem. Veritatis
obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam
nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,
tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit,
quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos
sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam
recusandae alias error harum maxime adipisci amet laborum. Perspiciatis
minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit
quibusdam sed amet tempora.}
\newline
Sit laborum ab, eius fugit doloribus tenetur
fugiat, temporibus enim commodi iusto libero magni deleniti quod quam
consequuntur! Commodi minima excepturi repudiandae velit hic maxime
doloremque. Quaerat provident commodi consectetur veniam similique ad
earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo
fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore
suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantium
modi minima sunt esse temporibus sint culpa, recusandae aliquam numquam
totam ratione voluptas quod exercitationem fuga. Possimus quis earum veniam
quasi aliquam eligendi, placeat qui corporis!
\end{raggedright}
\end{document}
The reason you get the second half of your text justified is that you don't have an empty line between the end of your text and \end{raggedright}:
quasi aliquam eligendi, placeat qui corporis!
\end{raggedright}
For latex, this means that you switch back to justified text before the paragraph is finished and thus the whole paragraph gets justified. And because you are messing with \newline instead of having proper empty lines to delimit each paragraph, this means the whole text back until the scene change gets justified.
However instead of inserting an empty line, you shouldn't use raggedright as an environment in the first place. It kind of works by accident, but in reality \raggedright is a switch and not an environment. If you want only a part of your document to be ragged right, you can use a group around it (just make sure that again, there is an empty line before the group ends)
(and have a look at your log file, many of the class options you use are deprecated and should be replaced by the currently supported methods. Also using the geometry package with a koma script class is not necessarily such a good idea...)
%
% Body text font is Palatino!
%
% I copied the setting as is.
\documentclass[a5paper,pagesize,10pt,bibtotoc,pointlessnumbers,
normalheadings,DIV=9,twoside=false]{scrbook}
% twoside, openright
\KOMAoptions{DIV=last}
\usepackage{trajan}
\usepackage[english]{babel}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage[sc]{mathpazo}
\linespread{1.05}
\usepackage{verbatim} % for comments
\usepackage{listings} % for comments
% Margin
\usepackage{geometry}
\geometry{hmargin=1.5cm,vmargin=3cm}
%-------------------------%
%------Document Code------%
%-------------------------%
\newcommand{\thought}[1]{\textit{#1}}
% !!! This two commands seem to create the problem
\newcommand{\scenechange}{
\par
\vspace{\baselineskip}
\par
\noindent}
%Creates a line break for a change of scene
\newcommand{\majorchange}{
\par
\vspace{\baselineskip}
\hfill
\textasteriskcentered
\hspace{0.2em}
\textasteriskcentered
\hspace{0.2em}
\textasteriskcentered
\hfill
\vspace{\baselineskip}
\newline
\noindent}
%creates a major line break, split by an asterisk for scene changes at the end of a page of where a sense of a major change is required.
%-------------------------%
%------Main Document------%
%-------------------------%
\title{Book}
\author{Svartorm}
\date{2022}
\begin{document}
\maketitle
\newpage
\section*{Testing Section}
\begingroup
\raggedright
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
optio, eaque rerum!
\textit{Provident similique accusantium nemo autem. Veritatis
obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam
nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,
tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit,
quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos
sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam
recusandae alias error harum maxime adipisci amet laborum. Perspiciatis
minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit
quibusdam sed amet tempora.}
Sit laborum ab, eius fugit doloribus tenetur
fugiat, temporibus enim commodi iusto libero magni deleniti quod quam
consequuntur! Commodi minima excepturi repudiandae velit hic maxime
doloremque. Quaerat provident commodi consectetur veniam similique ad
earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo
fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore
suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantium
modi minima sunt esse temporibus sint culpa, recusandae aliquam numquam
totam ratione voluptas quod exercitationem fuga. Possimus quis earum veniam
quasi aliquam eligendi, placeat qui corporis!
\scenechange % I think the problem comes from here.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
optio, eaque rerum!
\textit{Provident similique accusantium nemo autem. Veritatis
obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam
nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,
tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit,
quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos
sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam
recusandae alias error harum maxime adipisci amet laborum. Perspiciatis
minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit
quibusdam sed amet tempora.}
Sit laborum ab, eius fugit doloribus tenetur
fugiat, temporibus enim commodi iusto libero magni deleniti quod quam
consequuntur! Commodi minima excepturi repudiandae velit hic maxime
doloremque. Quaerat provident commodi consectetur veniam similique ad
earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo
fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore
suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantium
modi minima sunt esse temporibus sint culpa, recusandae aliquam numquam
totam ratione voluptas quod exercitationem fuga. Possimus quis earum veniam
quasi aliquam eligendi, placeat qui corporis!
\endgroup
\end{document}
I have a table view and cell created in interface builder.
I've configured:
tableView.estimatedRowHeight = 140
tableView.rowHeight = UITableViewAutomaticDimension
It does work when I set up the cell in cellForRowAt right away:
let text = NSAttributedString(string: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?")
cell.detail.attributedText = text
But how can we move the heavy lifting to a background task so we have a butter smooth scroll?
If I change the previous code to this:
DispatchQueue.global().async {
let text = NSAttributedString(string: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?")
DispatchQueue.main.async {
cell.detail.attributedText = text
}
}
Then the self-sizing doesn't work anymore. I think I've tried every single method after updating the text, like setNeedsLayout.
Well it turned out that the most efficient way is to calculate/cache the attributed string and when that job done simply reload the cell !
Actual Behavior:
What is the issue? * When clicking on a contenteditable, the page jumps down.
What is the expected behavior? It should behave just as input fields, where the page scrolls to that element.
CodePen (or steps to reproduce the issue): *
CodePen Demo which shows your issue: http://codepen.io/pennybirman/pen/KaErKb
<body layout="column" ng-app="myApp" ng-cloak>
<md-content>
<div contenteditable="true" class="editables">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, magni omnis ad nihil voluptate harum fuga aut voluptatum incidunt ut libero ex, itaque eligendi repellendus, impedit. Possimus blanditiis ex nam.</div>
<div contenteditable="true" class="editables">Illum libero, praesentium quibusdam vitae, nam voluptatum earum doloribus deleniti magnam consequatur cum dolorem, eos? Blanditiis harum molestias recusandae officiis esse! Quia doloribus accusantium, recusandae illum debitis sunt laborum assumenda!</div>
<div contenteditable="true" class="editables">Illum libero, praesentium quibusdam vitae, nam voluptatum earum doloribus deleniti magnam consequatur cum dolorem, eos? Blanditiis harum molestias recusandae officiis esse! Quia doloribus accusantium, recusandae illum debitis sunt laborum assumenda!</div>
<div contenteditable="true" class="editables">Illum libero, praesentium quibusdam vitae, nam voluptatum earum doloribus deleniti magnam consequatur cum dolorem, eos? Blanditiis harum molestias recusandae officiis esse! Quia doloribus accusantium, recusandae illum debitis sunt laborum assumenda!</div>
<div contenteditable="true" class="editables">Illum libero, praesentium quibusdam vitae, nam voluptatum earum doloribus deleniti magnam consequatur cum dolorem, eos? Blanditiis harum molestias recusandae officiis esse! Quia doloribus accusantium, recusandae illum debitis sunt laborum assumenda!</div>
<div contenteditable="true" class="editables">Illum libero, praesentium quibusdam vitae, nam voluptatum earum doloribus deleniti magnam consequatur cum dolorem, eos? Blanditiis harum molestias recusandae officiis esse! Quia doloribus accusantium, recusandae illum debitis sunt laborum assumenda!</div>
<div contenteditable="true" class="editables">Illum libero, praesentium quibusdam vitae, nam voluptatum earum doloribus deleniti magnam consequatur cum dolorem, eos? Blanditiis harum molestias recusandae officiis esse! Quia doloribus accusantium, recusandae illum debitis sunt laborum assumenda!</div>
</md-content>
</body>
Details: Has to be tested in a iOS mobile device. (Verified it in browserStack, and xCode with ios10).
Angular Versions: *
Angular Version: 1.5.7
Angular Material Version:1.1.0
Additional Information:
Browser Type: * Safari mobile.
Browser Version: *10.0
OS: *iOS 10.
Stack Traces: No errors, just UI behaviour.
Video:: https://youtu.be/6U6BtxQggJ8
Justin (Support Engineer from Ionic Team) said that it is not recommended to use contenteditable divs.
Source: https://github.com/ionic-team/ionic/issues/4162 (check latest comment)
I created a migration to add a new boolean value to my form, but when i send the form the hash value send a null value for my new field. I made the migration like i made the others boolean fiels. Can someone help me in this?
This is the result hash.
Parameters: {"utf8"=>"✓", "authenticity_token"=>"gMxerNn+jYk39ADC1EfIio6fqsfdcvtfnlkUOK7WNgmZrIyzRh2VsxBF9E9fAfT0W3oiHX2UYhYJ+MtfnHxtBg==", "campanha"=>{"titulo"=>"Teste App", "data_termino_venda"=>"22/12/2016 14:19", "data_limite_boleto"=>"22/12/2016 14:19", "suporte_versao_app"=>"1.0", "meio_pagamento"=>"iugu", "enviar_voucher"=>"1", "enviar_sms"=>"0", "enviar_push_notification"=>"1", "salvar_endereco"=>"0", "auto_accepts_solicitation"=>"", "nome_moeda"=>"Coins", "pedido_emitido_instrucoes"=>"<ul><li>1</li><li>d</li><li>sas</li><li>ads</li><li>dsa</li><li>sd</li><li>as</li><li>dsa</li><li>das</li><li>a</li></ul><p><br></p>", "titulo_voucher1"=>"juquinha", "descricao_voucher1"=>"<div><b>olea uhaeus hueau usahue a</b></div><div><b>euahush usah </b></div><div><b>euauseuhas</b></div><div><b><br></b></div><div><br></div><div><b>Ut sumo virtute vim, cum vide definitionem eu. Ex agam velit eam, nam antiopam mediocrem an, mei everti iudicabit voluptatibus ea. Audire aliquando ex quo, id has vidit nonumy gloriatur, tollit persius vituperata at vel. Mollis reprimique eu nec. Sea prima labores at, mei magna detracto in, nam deserunt philosophia te. Ex nec decore honestatis omittantur.</b></div>", "titulo_voucher2"=>"juquinha", "descricao_voucher2"=>"<h3 style=\"margin: 15px 0px; padding: 0px; font-weight: 700; font-size: 14px; color: rgb(0, 0, 0); font-family: "Open Sans", Arial, sans-serif;\">Seção 1.10.32 de \"de Finibus Bonorum et Malorum\", escrita por Cícero em 45 AC</h3><p style=\"margin-bottom: 15px; padding: 0px; text-align: justify; color: rgb(0, 0, 0); font-family: "Open Sans", Arial, sans-serif; font-size: 14px;\">\"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?\"</p>"}, "files"=>"", "commit"=>"Salvar", "id"=>"teste-app"}
This is my view field.
<div class="form-group">
<%= f.label 'AtivarSolicitação automática de ingresso' %><br>
<%= f.check_box :auto_accepts_solicitation, class: 'input-switch bootstrap-switch-primary' %>
ENGLISH:
There's must be something wrong with your checkbox input. Try some alternative syntax. If you're using simple_form and your attribute is boolean, only f.input :attribute should do the trick.
PORTUGUESE:
Aqui quem te escreve é um brasileiro!
Provavelmente é algo errado com o checkbox. Você está usando simple form?
Se sim, e o campo for booleano, basta fazer f.input :atributo. Será exibido como checkbox e acredito que o valor será enviado corretamente...
Hope it helps!