I can't figure out how to remove the scroll bar from my website.
I've looked up ways of doing it on SO but with no luck. It just keeps staying in the box.
I also want to be scrollable but just without the actual scroll bar visible from computers.
(It's not visible via mobile devices which is okay)
Regards,
Alex
There is no standard cross-browser CSS code you can use to render scroll bars invisible. However, you can put your <div id="shoutbox_data"> element inside another <div> element with an id field like "shoutbox_wrapper", set the CSS overflow property of the wrapper element to hidden, and then use JavaScript to automatically resize the wrapper element so it covers up the scrollbox. The idea comes from Jan Bilek, and you can find the JavaScript to accomplish this on his blog.
Related
After setting up the storybook-tailwind-dark-mode add-on for Storybook (by following these steps), my component is no longer displaying correctly in dark-mode in the Canvas view. The component displays correctly while in Document view and other components are displaying correctly in canvas view, so not every component has this issue.
The elements are visible for a split second before the page goes blank. When inspecting the page, I can see all of the elements are there, but they are just not visible.
The only difference to the HTML seems to be the dark class added to the body element.
Any ideas as to why the elements are no longer displayed would be greatly appreciated ⚡️
I've inspected the elements to see what could be causing the elements to not be displayed. I was expecting to see a change to display:none or an element that is in front of the other elements, causing them to be hidden, but it seems the only change is the dark class being added to body.
I've also looked at ./storybook/preview.js and ./storybook/main.js for anything suspicious but I haven't found anything that looks out of place.
There was a modal <div> that had a dark:bg-gray-800 class that was being overlayed over all of the other elements.
The modal was correctly set in light mode to show and hide according to when the modal was open/closed, but this conditional was not applied for dark mode, so the modal was always open, and hiding the other elements.
I created a draggable drag and drop table with draggable rows.
For the need of my project, i added multiple drop targets with multiple Droppable elements like in this example:
https://codesandbox.io/s/ql08j35j3q
It work pretty fine, but there is one problem, the scroll speed.
When i'm trying to drop an item in an element at the bottom of the page, it gets very slow.
This GIF will show the problem.
Do you have any clue for a solution ?
This may be a result of react-beautiful-dnd autoscroll, interfering with a css property called scroll-behavior. I just spent a day de-bugging this myself.
If you are using bootstrap, by default, bootstrap sets {scroll-behavior: smooth} to the entire html tag. To apply react-beautiful-dnd's fast auto-scroll, this css property should be {scroll-behavior: unset !important}
If you are not using bootstrap, or another library, check your css stylesheets, and see if {scroll-behavior: smooth} is set anywhere in any parent containers to your Droppables, and unset them.
A good way to debug this is by also opening Inspect Element in your browser, and looking at the styles applied to the html, body, or parent containers to your Droppables.
It appears that when scroll-behavior is defined in css or javascript( if you use window.scrollBy()), it may interfere with react-beautiful-dnd's fast auto-scroll feature, and make it slow.
Let me know if this works for you :) !
Here is my example in a gif - All the containers in the column are droppables
I have a question concerning scroll positions/behavior in AngularJS.
I have a fixed sidebar with div classes with text (three items no menu) and would like to achieve an opacity change on those classes based upon the current scroll position of the window.
For example, if I reach
<div class="example1">
My goal would be to have the opacity changed on the first item in the sidebar which for example would be called
<div class="sidebar1">
I've found plugins via github for this, but would like to achieve this purely with angular. Does anybody know how to approach this best to avoid messy code and a bloated application?
There's a module you can get via npm here: https://www.npmjs.com/package/ng-inview named ngInView. It will let you call an event whenever an item comes into view. This should get you going in the right direction.
Also on github at: https://github.com/iamssurya/angular-inview
I have a series of panels that work with tabs. I'm using aria-controls, aria-selected, role="tablist", role="tab" on the tabs and aria-labelledby, aria-hidden and role="tabpanel" on the panels - all seems good.
However, below a certain screen width I want the same elements to be collapsible, expanded and collapsed by buttons at the top. Obviously I need to hide the tabs list, and include buttons at the top of each panel which are hidden above the breakpoint. I would use aria-controls for the buttons - but there seems to be a few overlaps / clashes between the accessibility markup for the two layouts.
Is there a right way of doing this, or is it simply the case that I should ignore accessibility markup for the "mobile" version, assuming it's irrelevant to screen readers? Are there scenarios where the accessibility markup is necessary for responsive layouts?
The correct solution is to simply show the tabs as buttons (i.e. change the styling) in the small screen layout but leave the markup exactly the same. If you want to have multiple sections expandable simultaneously, then you can use aria-multiselectable (which essentially turns tabs into accordions).
Do not ignore accessibility for mobile. Mobile is as easy to make accessible as the desktop version and is becoming the primary way that users access many web sites and applications.
I have a border Layout with let's say two regions; center and west. The westregion is added with the splitter param and is collapsible. Now I have a toolbar from which I want to hide/show the west region. I've solved this by calling the toggleTargetCmp() method of the splitter. Well I know, this is a private method and should not be used, but I found no other way to archive this. So far so good. All this works.
But now I want to hide the splitter & placeholder (I fetch the placeholder ownet by using the getCollapseTarget() method of the splitter) if the button in the toolbar gets clicked. I tried it with setVisible(false) which works for the splitter but it didn't work well for the placeholder... after a deeper look onto the placeholder instance I can tell that it is set to hidden: true but it uses the hideMode: 'offsets' by default plus hiddenAnchestor: false which is not documented in the API.
Based on the API docu for hideMode I tried to set it to 'display'
before calling setVisible(false) without any luck, the placeholder still stays visible.
So how can I hide the placholder, too. Or is there even a better way to archive this?
Have you tried hide method? It works exactly as you describe - hides region and splitter.
In my project I do it like this:
panel.hide();
where panel is one of borderPanel items.