I use wix react-native-navigation. Navigation.showModal open fullscreen size. Is it possible to open the custom size? where do I find all the properties list about navigation layouts? Documentation is too meager...
Modal is always full screen. You can control your view's dimensions in jsx.
Instead of flex: 1 - use a predefined width and height according to your needs.
render() {
return (
<View style={{width: '80%', height: 150}}>
{ /* render Modal content */ }
</View.
);
}
Alternatively, if you need to interact with the UI behind the Modal you should use a Navigation.showOverlay
Navigation.showOverlay({
component: {
name: 'example.Overlay',
options: {
overlay: {
interceptTouchOutside: false // this make touch events pass through the invisible parts of the overlay
}
}
}
});
For more examples on Overlay used you can see code examples in the playground app
Related
Hi i am extending the heading block using the filter hooks functions. so i am using the "blocks.registerBlockType" to add additional attributes. i am using the "editor.BlockEdit" to have my inspactor controls and update the attributes values. and i use the "blocks.getSaveContent.extraProps" to save the added attributes on the front end.
and indeed all attributes pass to the front side. but, the issue is that while editing none of the changes are reflected in the full site editor. the attributes are changing but it does not displayed inside the full site editor.
for example: this is a function that change the margin top attribute:
const updateMTDvalue = (newDTval) => {
setAttributes({ marginTop: (newDTval === undefined ? '' : newDTval) });
}
and as i said the new values does pass to the save function and works on the front end. but in the full site editor....nothing.
so i thought maybe i should add styles in the edit function like so:
if (attributes.desktopTop && attributes.desktopTop != undefined && attributes.desktopTop != '') {
props.attributes.style = {
...props.attributes.style,
'display': 'grid',
'--this-is-custom-variable': '#444',
marginTop: attributes.desktopTop + attributes.desktopUnit
};
}
as you can see i also try to hard code display and even a css custom property, as well as the attribute values. none of it pass the the element.
but when i have tried this:
props.attributes.style = {
...props.attributes.style,
'display': 'grid',
'--this-is-custom-variable': '#444',
marginTop: attributes.desktopTop + attributes.desktopUnit,
typography: {
fontSize: '3rem'
},
spacing: {
margin: {
top: fullTopM
}
}
};
the spacing and typography does work on the element inside the full site editor.
any idea why? why the update function itself, that update the attribute, does not change the element in the editor? and how can i add the styles to the element in the editor?
NOTICE i am talking about the full site editor, not the posts and pages editor.
I have a vue component that uses the tsparticles library, and I would like to set is as background as it is overlapping over all my other components, can anyone help as to how I can do that?
If you want it to be running but not displayed expect when booleanToShow is true:
<div v-show="booleanToShow"></div>
If you want to remove it from the DOM (and stop it from running)
<div v-if="booleanToToggle"></div>
You can set tsparticles to be in background using the backgroundMode property.
You can see a working sample here: https://codesandbox.io/s/xenodochial-colden-uvs85?file=/src/App.vue
The property backgroundMode sets the tsparticles canvas to full screen, it's an object with two properties: enable and zIndex.
enable (boolean): (obviously) enables the full screen mode
zIndex (number): sets the canvas element z-index property to whatever you want
A sample of backgroundMode:
{
/* root object */
backgroundMode: {
enable: true,
zIndex: -1
}
/* root object */
}
You can set the background property too, it's a shorthand to the CSS background property.
You can use that property to change the canvas background color, for example:
{
/* root object */
background: {
color: "#000"
}
/* root object */
}
If you set a negative zIndex you need to use detectsOn: "window" in interactivity object to keep mouse events working.
I'm using react and material-ui in my project and I have come across a simple issue that I just dont't know how to solve.
I want to create a drawer and set its height in a way that when it will open, it wont open over the app bar.
There is no parameter in the Drawer component for the height, I also tried to override its style and setting up the height on the style object like this :
<Drawer style={{height:'90%'}} />
But it didn't work.
The only way I can think of, is editing the code of the Drawer component, but ofcourse I want to avoid that.
Any idea on how I can define the height?
Here you go:
<Drawer open={this.state.open} containerStyle={{height: 'calc(100% - 64px)', top: 64}}>
<MenuItem>Menu Item</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
</Drawer>
containerStyle is prohibited in version 1.0 and above
So you need to use props classes instead
Here is an example to this nontrivial case
import {withStyles, createStyleSheet} from 'material-ui/styles'
const styleSheet = createStyleSheet({
paper: {
height: 'calc(100% - 64px)',
top: 64
}
})
class CustomDrawer extends Component {
...
render () {
const classes = this.props.classes
return (
<Drawer
classes={{paper: classes.paper}}
>
...
)
}
CustomDrawer.propTypes = {
classes: PropTypes.object.isRequired
}
export default withStyles(styleSheet)(CustomDrawer)
I have a question. I use Twitter Bootstrap to create theme.
I would like to create on my page something like preview with different size of views, but without change size browser window.
I want to create div with id "preview" and 4 buttons (xs,sm,md and lg) to change size this div to apply "mediaqueries" from TB.
Is it possible to do ?
You can change the size of the preview window with jQuery:
HTML
<div id="preview"> Large
Medium
Small
Extra small
</div>
CSS
#preview {
width: 1200px; // initial width
}
JS
$("#lg").on("click", function () {
$("#preview").css("width", "1200px");
});
$("#md").on("click", function () {
$("#preview").css("width", "992px");
});
$("#sm").on("click", function () {
$("#preview").css("width", "768px");
});
$("#xs").on("click", function () {
$("#preview").css("width", "767px");
});
JSFiddle: http://jsfiddle.net/6kLo0cxa/
I have an iframe inside my main page. There is a modalpopup inside the iframe page. So when the modalpopup is shown, the parent of the modalpopup is the iframe body and the main page parent body. Thus the overlay only covers the iframe and not the entire page.
I tried moving the modalpopup from the iframe to the parent windows body element (or any other element inside the parents body) using jQuery. I am getting an invalid argument error.
How do I show a modalpopup from an page inside iframe and it should cover the entire document, parent document as well?
Update:
Since few users are interested in achieving the same behavior .. here is the workaround
The best workaround that I would suggest would be to have the modalpopup in the main page .. and then invoke it from the iframe .. say something like this ..
/* function in the main(parent) page */
var _onMyModalPopupHide = null;
function pageLoad(){
// would be called by ScriptManager when page loads
// add the callback that will be called when the modalpopup is closed
$find('MyModalPopupBehaviorID').add_hidden(onMyModalPopupHide);
}
// will be invoked from the iframe to show the popup
function ShowMyModalPopup(callback) {
_onMyModalPopupHide = callback;
$find('MyModalPopupBehaviorID').show();
}
/* this function would be called when the modal popup is closed */
function onMyModalPopupHide(){
if (typeof(_onMyModalPopupHide) === "function") {
// fire the callback function
_onMyModalPopupHide.call(this);
}
}
/* functions in the page loaded in the iframe */
function ShowPopup(){
if(typeof(window.parent.ShowMyModalPopup) === "function") {
window.parent.ShowMyModalPopup.apply(this, [OnPopupClosed]);
}
}
// will be invoked from the parent page .. after the popup is closed
function OnPopupClosed(){
// do something after the modal popup is closed
}
Hope it helps
If you're using the iframe simply for scrollable content you might consider a styled div with overflow: auto or scroll, instead.
A set up such as this makes it easier to modify the appearance of the entire page since you're not working with multiple documents that each essentially have their own window space inside the page. You can bypass some of the cross-frame communication and it may be easier to keep the information in sync if you need to do that.
This may not be suitable for all situations and may require ajax (or modifying the dom with javascript) to change the div contents instead of just loading a different document in the iframe. Also, some older mobile browsers such as Android Froyo builds don't handle scrollable divs well.
You answered your own question in your update. The modal dialog needs to live on the parent page and invoked from the iframe. Your only other option is to use a scrolling div instead of an iframe.
It is not possible the way you are asking. Think of it this way: an iframe is a seperate window. You cannot (for the time being) move a div in one webpage into another.
I have done this by writing a small code for jQuery see below maybe this can help :
NOTE: Make sure you are doing on same domain
HTML:
<button type="button" id="popup">Show Popup</button>
<br />
<br />
<iframe src="your url" style="width: 100%; height:400px;"></iframe>
JS:
// Author : Adeel Rizvi
// It's just a attempt to get the desire element inside the iframe show outside from iframe as a model popup window.
// As i don't have the access inside the iframe for now, so I'll grab the desire element from parent window.
(function () {
$.fn.toPopup = function () {
return this.each(function () {
// Create dynamic div and set its properties
var popUpDiv = $("<div />", {
class: "com_popup",
width: "100%",
height: window.innerHeight
});
// append all the html into newly created div
$(this).appendTo(popUpDiv);
// check if we are in iframe or not
if ($('body', window.parent.document).length !== 0) {
// get iframe parent window body element
var parentBody = $('body', window.parent.document);
// set height according to parent window body
popUpDiv.css("height", parentBody.height());
// add newly created div into parent window body
popUpDiv.appendTo(parentBody);
} else {
// if not inside iframe then add to current window body
popUpDiv.appendTo($('body'));
}
});
}
})();
$(function(){
$("#popup").click(function () {
// find element inside the iframe
var bodyDiv = $('iframe').contents().find('YourSelector');
if (bodyDiv.length !== 0) {
// Show
$(bodyDiv).toPopup();
} else {
alert('Sorry!, no element found');
}
});
});
CSS:
.com_popup {
background-color: Blue;
left: 0;
position: absolute;
top: 0;
z-index: 999999;
}