I'm creating a windows 10 xaml app. One of the views contains a webview which fetches some html.
My problem is that although the default theme on the app is set to dark, the scrollbar in the webview is always light, which jars against the rest of the UI.
I've tried setting the RequestedTheme=dark on the webview, but no joy
Unfortunately this isn't possible since the WebView is based off of Edge and Edge doesn't currently support it, as you can see here. If Edge gets this feature, you could simply insert a STYLE into your head element to define the color.
Related
We are creating a Teams tab application and as suggested by Microsoft we are using #fluentui/react-northstar#0.49.0 for UI controls.
But there is no option for providing responsiveness in the Grid or pther layouts for making controls adjusting itslef based on the screen size (like different screen sizes, tablet and mobile).
Kindly let me know whether any option is available in that component or else we need to use any CSS framework outside for that purpose. Thanks in advance for your response.
You can use Grid https://fluentsite.z22.web.core.windows.net/layout
The reason why you don't see screen sizes is because Grid uses flexbox, which is not the same as bootstrap grid system where it does show you screen sizes.
Not familiar why fluentui northstar exists but for web I'm using the Stack component as my grid system which also uses flexbox
I'm developing a Windows Store app using the "Dark" theme, which works fine for the main body of the app. However, for the settings flyout, I want to match the appearance of the system-provided "Permissions" flyout, which is to say, black on white.
Unfortunately, that's rather hard to set for every control with the Dark theme in operation.
Is there a way to use the "Light" theme, overriding the application default, for the UserControl I'm using for my settings pane, or is the only way to to do this to copy all the relevant chunks of the theme file for it into the resources of the UserControl?
I had this exact same problem - using the dark theme, and also using a light background for the settings flyout. The research that I did didn't turn up anything either. I ended up having to style my controls so that they would appear properly on the light settings flyout.
One other thought that I had was this, although I didn't go down this path - to use the light theme as the default, but change my app styling so that the main elements would appear dark. This would mean that the flyout controls would not have to be restyled. I guess it depends on how many controls you are using, and which path is easier.
If you go down the 2nd path, your app obviously loses the ability to change themes on the fly.
I'm having some issues with a website that only occur in Safari. I'm running version 5.1.7 (7534.57.2) on a Mac.
You can view the site here: http://mcad.edu/annual-report-2011-12/.
The website is parallax scrolling, with a relative positioned content div that holds everything, including the 3 parallax scrolling backgrounds which are all fixed, top and left set to 0.
Within the fixed parallax background containers, colorized images fade into full color images when a user mouses over them. For each "image", there are two divs stacked, each with background images that are positioned by background-position. The div on the bottom has the colorized image. The div on top has the full color image as a background and has its opacity set to 0 until mouseover. The fade is achieved using a CSS transition on the opacity property so that the top div becomes visible.
So, in Safari only, when I mouse over any of these divs, the transition occurs smoothly but all of the content in the same parallax scrolling background div shifts/jumps in the process. If I remove the CSS transition, this does not occur.
I think that it might have something to do with the transition/webkit-transition property not playing nicely with a fixed position container in Safari. However, all of the issues I've found that relate to that are from 2010 and mention a Safari bug that I assume has been fixed…two years later. But maybe not.
There's also another issue with the Catalyst section (3rd dot down on the right navigation). These animated images work as links in Chrome, Firefox and Opera, but not Safari. Any ideas?
I have a similar issue with a fixed position and transition-duration for a header menu I've created. When a visitor scrolls down, the menu has a box shadow that fades into place. Well when this is viewed on safari in a MacOS, I get a weird sliding in issue. To easily fix this, after spending way to much time searching for answers, I'm removing the transition effect for macs. This fixes the slide in issue but gets rid of the transition effect sadly.
So as you were speculating, it probably is the transition duration on your project as well. The best thing for this would probably be to make a Mac-Safari CSS file, get rid of the transition-duration for that particular area and move on with your project.
Best I can suggest for now. Hope it helps.
i create item details page divided to 3 rows ,i put scrollviewer in row no 2, scrollview contains two pargraph and webview ,when i scroll the page ,webview appear on the row no 3 means that it ovelay row no 3
WebView suffers from an airspace issue. as it is not hosted in the same render target as the rest of the app, but rather in a separate HWND window. There is currently no good way around that other than manually resizing the WebView to make it fit in your boundaries.
You can use a WebViewBrush instead of the WebView, but that has a set of limitations of its own - basically it is just a non-interactive brush. Its documentation shows how you can use it to temporarily show the non-interactive page while some other content is rendered on top of it.
Or, if you only want to display a Web page, WebViewBrush may be able to be used.
official sample code: XAML WebView control sample - ScenarioInput4.ComboBox1_DropDownOpened()
in iOS5 (as we all know by now), Apple has introduced -webkit-overflow-scrolling which allows for native scrolling. My question is when applying sticky footer and headers - if you scroll up to the top/bottom part of the page - it will let you "bounce" outside the top header or footer.
Is there anyway to just have the INNER CONTENT bounce or be elastic and not the entire window? I'd like the header and footer to stay at the top not be able to see the grey are behind a "webapp".
Thanks,
Greg
It's currently a known issue with native div scrolling on iOS 5. More information and a partial fix here.
Apple is supposedly aware of the problem and I guess we are waiting on a fix.
I unfortunately haven't been able to find a way to do this while using -webkit-overflow-scrolling (as opposed to handling touchmove events where I'd just use the preventDefault method of the event object).