I am working on a "drawer menu" component. The menu is an overlay that comes form the side and partially covers the main screen.
Is it possible to make it partially cover the status bar too? I have seen this effect in Google Inbox.
Yes, it is possible to make it partially cover the status bar. You can create a view component and you can position it with an absolute position. Based on this library, you can add this style to a view component
{
right: 0,
left: 0,
top: 0,
bottom: 0,
position: 'absolute',
backgroundColor: 'transparent'
}
Then you can add a custom width to the same view so the drawer doesn't take all the screen width.
You can also use the react-native DrawerLayoutAndroid, but this component is only available on android.
Related
I have a Screenshot warning view which will be shown when a screenshot is taken in the app. This is an absolute view and is supposed to be shown over any of the app screens and is working perfectly fine in all the screens.
However when the keyboard is shown on the current screen and when a screenshot is taken, the Screenshot warning view is shown with the keyboard on top of this absolute view.
Is there a way I can style the Screenshot warning view so that it covers the bottom view and the keyboard.
The Screenshot warning view is kept in App.tsx and will be displayed on listening to the screenshot taken event.
Following is the style used for Screenshot warning view:
container: {
position: "absolute",
top: 0,
right: 0,
height: "100%",
backgroundColor: "red",
width: "100%",
zIndex: 10
}
I am trying to get the icons in the tab bar to be brought down more into the middle of the bar. I have tried setting the image insets in the story board as well as through code and none of it is working.
I'm currently using iOS 15 + Xcode 13.1.
EX: (top: 6, right: 0, bottom: -6, left: 0)
This is an example of the code I attempted as well:
tabBar.items?[0].imageInsets = UIEdgeInsets(top: 6, left: 20, bottom: -6, right: 0)
This is a picture of the current state. You'll see that even without a title, all the icons float to the top of the bar and I want them to be aligned lower in the bar.
I am not 100% sure but as far as I know there is no way to change it's alignment.
I would not recommend modifying the native tab bar. If you definitely want to update the position of tab bar items I encourage you to use a custom tab bar. You will have a lot more control over how it behaves and you will avoid any hacky solution.
I am developing a responsive design for a website. The DA (director artistic) wants to put an action button at the bottom of the viewport.
And this button must be always displayed to the user.
I am applying a fixed bottom CSS style:
.mobile {
position: fixed;
bottom: 0;
left: -50%;
width: 75%;
transform: translate(-50%, -50%);
}
On iOS
The button is hidden when Safari's toolbar is displayed but it shouldn't be
And when the toolbar is hidden and the button visible, I can not click on it.
This toolbar has a different height depending on the iPhone version used.
Do you have some css tricks or any other idea to solve this case?
I'm creating an app in React Native that uses react-navigation.
I have some views that animate off the screen towards the top of the screen. While animating, the view goes behind the react-navigation navigation header. It goes behind the iOS status bar, but the status bar is translucent, so it shows the status bar text on top of the view. The status bar is no longer white, but the color of the view under it.
This doesn't look right and I would like the status bar to be always on top and not translucent. What is the best way to go about this?
I was finally able to avoid content overlapping the status bar by placing this element in my topmost container:
<View
style = {{
height: 20,
width: width,
backgroundColor: 'white',
zIndex: 3,
position: 'absolute',
top: 0,
left: 0,
}}
/>
The status bar still shows but animated content never overlaps it.
It's because your react-navigation header has a elevation property, that works strangely (i think just in some cases) as a zIndex in Android, you probably can fix this by adding a higher zIndex to your iOS status bar than you have in the animation.
EDIT: Solved in How to set iOS status bar background color
I have an attribution icon on an Open Street Map layer in OpenLayers 3.
I have set it to the left side of the screen but when the button is clicked it attempts to expand out of the screen to the left (as is its default behaviour). Is there a way to get the attribution information expand to the right instead?
I have set the attribution icons position using some CSS:
.ol-attribution {
right: 95%;
}
The following jsfiddle shows the current behaviour I wish to avoid (click on the i button in the bottom left):
http://jsfiddle.net/single_entity/7mvuxytv/
By making the position relative to the left instead of the right, the div expands on the right. Making the button float on the left makes it also stay at the same position to toggle it on and off.
.ol-attribution {
right: auto;
left: .5em;
}
.ol-attribution button {
float: left;
}
http://jsfiddle.net/7mvuxytv/31/