I want to adjust the position of the floater for a particular step, I was trying to do:
floaterProps: {
styles: {
tooltip: {
top: -200
},
arrow: {
top:-200
}
}
But it is not working!
Is this the wrong way?
You need to use position: absolute in your tooltip and then adjust the position with top, bottom, left, right properties. more about positioning on MDN documentation.
tooltip: {
position: absolute,
top: 20px,
left: 10px,
}
If you are trying to use multi-tooltips in your application, you can also adjust their position in the Z axis by adding z-index property. more information on MDN documentation.
I have inherited some react-native code where some styling that apparently used to work is no longer working. This is the line of code in question:
<View style={componentStyles.rightButtonContainer}>
The styling assigned looks like this:
rightButtonContainer: {
backgroundColor: config.defaultStyles.greenGradient,
justifyContent: 'center',
alignItems: 'center',
borderBottomRightRadius: 25,
borderTopRightRadius: 25,
width: "45%",
height: 50,
marginLeft: 2,
}
What's not working is the backgroundColor. Notice it is using config.defaultStyles.greenGradient. Now, the config referred to here looks like this:
import colors from '../../styles/Colors';
export default {
defaultStyles: {
greenGradient: colors.greenGradient,
}
};
The above in turn imports colors, which looks like this:
export default {
primary: 'rgb(61, 77, 138)',
secondary: 'rgb(20,169,53)',
greenGradient: ['rgba(20,169,53,1)', 'rgba(20,169,53,1)', 'rgba(20,169,53,1)', 'rgba(20,159,53,1)', 'rgba(20,159,53,1)'],
yellowGradient: ['rgba(229,169,42,1)', 'rgba(229,169,42,1)', 'rgba(229,169,42,1)', 'rgba(219,159,42,1)', 'rgba(219,159,42,1)'],
background: '#fff',
indicator: 'rgb(220, 160, 42)',
text: '#333',
textInverse: '#fff',
textPlaceholder: '#9ab',
textPlaceholderLight: '#ccc',
border:'',
borderLight: '#ccc',
};
So, it should be ultimately assigning the greenGradient color from colors, but as I say it's not working. In other words, the green colored button does not render to the screen.
NOTE: this likely stopped working after updating some libraries and the underlying Expo package. Did something change in terms of how styling is handled?
What is the issue here?
React-native doesn't support gradient. You need to use a third-party module like react-native-linear-gradient.
https://www.npmjs.com/package/react-native-linear-gradient
I am trying to position this sidebar just the opposite of what it is currently doing. I want the sidebar to come in from the right and stay right all through. not left.
this the sandbox link for you to reproduce - https://codesandbox.io/s/react-spring-sidebar-transition-forked-igmgr.
Thank you.
Position the sidebar to the right first.
.sidebar {
position: absolute;
right:0;
}
Change the transform to positive x direction
from: {
transform: "translateX(100%)"
},
enter: {
transform: `translateX(0)`
},
leave: {
transform: "translateY(100%)"
},
I am new to web development Trying to create a sliding page in angular ng-view but its not working as expected when the page two is entering its displaying below the page one till page one is available.please see the code here.
.slide.ng-enter{
transition-duration: 500ms;
transform: translateX(100%);
}
.slide.ng-enter-active{
transform: translateX(0%);
}
.slide.ng-leave{
transition-duration: 500ms;
transform: translateX(0%);
}
.slide.ng-leave-active{
transform: translateX(-100%);
}
I also need to make the page one slide from left to right.Can someone help me on this
I have added position: absolute to .slide. If that is acceptable in the project you are working then the below solution works fine. Please check the updated plunker.
.slide {
top: 0;
position: absolute;
width: 100%;
}
https://plnkr.co/edit/qC0YS2Gj3ddiNvuhjKzV?p=preview
How can I add a loadmask within the launch method of the Ext.applcation to the viewport that will also covers floating components like windows when get showed?
Currently the mask work but does not cover any opened window.
I found the answer here, the trick is to increase the z-order of the mask:
Ext.getBody().mask().dom.style.zIndex = '99999';
I made a test, it works for me.
You can create custom loader that will hide itself when everything is loaded...
1.Create html holder in body:
<div id="loading-mask"></div>
<div id="loading">
<span id="loading-message">Loading. Please wait...</span>
</div>
2. Add css to properly position mask:
#loading-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ffffff;
z-index: 1;
}
#loading {
position: absolute;
top: 40%;
left: 45%;
z-index: 2;
font-family: tahoma,arial,verdana,sans-serif;
font-size: 12px;
}
#loading span {
padding: 5px 30px;
display: block;
}
3. Create js function outside Ext.onReady call:
function hidePreloader() {
var loadingMask = Ext.get('loading-mask');
var loading = Ext.get('loading');
// Hide loading message
loading.fadeOut({ duration: 0.2, remove: true });
// Hide loading mask
loadingMask.setOpacity(0.9);
loadingMask.shift({
xy: loading.getXY(),
width: loading.getWidth(),
height: loading.getHeight(),
remove: true,
duration: 1,
opacity: 0.1,
easing: 'bounceOut'
});
}
4. Call hidePreloader method when all components and tasks are completed and ready, in your case after app.js launch method is fininshed loading, for example:
listeners: {
afterrender: function(form) {
hidePreloader();
}
}
here is a example in fiddle.
I preferred my solution with CSS:
body.x-masked .x-mask {
z-index: 20000;
}
since window z-index is 19001, so 20000 is not bad.