I have a single page application developed in Vue.js using the bootstrap-vue library. Because my application is an editor which I want to display properly regardless of screen resolution, I allow users to choose a custom zoom level which I set via:
document.getElementById('html').style.zoom = '90%';
The zoom level is stored in a cookie and applied automatically the next time the user access the same page. This works quite nicely, the only problem is a Sidebar which I am using to display some help info does not scale with the zoom level. The sidebar height seems to have a fixed height equal to screen height at normal zoom level. If I use a zoom level of say 90% as the above, the Sidebar appears shorter than the viewport height. Is there a way to enforce the height of the Sidebar?
I was able to fix the problem by setting the zoom level on Sidebar itself. For example, I set the sidebar zoom level to 100/0.9 when application zoom level is 90%.
Related
I use React-Native-Maps and my map marker pins that overlap each other spring apart gracefully when i click them, so can i pick the one wanted?
I've used This library for the web side.
There are libraries that do this but normally it is implemented by adjusting the zoom level. Is that a possible solution or do you need to move the pins apart at the current zoom level?
If you want to move them apart at the current zoom level they could push into other pins and make the issue worse. You might be better off doing a bounding box search around whatever pin gets the click event and opening a popup to make a selection from any results in the box.
I'm confused as to why the navbar does not collapse at its default breaking point of 768px.
In bootstrap's own example the navbar does not collapse at 768px.
I'm having a problem with this on my own website, and went and tested on bootstraps examples.
I tested bootstraps example page here in this screen emulator. I also tested on a real ipad. Both do not collapse at 768px.
IPad - Screenfly
Bootstrap navbar collapse at viewport width 767px, this means your window width is 781px. If your viewport width reaches 768px or any higher value, your navbar will be displayed normally like you see it on any desktop.
Width viewport 767px
Width viewport 768px or higher
You probably was confused by the window width, anyways, if you want to display the viewport and window size like i did in those screenshots, you need web developer addon for firefox, you can also see it in the screenshot, all you need to do is to press on that Resize button and pick Display Window Size but it also has other cool options like View Responsive Layouts or Resize Window.
Hope this helps.
I want to collapse navbar when screen size is <=750px.
You can use Bootstrap's customization tool to build a modified version of Bootstrap. From here, you can alter #grid-float-breakpoint to another breakpoint defined by Bootstrap (ie, xs, sm, md, lg).
You need to modified according to highlighted red in below image.
When you're finished, navigate to the Download section, and click On Compile and Download
& then use it bootstrap js & CSS.
Did you not read the docs?
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
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()
On Webkit re-rendering any of an outer containers (div in my case) child elements or changing on of these childs display attribute from/to display:none/block/inline/inline-block whatsoever, courses the container element to scroll back to top. This way elements located at the lower end of the scrolling area are never be reached by the user since this area keeps scrolling back to top as soon as one of previously mentioned things occure.
On Firefox the scroll position is maintained as required.
Example (expand left-hand list to force scrollbar to appear or choose an album on the left so that the main display area has enough content to bring up scrollbars, scroll to the bottom and hover over the images)
Is there any workaround/fix I could implement to keep the user experience also for webkit browsers?
Thanks