I am using Twitter bootstrap on a page witch is split into two parts - left panel and main window. When the panel changes its width, I want the layout of the main window behave as the page viewport has changed.
Is it possible to change bootstrap breakpoints with javascript, so when I change the left panel, the main window starts using col-xs instead of col-md?
Edit:
In the other words: I need to change layout according to some container, not to the browser window width.
Related
Consider a scenario when you have a responsive design, with 3 columns.
On desktop:
left menu
main column (whole page is scrollable)
right menu
On mobile:
top menu
main column (scrollable)
bottom menu
On desktop when scroll event occurs anywhere on the page - I would like to be able to scroll the content inside the content column. On mobile, we scroll the content within the main column itself.
Here is the example: https://jsfiddle.net/sf8m97L2/5/
https://user-images.githubusercontent.com/20644772/165400320-e26e7157-3014-4dda-800d-2e441c98c654.mp4
So here comes my issue/question - is it possible somehow to propagate scroll events from anywhere on the page to the perfect-scrollbar target location (in my case, form body to the content column)?
Currently if the user wants to scroll the content in the main column the user has to hover the mouse over that area specifically. I would like to allow scrolling when the cursor is outside the default zone. Please check the fiddle.
Using latest version 1.5.5
You can use Sticky-sidebar to do what described.
Of course, the scroll bar will not be in blocks, but in the main window, but you can scroll while holding the cursor at any position of the document
See example:
https://blixhavn.github.io/sticky-sidebar-v2/examples/basic.html
My Problem:
My web page screen resolution is wider that the mobile screen resolution. I am trying it locally from assets to be shown on WebView.
The sections are arranged horizontally in a grid display.
Then when I see the same page on phone, the middle sections are
collapsed (not shown).
There horizontal and vertical scroll views is not visible, when it should.
and like it should be: the horizontally arranged sections should
arrange vertically to be able to show each section.
I tried to put the HorizontalScrollView and VerticalScrollView and the WebView inside.
I have fixed the resolution for the WebView as 1000dp * 600dp (layout_width and layout_height respectively in my layout xml).
Now I can scroll to all parts of the screen, but the clicks and drag drops are not working on the page (drag drop is managed from the JavaScript inside).
I tried using onInterceptTouchEvent to intercept some events, but I will say it is not recommended to use.
I want to manage the scrolls and clicks entirely from the Web Page rather than using Horizontal Scroll View and Scroll View and setting the heights and widths on the WebView.
Trying to take help from:
How to make a page responsive
How can I arrange horizontally ...
The link below solves my problem a bit. I can control when I want the above scroll bars to scroll when I need (or by adding a padding dimension inside this scroll-view parent to offer scroll area).
Prevent scroll of parent scroll view when drag event is happening in its child view, or in some other case where you do not want your scroll view parent to scroll.
There is another short way:
scrollView.requestDisallowInterceptTouchEvent(true);
But it offers less control. if you add a padding dimension inside this scroll-view parent to offer scroll area, it serves what I need.
I am writing a single page app for mobile use antd-mobile,
There's s a Tabbar on the bottom of the page, and a list of items that u can see the background is gray, the problem is the Tabbar cover the content of the when I scroll down to the bottom.
How can I make the list area to be scroll area not the whole page?
Some code could help us help you... But there is multiple strategies you could use, all depending on your actual code and what you'd prefer to achieve.
Use margin-bottom on body. This will add a margin to the bottom of your pages, having it set to the height of your Tabbar, this will ensure that it never hides the bottom content. That is assuming your Tabbar is in a fixed position. This solution will make the scroll bar show on the entire page.
Use a defined content holder height, and set overflow-y:scroll. You could set the height of your content holder to be 100vh minus the height of your Tabbar. This way it is "fullscreen" and you can then apply overflow-y:scroll to make that part scrollable. This will display a scroll bar on the element, not the entire page.
I added the fieldset into a panel row, and now I want to keep this panel visible when I scroll in my dashboard like this example
But like in the example, I want to keep the sidebar on the top when the wrapper text disappears.
i'm sure i need javascript instance to perform this
now i just use css code : position:fixed
You have to convert your XML dashboard to HTML and modify the CSS of the panel you want to have absolute positioning.
As shown in below screenshot, can be noticed here on getbootstrap.com by lowering the browser height. As sidebar is fixed there for when height of sidebar increases specially in case of multiple hierarchies it starts hiding items underneath it. And page scroll do nothing to show the hidden items.
How can I overcome this issue?
You need to enable scrollbar to side panel so user can scroll for hidden menus.
you need to fix visible height of window to sidebar container.