I'm trying to implement various embed in a react-native application;
They have these structures
Twitter
<blockquote class=\"twitter-tweet\" data-width=\"500\"><p lang=\"en\" dir=\"ltr\">i recorded my calc professor for an entire semester, I hope he never sees this but... GOOOD MORNINGGGG pic.twitter.com/lTXGcd1Jf0</p>— Edward Chai (#edwardchaii) July 21, 2018</blockquote>\n<script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n
Spotify
<iframe src=\"https://open.spotify.com/embed/track/2dgrYdgguVZKeCsrVb9XEs%3Fsi%3DQ7ihpJ__RCSHIgTzf1_QBA\" width=\"300\" height=\"380\" frameborder=\"0\" allowtransparency=\"true\" allow=\"encrypted-media\"></iframe>
Using react-native-webview module and this structure in my Component
<View style={{flex: 1, height: 300, width: 350, marginVertical: 10, position: "relative"}}>
<WebView
originWhitelist={["*"]}
style={{width: "100%"}}
onLoad={this.onLoad}
onLoadEnd={this.onLoad}
javaScriptEnabled={true}
// useWebKit={false}
injectedJavascript={this.state.injectedJavaScript}
source={{html: this.state.html}}
startInLoadingState={true}
/>
</View>
The result is (on iOS simulator)
As you can see there are a couple of problems:
Since the container View must have a width and a height value it does not respect the embed size; sometimes it's taller sometimes it's smaller sometimes it's wider
The embed doesn't fit its container; I tried to put width: 100% but even if it fits the width I still have the container height fixed which leaves a lot of blank space.
I don't know where to put my hands, I tried a lot of hacky solution but it doesn't seem to work at all
Did you tried using scalepagetofit property ?, it should match the view
Related
The image is working just fine. Here is the code
<Image
layout="fixed"
src="/images/example.jpeg"
alt="Example image"
width="140"
height="140"
/>
But, when I run the website on web.dev, I don't get a topscore in Performance.
The main reason is Image elements do not have explicit width and height
I've studied this, and can tell from here https://web.dev/optimize-cls/?utm_source=lighthouse&utm_medium=lr#images-without-dimensions
That width and height attributes is needed, which don't appear, using next/image
How do I solve this?
I am facing the same issue - changing layout to responsive did not solve the problem.
It rather looks like the component is missing the rendering of the supporting tags - it should actually be implemented as described in the initial lighthouse link.
Use curly braces to mention the size instead of string literals.
Use layout="responsive"
<Image
layout="responsive"
src="/images/example.jpeg"
alt="Example image"
width={140}
height={140}
/>
The problem is with React-native-papers and TextInput component.(And maybe the lack of my css/flexbox knowledge)
When alignItems: 'center' is used on a View above TextInput in the tree the TextInput's rendering is wonky. It takes the full height of the screen and has a very narrow width. A css width property must be specified in the component hierarchy between the View with alignItems: 'center' and the TextInput or on the TextInput itself.
There is a Github issue thats closed.
https://github.com/callstack/react-native-paper/issues/2335
return (
<View style={{flex: 1, alignItems: "center", justifyContent: "center"}}>
<TextInput label='Email' value='' />
<TextInput label='Password' value='' />
</View>
);
}
Issue can be reproduced with this Snack. Only on device tho, looks fine on web.
https://snack.expo.dev/#parriz/paper---weird-textinput-behaviour
Exact same code setup. But with core React Native components. (Works as expected)
https://snack.expo.dev/#parriz/default-react-native
Exact same code setup. But with core React-native-elements components. (Works as expected)
https://snack.expo.dev/#parriz/great-donuts
My questions:
Arent components inside a flexbox supposed to grow as needed to fit the content? (Hence, this behaviour is a bug?)
If anyone used native-papers before, how did you handle the issue? Did you just explicitly set a width on all your TextInputs? Is this how you normally do?
Why is the outcome so diffrent on web and on device? I tought the result was supposed to be equivalent on React Native and React Native Web?
I'm familiar with using breakpoints to change my styling for height, width, font-size, and so on, but I'm having trouble finding examples of changing an image based on my screen size.
Specifically I want to replace the image with a new image depending on screen size. My assumption is that I want the image set up as its own component to start...
import React from "react";
export default function ResponsiveLogo() {
return(
<div>
<img src="https://dummyimage.com/420x200/4169e1/fff.png&text=Logo+Placeholder"
alt="logo placeholder"/>
</div>
)
}
I believe that I'm supposed to handle this using useMediaQuery but am unsure of the syntax. As I haven't used useMediaQuery before I'm looking for one example of doing this at one breakpoint so I know how to proceed.
as an example lets assume we want to change images for any screen smaller than Material-UI's "sm" breakpoint (600px), and we want to swap in this image: "https://dummyimage.com/200x200/4169e1/fff.png&text=Logo+Placeholder"
Thanks for any direction!
I found an easy way to do this on MUIv5 using MUI components, but you have to use the MUI Box component for the image element so you can access the sx prop. (They use Box for image examples in the official docs so I think it's recommended anyway)
The idea being, instead of setting the image source with the 'src' attribute, you set it via the 'content' CSS property within the sx prop. This way you can easily access MUI theme breakpoints when setting the image url:
import BigLogo from "../images/BigLogo.png";
import SmallLogo from "../images/SmallLogo.png";
<Box
component="img"
sx={{
content: {
xs: `url(${SmallLogo})`, //img src from xs up to md
md: `url(${BigLogo})`, //img src from md and up
}
}}
alt="Logo"
/>
There are several ways to accomplish this. If your image was a background for example you could change it the same way you use a CSS breakpoint to change any other CSS attribute.
However, since you're using an image element in the HTML, you can either watch for window size changes in javascript or use an HTML solution.
Option #1 Javascript:
window.onresize = function(){
if(window.width > 600){
// do something like change img src path
}
}
There are a lot of pitfalls to this approach. It can destroy performance if it's not implemented correctly and you need to figure out the sizing of the correct elements in JS.
Option #2 srcset or picture element and srcset
This is a way to build responsive images directly in HTML that allows multiple file paths for an image. An image on its own with srcset is a bit complicated (explained better in the link) so I prefer a <picture> element.
Inside your React component you would have something like this:
<picture>
<source media="(max-width: 400px)" srcset="mypic.jpg" >
<source media="(max-width: 1200px)" srcset="myOtherPic.png">
<img src="fallbackpic.gif" alt="alt text for pic">
</picture>
This is cool in that you can have as many source lines as you want each with a media query style condition. They can even be different file types and you can set each of them dynamically just like you would any other HTML element attribute.
The only catch is that <picture> is an HTML5 element so you need to target a newer browser for this to work.
I need to use a transfer component from antd for a page, but the default size is way too small. I have tried to change it using the listStyle and style attributes. I've read through the documentation and don't see any other style options. When it's rendered, I can see that I need to change the size of the "ant-transfer-list"
<TransferComponent
style={{
height:1000
}}
listStyle={{
width: 1000,
height: 1000,
}}
formattedInput={this.state.formattedObjectTypes}
onSelectChange={this.onSelectChange}
sourceName="Available"
targetName="Selected"
/>
My jsx is as shown. I've tried both height:1000 and height:"1000px" with no change on either listStyle or style.
The property listStyle works for me:
<Transfer
listStyle={{width: 500}}
/>
I'm working on a facebook tab that includes an iframe showing content from another website. I've narrowed the iframe down to only showing the part of the website that I want it to and disabled scrolling. In addition to that, I'd like to disable the links in the iframe content, and I've read that it should be possible by adding a transparent .png background image to a div containing the iframe and setting the iframe's z-index to -1, but the iframe is still in front of the image.
So far my css looks like this:
<style type="text/css">
iframe
{
z-index:-1;
}
.bgimg {
background-image: url('transparent.png');
}
</style>
and my html like this:
<div class="bgimg" style="overflow:hidden; width: 700px; height: 100%;margin:auto;">
<iframe src="http://www.url.com/site.html" width="1100" height="700" seamless="seamless" frameborder="0" scrolling="no" style="margin-top:-230px;"></iframe>
</div>
I'm using this to give a direct link to my amateur soccer team's league table, instead of manually having to update the tab each week with all the new information, but I don't want it to be possible to click on each team for team information - just the League table.
I've read several places that this should be possible, but haven't been able to find a functioning code - also read a few places saying it's impossible, and yet some others that say it can only be done using jQuery (which I know nothing about).
If anyone has any alternative solutions to what I'm doing now - please let me know.
Keep in mind that z-index only works for positioned elements (can be relative though.)
See: http://www.w3.org/TR/CSS21/visuren.html#z-index:
Applies to: positioned elements