I am using bootstrap 3 for web mobile app.
Added my css for navbar drop down menu. Its working fine in most of the devices.
However when verified # Small tablet landscape (800x600) & Tablet portrait (768x1024), drop down menus are overlapping.
Please advise.
Also, I have added my code # http://jsfiddle.net/monicaRegal/y2s97xxk/
Thank You
Regards,
Monica Mandal
...you can either reduce the size of your elements so that they properly fit in multiple screens, or use another break point for switching to the mobile menu.
edit: elaboration:
I think the part 'reduce the size of your elements' is obvious.
In the bootstrap customizer before you download the files:
http://getbootstrap.com/customize/#media-queries-breakpoints
...you can customize the resolutions where the breakpoint will take place. Which means you can change the resolution where the navmenu changes to its mobile version.
As a new alternative, I would suggest to alter your design so that it fits your needs.
Second alternative, make the width STATIC instead of fluid down to a resolution where the mobile navigation will kick in.
Related
First and most important: I am by no means a developer. We hired an agency to develop an APP for us, and i was given by a developed solution that i am not convinced if it is the best solution, So i would like to ask you guysfor advice.
Unfortunatelly i cannot put pictures nor links to code for the app, but i will do my best to explain myself:
The problems i encountered are mainly two:
All items appear to have fixed sizes applyed to them: When testing the app on different devices, the size of the elements is not responsive at all. In fact on small devices (Moto G5) There are elements that fall behind the bottom navigation bar making them unaccessible.
Lot of stuff fall below that said bottom navigation bar.
My question is the following:
Is react native responsive?
In web development there is a lot of flexibility when it comes to responsiveness with CSS and JS. Is React native any different? or there is a way to prepare the layout so it fits most of the common sizes without losing acces to interactions?
Hope i explained myself correctly. and again, sorry for not asking a technical specific question.
React Native is designed to be responsive, but it requires a different approach compared to web development. In web development, you can use CSS and JavaScript to make your website responsive, but in React Native, you use a different set of tools.
We have many ways to make the app responsive with the device's large screen and small screen.
Use the Dimensions API: React Native provides the Dimensions API, which allows you to get the dimensions of the screen at runtime. You can use this information to adjust the layout of your app based on the size of the screen.
Use third-party libraries ex: react-native-size-matters, react-native-responsive-screen, ...
Use Flexbox: React Native uses Flexbox for layout, just like web development. Flexbox is a powerful tool for creating responsive layouts that adapt to different screen sizes. You can use the flex property to adjust the size and position of elements on the screen.
In terms of your specific issue with elements falling behind the bottom navigation bar, it's likely that the layout is not taking the height of the navigation bar into account. You can use the Dimensions API to get the height of the navigation bar and adjust the layout accordingly.
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 am using the Flickity slider (from Metafizzy) in a landing page to show different products. The slider is in portrait size and not landscape.
The issue is that when the user only scrolls the top portion of the slider into the viewport on mobile (i.e. 20-30%) and they attempt to scroll/swipe the slide, the screen suddenly jumps to attempt to include the whole slider into the viewport.
This never happens on the mobile emulator on the desktop, but only on the smartphone device on safari and google chrome browsers
Is this intended to be a specific behaviour for the Flickity slider? Like I should not be using it to make portrait sliders? I've gone through the plugin options and not able to fix this behaviour. It never came up in early testing with dummy content.
I've provided a link to the github page where it is happening, you can open it up in mobile browser and see the viewport "jumping" bug when you attempt to scroll the table. https://true-digital-channel.github.io/Galaxy11-Preorder/build/mobile.html
Disable the keyboard accessibility by setting accessibility: false in the carousel options. From the Flickity issue tracker.
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.
I'm facing a Problem with my list . There is button naming List ..on click of it I'm showing list overlay, but due to more columns I have to make user to see it in landscape mode only..How would I achieve it ? I have made my whole Project orientation as Portrait . And I want to show this page in Landscape only...
The only thing I could think of is to create a landscape and portrait profile for that view and toggle them based on a listener for orientationchange.
I have a feeling though that will like the way that works even less. You may be better off rethinking that layout all together.
Good luck, Brad