I have used a contentEditable div inside a webview for some editor functionality in one of my app. The html code seams to work fine and responding to keyboard show and hide action in my android chrome browser but when i tried the same html code with the webview in react-native it won't responds to the keyboard and content hide behind the keyboard.
I have tried scrolling it to the end of the div and auto increase it's height according to content but nothing works.
import React, { Component } from 'react';
import { View, WebView } from 'react-native';
class webviewEditor extends Component{
render() {
return (
<View style={{flex:1}}>
<WebView
source={{
html: `
< head >
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
<style type="text/css">
html, body {height: 100%;}
body {
margin: 0;
}
#wrap {
height: 100%;
width: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
#editor {
padding: 10px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="editor" contenteditable="true">
</div>
</div></body>
`}}
ref={web => { this.webview = web }}
style={{ flex: 1 }}
scalesPageToFit={false}
scrollEnabled={false}
javaScriptEnabled={true}
automaticallyAdjustContentInsets={false}
/>
</View>
);
}
}
I expect the result to be the webview will scroll to the above of the keyboard just like in the browser but it won't in the app inside webview.
Related
I want my sidenavbar to continue over the whole page but when i add the other
sections(home, contact & projects) which are just regular functional components
with a div and h1, they create their own space on the page. is there a better
solution to creating different sections on a page? i have tried rendering the components
from index and app.js but without success, i am currently rendering SidenavBar
from index.js and my sections are getting rendered from app.js.
import React from "react";
import "../Section.css";
function HomeSection() {
return (
<div className="Section" id="Home">
HomeSection
<h1>Home</h1>
</div>
);
}
export default HomeSection;
here is an example of the sections, the section.css only centers the text on the page.
function SideNavBar() {
const [titleActive, setTitleActive] = useState(HomeSection);
return (
<div className="SideNavBar">
<Stickybox>
<ul className="SideBarList">
{SideBarInfo.map((info, key) => {
return (
<li
key={key}
className="rad"
onClick={() => {
console.log(info.title + " clicked");
setTitleActive(info.title);
}}
id={titleActive === info.title ? "active" : ""}
>
<Link
onClick={() => {
console.log(info.title + " clicked");
setTitleActive(info.title);
}}
id={titleActive === info.title ? "active" : ""}
activeClass="active"
to={info.title}
spy={true}
smooth={true}
offset={50}
duration={500}
>
<div id="title">{info.title}</div>
/Link>
<Link
activeClass="active"
to={info.title}
spy={true}
smooth={true}
offset={50}
duration={500}
>
<div id="bild">{info.bild}</div>
</Link>
</li>
);
})}
</ul>
</Stickybox>
</div>
);
}
export default SideNavBar;
// this is the css for sidebar
.SideNavBar {
width: 250px;
min-height: 5000px;
background-color: rgb(47, 167, 223);
height: 100vh;
}
this is my sidenavbar component.
My sidenavbar works as intended if i remove the sections, i have tried setting a max width and transparent background for the sections so they dont overwrite the sidenavbar but they still overwrite it. what is the correct way to create different sections?
i added a red background for the home section so its easier to see what its doing.
You probably want to do something like this for your sidebar to fix it on the side and have it take up the full screen.
This will fix the sidebar in a position on the screen (0px away from the top and 0px away from the bottom).
You then define the width and you have a fixed sidebar!
Hope that helps!
.sidebar {
top: 0px;
bottom: 0px;
width: 200px;
position: fixed;
background-color: blue;
}
<div class='sidebar'></div>
I have html file with scripts, I need to display it in React native screen so I used react-native-webview, it is working fine in ios debug build but not working in ios production build getting blank screen
This is my html page
<html >
<meta name="viewport" content="width=device-width, initial-scale=1" />
<body onload="loader();">
<script>
window.fwSettings = {
'widget_id': 7300********
};
!function () {
if ("function" != typeof window.FreshworksWidget)
{
var n = function () {
n.q.push(arguments)
};
n.q = [],
window.FreshworksWidget = n } }()
</script>
<script type='text/javascript'
src='https://widget.freshworks.com/widgets/7*********.js' async defer></script>
<script>
function loader() {
FreshworksWidget('hide', 'launcher');
FreshworksWidget('open');
};
</script>
</body>
</html>
I placed this html page in Webview like this
<WebView
source={kbHTML}
javaScriptEnabled={true}
domStorageEnabled={true}
originWhitelist={['*']}
scalesPageToFit={false}
startInLoadingState={true}
automaticallyAdjustContentInsets={false}
containerStyle={{
flex: 1,
width: '100%',
height: '100%'
}}
style={{
flex: 1,
height: height,
width: width,
resizeMode: 'cover',
}}
/>
its working fine in ios debug mode but not working in ios production build.getting blank screen.
react-native-webview: "^11.18.1",
react-native: "0.64.2"
I'm developing a a base site app for a multi-function site. So in this moment I'm developing only the responsive frame where the app will go. I want the page to have a header and 3 columns (2 lateral columns for ads and a middle column for the application).
I want the lateral columns to appear only in resolutions above 850px.
So I have the following code:
App.js:
<...imports, etc ...>
function App() {
return (
<Router>
<Navbar />
<div className='divAds'>
<VerticalAd />
<div className='divMiddle' >
<HorizontalAd />
<div className="App" >
<Switch>
<Route exact path="/" component={Main} />
<Route exact path="/about" component={About} />
<Redirect to="/" />
</Switch>
</div>
</div>
<VerticalAd />
</div>
</Router>
)
}
and in VerticalAd component I have:
import React from 'react'
import VerticalSun from '../../img/sun-vert.jpg';
import { Image } from 'semantic-ui-react'
import './verticalAd.scss'
export const VerticalAd = () => (
<div className='divVad'>
<Image src={VerticalSun} rounded alt="Vertical Ad" />
<Image src={VerticalSun} rounded alt="Vertical Ad" />
<Image src={VerticalSun} rounded alt="Vertical Ad" />
</div>
which created this page structure:
So I want the lateral columns to disapear in mobile screens so I had the following css to VerticalAd.scss:
.divVad {
#media (min-width: 850px) {
display: block;
}
#media (max-width: 849px) {
display: none;
}
img {
width: 10em;
height: 50em;
}
}
But the vertical columns won't disapear in lower resolutions. What am I doing wrong ?
I tried to move #media queries to App.scss but didn't work also.
I'm testing this using Chrome developer tools's responsive test.
Edit
The problem was developer tools. ASAI tested it by sizing the whole browser window it worked. Sorry.
But anyway... #Samathingamajig answer's was useful and I have accept it. Sorry any inconvenience.
You're writing the media queries the wrong way around; media queries go outside, selectors go inside:
.divVad {
img {
width: 10em;
height: 50em;
}
}
#media (min-width: 850px) {
.divVad {
display: block;
}
}
#media (max-width: 849px) {
.divVad {
display: none;
}
}
how do I set the width of the modal of react-responsive-modal?
https://react-responsive-modal.leopradel.com/#props
<div style={{width: '600px'}} >
<Modal open={open} onClose={this.onCloseModal} closeOnOverlayClick={true}>
<CreateSubmenu onFormSubmit={this.onSubmenuFormSubmit} editData={editSubmenuData}/>
</Modal>
</div>
I think it would be the best it by styling class in css
.react-responsive-modal-modal { width: 500px }
You can also use react ref to add style using javascript https://reactjs.org/docs/glossary.html#refs
EDIT:
I created working code example:
In index.html I added styles:
<style>
.react-responsive-modal-modal {
width: 200px;
}
</style>
https://codesandbox.io/s/react-responsive-modal-4tuc1?file=/index.html
I m using a Webview for rendering some content to a view, to calculate the height of the content I m using a script to get the height of the content, the span tag contains the content.
<html id="htmlContent">
<body>
<span>
...
//content
...
</span>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.title = document.getElementById('htmlContent').offsetHeight;
window.location.hash = 1;
});
</script>
</body>
</html>
And here is the webview component :
const commonHtmlStyle= `font-weight:300; font-family:sans-serif; font-size: 18px; color:rgb(136,136,136); backgroundColor:rgba(0,0,0,0);`;
<WebView style={{ height: this.state.height }}
ref={(ref) => { this.webview = ref; }}
automaticallyAdjustContentInsets={true}
scrollEnabled={false}
javaScriptEnabled={true}
source={{ html: voca.sprintf(commonHtml, commonHtmlStyle, this.state.content) }}
onNavigationStateChange={this.setState({
height: parseInt(navState.title)
})}
/>
So results,
i m seeing blank spaces while running in Android (script returns appox double the height)
and clipped content on iOS (returns height less than the content height).
I tried using other autoHeight webview components like (react-native-webview-autoheight) but still shows nearly same results for both iOS and Android.
I m trying wrap my head around this issue but but not able to solve this any how. Any help would be appreciated.