I'm developing a React Native app with Expo, and I use expo print to make a PDF file from a HTML document. One of the PDFs that I make, needs to have the landscape orientation, so on Android I use #page { size: landscape } and it works fine, but on IOS, it doesn't. The same thing happens with margins, but it worked on IOS too with this:
const { uri } = await Print.printToFileAsync({
html,
margins: {
left: 20,
top: 20,
right: 20,
bottom: 20
},
});
So I was trying to find if there was a similar option for orientation, and there is, but that option is just for Print.printAsync and not for Print.printToFileAsync, that I use because it returns the URI of the created file, which the other one doesn't do. So is there anything that I can do to make it landscape and get the URI of the document?
Related
I would like to fix an issue I have on my website. I would like to have the safe bottom area the same color than the tab bar when scrolling, instead of the body background. What would you suggest me to do?
.header {
position: fixed;
bottom: 0;
right: 0;
left: 0;
height: 64px;
background-color: var(--black-3);
z-index: 9;
}
First screen
Second screen
Safari changing the tab/status bar color dynamically is a new feature of Safari 15. The release also adds support for the theme-color meta tag for customizing the color. From the release notes:
Added support for the theme-color meta tag to change the tab bar background and over-scroll area in macOS and iPadOS, and the status bar in iOS.
You have to put the <meta name="theme-color" content="#xxxxxx"> tag to your web page to use a specific color instead of the automatically picked one. Unfortunately this also means you can’t use your CSS variable for it but have to define the colour value in at least two places now.
Keep in mind that this also sets the top bar color for Chrome Android and the tab bar is at top in macOS and iPadOS Safari, so the effect may not be expected. The meta tag supports media queries in media attribute (see the release notes link) and changing the content attribute’s value using javascript should work as expected though (demonstrated in the Apple Developers video in references).
Note that content attribute accepts a CSS <color>. This means that the following is possible:
window.addEventListener("load", (event) => {
document.querySelector("meta[name=theme-color]").content =
window.getComputedStyle(document.querySelector(".header"))
.getPropertyValue("background-color");
});
I don’t have a device with Safari 15 beta available to test with, but I suppose you could also add the element dynamically. It works with Chrome Android at least:
window.addEventListener("load", (event) => {
let meta = document.createElement("meta");
meta.name = "theme-color";
meta.content = window.getComputedStyle(document.querySelector(".header"))
.getPropertyValue("background-color");
document.head.appendChild(meta);
});
Resources:
MDN: Standard metadata names: theme-color
CSS-Tricks: Meta Theme Color and Trickery
Apple Developers: Design for Safari 15 (theme-color is featured in the first part of the video. It also has information about using the safe area environment variables for content floating at bottom.
Edit: Added the javascript examples
This is a self Q&A
If you've ever tried to use 100vh in CSS on iOS you will have found that it isn't actually 100vh when the browser chrome is expanded. It's a well documented bug that Apple decided was actually a feature! This is a good read to explain the bug.
So what is the best way to get around this "feature"? Ideally the answer requires no JavaScript (but that seems unlikely), should be clean, not require a bunch of inline styles, and ideally can be opted into in CSS (sometimes you might want the default 100vh).
Set a root CSS var like so in your stylesheet:
// CSS vars
:root {
--real100vh: 100vh;
}
Then in JavaScript, on load (or jQuery ready event) and on also on resize, you want to run this code:
set100vhVar() {
// If less than most tablets, set CSS var to window height.
let value = "100vh"
// If window size is iPad or smaller, then use JS to set screen height.
if (window.innerWidth && window.innerWidth <= 1024) {
value = `${window.innerHeight}px`
}
document.documentElement.style.setProperty("--real100vh", value)
}
Now you can simply use the CSS: height: var(--real100vh); wherever you want 100vh to actually be the real 100vh on mobile, and this will simply work!
It looks better if you also add a transition: height 0.4s ease-in-out; on the same element, so it doesn't snap when you scroll down on mobile.
The advantage of using a CSS var to do this is that you can override this whenever you like, for example you might want certain breakpoints to be height: 500px, and this is hard to do if you use an inline style. You can also use this inside calc(), like height: calc(var(real100vh) - 100px); which is useful for fixed headers.
If you use Vue/Nuxt, take a look at how we have implemented that here.
UPDATE IN DEC 2022
You can achieve this without JS now, using CSS vars and media queries. Like so:
:root {
--unit-100vh: 100vh;
}
#supports (height: 100dvh) {
:root {
--unit-100vh: 100dvh;
}
}
Depending on the needed browser support, the newest iteration of relative viewport units, for example dvh (dynamic viewport height) might be an option too.
When you want the viewport to be automatically sized in response to browser interfaces dynamically expanding or retracting, you can use the dynamic viewport size. The dynamic viewport size allows the content you design to fit exactly within the viewport, irrespective of the presence of dynamic browser interfaces.
CSS Grid is the solution.
.grid-container {
height: 100vh;
grid-template-columns: 1fr;
grid-template-rows: 30px 1fr 30px
}
I have an xcode project with html files. I am embedding a google doc using an iframe, but when I run the simulator, the width overflows on the right for iphone 6 and larger. It looks fine on iphone 5.
I've tried to change the margins in google docs and attempted some styling of the iframe.
iframe {
width: 100%;
display: block;
}
<iframe src="thesrc"></iframe>
I have also tried to embed it a container, but that didn't work either. I'm not sure if it's a css issue or I can't get a responsive iframe within xcode. Again, seems to be working fine on iphone 5.
If I understood your question correctly, I think you need to provide the correct media CSS rules. I don't know though if you can this in the external html of an iframe.
to perform media queries, you can do something like
#media screen and (min-width:500px) {
body {
margin: 0 auto;
width: 768px;
}
}
I have implemented react-native-maps from here:
https://github.com/airbnb/react-native-maps
It was loading the map, my markers were showing correctly until last week. All of a sudden the map view is just blank now. It's just showing a red border and nothing else.
The only thing I have changed last weekend is the name of my project. I have then tried everything I could find online but it's still not working.
Things I have tried:
1. react-native link
2. Things mentioned in the issue here: https://github.com/airbnb/react-native-maps/issues/118
I have the recommended stylesheet for map
map: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}
And the render method looks like this:
<MapView
style={ styles.map }
region={this.state.region}
showUserLocation={true}
>
I still see a blank screen. I would really appreciate some help here.
Thank you.
It worked when I killed the current npm process and reset my cache.
Has any one encountered this already ? I put iAd with the code below in titanium studio and when the app loads in show a white rectangle which is where iAd should go thent it disappears ?
var iads = Ti.UI.iOS.createAdView({ width: 320, top: 100, backgroundColor: 'transparent', zIndex:200 });
t1 = Titanium.UI.createAnimation({bottom:0, duration:750});
iads.addEventListener('load', function(){
iads.animate(t1);
});
Titanium.UI.currentWindow.add(iads);
If you didn't change anything else (like switching to a different Titanium Mobile SDK) then this must have been something between you and Apple. Perhaps something going wrong between their sandbox and your simulator.