Bootstrap 3 modal - page background with bottom space - twitter-bootstrap-3

When I reload the content of modal by Ajax and the modal height is bigger than height of window, the shadow background is missing (on bottom is space).
Any idea?

Calling handle update on modal fix the problem.
$('.modal').data('bs.modal').handleUpdate();

Related

How to make modal behind the bottom tab bar in React Native

I created a bottom tab bar, when press on the bottom tab bar, will toggle a modal. Now my modal is blocking the bottom tab bar, so I am not able to press on the bottom tab bar to close my modal.
Any solution for this? I've tried zIndex, and adjust the marginBottom for the modal (move it up), but both are not working
Unfortunatelly, you can not do this. As told in this piece of documentation:
A modal displays content that temporarily blocks interactions with the main view.
So this is indeed the expected behavior.
Did you try with
fullScreen={false}
transparent={true}
then set margin-bottom

Animating during momentum scroll in react-native?

I'm attempting to create a custom NavBar on a screen that renders a ScrollView. Inside the NavBar, there's a button, that when pressed, causes the NavBar to translate downwards, thereby giving the appearance that the NavBar is expanding (This is done using Animated.spring() with the useNativeDriver option). Everything is working great, except if the ScrollView is still scrolling at the time the button is tapped (ie: when "momentum" scroll is taking place). In this scenario, the onPress handler that kicks off the NavBar animation is invoked as expected, but calls to Animated.spring() do not cause any animation to take place. Is it possible to either have the NavBar "expansion" animation to occur during the scroll, or pause the scroll to allow animation to proceed?
Like it's explained in RN docs the animation type you using are stoped by gesture events like scrolling, better use Animated.event() with onScrollprops combined with an interpolation animation to animate you footer.

How do I fix flickering Webview in flyout upon flyout opening?

I have an app that opens a flyout via custom user control. The flyout xaml contains a webview with content given to it via "[webview].NavigateToString()".
When the flyout opens, it does a slight sliding animation from just below the center of the screen to the center of the screen and loads the content (this is the default animation).
The webview content is loaded immediately and when the flyout is finished loading everything, the webview flickers.
I have tried all of the "on load" and "loaded" events to no avail. The flicker always happens after those events.
My only workaround is to set a dispatcher timer to make the webview visible once the flyout is completely finished loading and animating.
Does anyone know how to fix this without the timer?
Note: Upon close inspection on the client machine (surface pro 3), it seems as if the webview is reloading the css style for the webview. I can see the webview with the correct style, then the "flicker" is slow enough that I can see the styling disappearing for a split second then the styling is applied again. I tried removing the styling completely and there is still a flicker. Perhaps it is reloading the entire webview after the flyout is done loading?
Edit: Ok. I have confirmed that it has to do with the default flyout transition. In another area of my app, I use a webview as part of a page. I turned on a transition for that page and the webview did the exact same flicker! Therefore if I can remove the flyout transition completely, the flicker should disappear.
Edit #2: So far I am unable to remove the transitions from the flyout.

Android Studio Tabhost in scrollview always at top

I have a tabhost in android studio that is inside a scroll view. The tabhost itself lies underneath some text.
Here is an image of the xml file
However, whenever i open the app on a device, the scroll view has the tabhost set at the top so i have to scroll up to see the text that is above it.
Why is this and is there a fix?
Thanks in advance.
The TabHost is the first view that can request focus. So the work-around is to have another focusable view at the top of the LinearLayout within the ScrollView.
I used the following View for this purpose
<View android:focusableInTouchMode="true" android:layout_width="0px" android:layout_height="0px"/>
Note: I was heavily inspired by TabHost inside a ScrollView forces it it to scroll to the bottom and Stop EditText from gaining focus at Activity startup.

Overlay the whole AppBar on the page content in windows phone 8.1

When app bar is present, the height of the app bar affects the content on the rest of the page.
For example, if the app bar has a Height of about 25px when ClosedDisplayMode="Minimal", the rest of the content on the page (rootGrid) would have its actual height of Screen Height - 25px. So the app bar is not overlay on page content.
This is visible especially when the content is VerticalAlignment="Center" or Bottom.
Is there any way to avoid this? Something like a ZIndex on the AppBar so that it is displayed over the page content and not trimming it on the bottom side of the screen.
It is possible to tell the renderer that the whole "window" should be used when rendering and not just the visible part. By calling Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().SetDesiredBoundsMode(ApplicationViewBoundsMode.UseCoreWindow) the renderer will include the areas beneath the chrome of the window (ie the system tray on top of the screen and the app bar at the bottom). The chrome will always be on top of whatever is rendered from xaml.
ApplicationView is documented here.
If you don't want the system tray on the top of the screen to overlap the content, you'll have to compensate with a margin on the root container of your visible xaml.