SweetAlert2's toast floated behind the navbar , I tried to solve it with z-index but it doesn't work , I'm using sweetAlert2 with vuejs
and that's how I use it :-
showSuccessAlert() {
Toast.fire({
icon: 'success',
title: 'Product added successfully to cart',
})
}
have you tried changing the z-index of sweetalert?
Toast.fire({
customClass: {
container: 'my-swal'
},
icon: 'success',
title: 'Product added successfully to cart',
})
and in css file add this
.my-swal {
z-index: 99999;
}
also please check this link
https://github.com/sweetalert2/sweetalert2/issues/665
Related
I want to change the nav link icon color. If I set the primary color by creating a custom theme it won't effect.
<ThemeProvider
theme={{
palette: {
themePrimary: getTheme().palette.teal,
}
}}
>
Actually it worked on hover but not on normal view. I tried setting the iconProps but it didn't work either.
links: [
{
name: "Overview",
icon: "WebAppBuilderFragment",
iconProps: { color: "white" },
},
],
How can I change these icons color?
IconProps is an object with following props. Use styles to set icon color:
links: [
{
name: "Overview",
iconProps: {
iconName: 'WebAppBuilderFragment',
styles: {
root: { color: '#f00' },
},
},
},
],
Codepen working example.
I'm trying to develop the front end of an application and I wanted to theme some boxes.
I pulled an example from here:
// theme.js
import { extendTheme } from "#chakra-ui/react"
const theme = extendTheme({
components: {
Button: {
// 1. We can update the base styles
baseStyle: {
fontWeight: "bold", // Normally, it is "semibold"
},
// 2. We can add a new button size or extend existing
sizes: {
xl: {
h: "56px",
fontSize: "lg",
px: "32px",
},
},
// 3. We can add a new visual variant
variants: {
"with-shadow": {
bg: "red.400",
boxShadow: "0 0 2px 2px #efdfde",
},
// 4. We can override existing variants
solid: (props) => ({
bg: props.colorMode === "dark" ? "red.300" : "red.500",
}),
},
},
},
})
export default theme
and adapted it to this test-code
const theme = extendTheme({
components: {
Box: {
// 1. We can update the base styles
baseStyle: {
},
// 2. We can add a new button size or extend existing
sizes: {
},
// 3. We can add a new visual variant
variants: {
Mini: {
fontWeight: "bold", // Normally, it is "semibold"
textDecoration: "underline",
boxShadow: "0px 30px 5px -20px rgba(0,0,0,0.75)"
}
},
},
},
})
The idea is that I can say <Box variant="Mini">, but that's not actually working. None of the styles have any affect on the box or it's content.
If I change Box: to Text: and add a Text element <Text variant="Mini">test</Text>, the styles are applied. It's also not working for Grid but does for Button
What am I doing wrong?
I do know that Box has a boxShadow property, but it's very limited.
I still haven't figured out how to modify Box with CSS, partly because the answer I'm about to give doesn't list a file for Box.
There's a note on the page
If you're curious as to what component styles you can override, please reference the default component style files.
When I wanted to modify Drawer, I found the same issue. I went to that link and opened drawer.ts. In there I found this function
const baseStyle: PartsStyleFunction<typeof parts> = (props) => ({
overlay: baseStyleOverlay,
dialogContainer: baseStyleDialogContainer,
dialog: baseStyleDialog(props),
header: baseStyleHeader,
closeButton: baseStyleCloseButton,
body: baseStyleBody,
footer: baseStyleFooter,
})
Which gives me some useful keys. I then found of I modified my theme styles like so, I could modify facets as expected.
import { extendTheme } from '#chakra-ui/react';
let theme = extendTheme({
components: {
Drawer: {
baseStyle: {
dialog: {
bg: "blue",
},
closeButton: {
bg: "hotpink",
},
header: {
bg: "red",
},
},
},
}
});
read the documentation in layer styles, i had the same problem with Grid component and also tried the same as you, thanks for the answer
https://chakra-ui.com/docs/theming/component-style#usestyleconfig-api
https://chakra-ui.com/docs/features/text-and-layer-styles
I am using TinyMCE 5.6.2 and I have a weird bug with a custom dialog. I have it set to a size of large with a tab panel for the content. I have a header and two buttons setup. When the dialog opens, the buttons are pushed down so that you can just see top few pixels. It looks like some media breakpoint issue because when I resize the window, the buttons become fully visible at a height of 654px and below.
How can I get these buttons to show all the time?
tinymce.PluginManager.add('imageGallery', function (editor, url){
editor.ui.registry.addButton('imageGallery', {
icon: 'gallery',
tooltip: 'Image Gallery',
onAction: function() {
editor.windowManager.open({
title: 'Image Gallery',
size: 'large',
body: {
type: 'tabpanel',
tabs:[
{
name: 'upload',
title: 'Upload',
items: [
{
type: 'dropzone',
name: 'dropzone'
}
]
},
{
name: 'site',
title: 'My Images',
items: [
{
type: 'htmlpanel',
html: '<div id="myImages" class="img-flex-grid"></div>'
}
]
},
{
name: 'shared',
title: 'Shared',
items: [
{
type: 'htmlpanel',
html: '<div id="sharedCategories" style="float: left; min-width: 150px; background-color: lightgray; font-size: 14px; color: rgba(34,47,62,.7);"></div><div id="sharedImages" class="img-flex-grid" style="float: right; width: 900px"></div>'
}
]
},
],
},
buttons: [
{
type: 'submit',
text: 'Select',
name: 'select',
disabled: true,
primary: true,
},
{
type: 'cancel',
text: 'Close'
}],
onChange: function(dialogInstance, details) {
handleInputChange(dialogInstance, details);
},
onSubmit: function() {
handleSubmit();
},
onTabChange: function(dialogInstance, details) {
handleMainTabChange(dialogInstance, details.newTabName)
}
});
}
});
}
If anyone else is having this issue, I had to override a CSS class. Because I am accessing TinyMCE via a CDN, I do not see a way to create a custom skin or theme. This is the code that I added to my CSS file.
.tox-dialog--width-lg {
min-height: 650px !important;
height: auto !important;
}
I have been stuck on this problem all morning. I have read multiple GitHub issues and StackOverflow posts and nothing has worked.
I want to remove the blue back button in the top left of the below pic.
I have noticed I am having trouble customizing the top bar altogether. I cannot add a title to the back button etc (this hint might indicate what is wrong).
Navigation.setRoot
Navigation.events().registerAppLaunchedListener(() => {
Reactotron.log('5');
Navigation.setRoot({
root: {
stack: {
children: [{
component: {
id: STARTING_SCREEN,
name: STARTING_SCREEN
}
}],
}
},
layout: {
orientation: 'portrait',
},
}).then(()=>Reactotron.log('7'));
Navigation.push
SplashScreen (root screen) -> AccessScreen (next screen).
Navigation.push(this.props.componentId, {
component: {
name: screen
},
options: {
topBar: {
backButton: {
visible: false,
}
}
}
It's almost as if I am specifying the backButton options in the wrong place.
A tricky workaround
leftButtons: [
{
id: 'something',
text: '',
},
],
the text: '' will keep a empty space, so will hide the button.
Actually not hide, but yea you can say that too.
You're good to go!!
Use it but only working for ios
Navigation.setDefaultOptions({
topBar: {
backButton: {
visible: false
}
},
})
or you can customize topBar
Navigation.push(this.props.componentId, {
component: {
name: screen
},
options: {
topBar: {
backButton: {
background: YourComponent
}
}
}
I'm very new at Wix Navigation, I do really like the feeling of native in navigating but its also very hard.. I cant understand how I should build.
I want to be able to start my app with single welcome screen, then I will navigate the user to login/register screens. After they login they will be inside of home page, and home page will have sideMenu. I have created the home page with side menus but I cant make welcome screen show up before, something fails anyways..
I really tried so many combinations but I cant make it properly, can someone give me a small example how I would do that? Here actually welcome screen shows up first but it have backbutton, which I dont want.. when I press back button it goes to home page, instead we should be able to go to home page from welcome
Wanted flow: Welcome -> Login -> Home(with side menus)
Navigation.registerComponent(`WelcomeScreen`, () => Welcome);
Navigation.registerComponent(`HomeScreen`, () => Home);
Navigation.registerComponent(`Screen2`, () => Screen2);
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
sideMenu: {
left: {
component: {
name: 'Screen2',
passProps: {
text: 'This is a left side menu screen'
},
},
},
center: {
stack: {
children:[
{
component: {
name: 'HomeScreen',
options:{
topBar:{
visible: true,
title: {
text: 'Home',
color: 'red',
alignment: 'center'
},
},
}
},
},
{
component:{
name: 'WelcomeScreen',
options:{
topBar:{
visible: true,
title: {
text: 'Welcome',
color: 'red',
alignment: 'center'
},
},
}
},
}
]
}
},
right: {
component: {
name: 'Screen2',
passProps: {
text: 'This is a right side menu screen'
}
}
},
options: {
sideMenu: {
left: {
width: 250*SW,
},
},
}
},
},
})
})
You can start by putting the welcome screen as your root and then pushing the login screen on top of that and if the user is logged in setting the root again by putting the above code in setRoot. Example
Edit
index.js :
Navigation.events ().registerAppLaunchedListener (() => {
Navigation.setRoot ({
root: {
stack: {
children: [
{
component: {
id: 'WelcomeScreen', // Optional, Auto generated if empty
name: 'navigation.playground.WelcomeScreen', // WelcomeScreen Id
}
},
],
},
},
});
});
push to HomeScreen.js
ScreenOne.js :
import {PropTypes} from 'prop-types';
static propTypes = {
componentId: PropTypes.string,
};
pushScreen () {
Navigation.push (this.props.componentId, {
component: {
name: 'navigation.playground.HomeScreen' // HomeScreen.js Id
},
});
}
Try if this pushing screen logic works for you