Scrollbar not working with mouse wheel and not styled properly - html

I have problem with scrollbar with an inner container. The main issue is that scrolling the mouse wheel only scrolls the outer scrollbar while I expect the inner scrollbar to scroll when I'm hover it and also why is the scrollbar styled differently (at least in Chrome, in Firefox it shows ok)?. I am not sure what is happening but I think it's caused by CSS somehow. I use Bootstrap framework (BS3 and BS4 both show the problem) and the row container has the following CSS
{
position: absolute;
width: 100%;
overflow: auto;
border: 1px solid #c0c0c0;
background-color: #f7f7f7;
padding: 0;
z-index: 1000;
vertical-align: middle;
display: block;
}
You can see from the print screen below that the scrollbar is styled differently (there's no top/bottom arrows at least in Chrome), I have no clue why and I didn't apply any styling to the scrollbar.
There's a live demo here Angular-Slickgrid - Row Detail, click on the "+" icon to open any of the row detail container. Also note that I'm the author of Angular-Slickgrid (which is a wrapper library of SlickGrid) and it's a library used by few hundred people.
However note that the same demo works in SlickGrid - Row Detail which basically the same demo but in plain html/css, it uses jQueryUI instead of Bootstrap.
It might actually be Angular that cancels the scroll, I see this mousewheel event handler and if I remove it then it works

Related

Prevent scrolling due to overflow in non-scrollable elements

It's hard to explain the issue, as this seems more like a cross-browser bug than it does a feature. Follow the steps here to see the issue:
Steps to reproduce:
Run code snippet.
Click in textbox.
Repeatedly press right-arrow key until text cursor passes edge of box.
At this point the box will start 'scrolling' (in spite of the overflow: hidden). The grey background element that should fill the box 'slides' left, and to the right of it the white background behind can then be seen.
Desired behavior:
When going out of box, the text cursor simply escapes view, and the box scroll position does not slide to compensate.
How can I disable this 'no scrollbar' scrolling effect? (Note, it is in fact scrolling, because the js scrollLeft value of the overflow-box actually changes, even without a scrollbar.)
A CSS solution would really be ideal (e.g., a working overflow: hidden), but a Javascript solution could still suffice.
.overflow-box {
margin: 20px;
position: relative;
width: 64px;
height: 64px;
overflow: hidden;
border: 1px solid black;
}
.background {
position: absolute;
width: 100%;
height: 100%;
background-color: #a0a0a0;
}
.textbox {
position: relative;
margin: 20px;
width: 200px;
}
<div class="overflow-box">
<div class="background"></div>
<input type="text" value="aa bb cc dd ee ff gg hh ii jj kk ll mm nn oo" class="textbox"/>
</div>
I apologize if this question is a duplicate. I cannot find a similar question since I don't know what the effect is called..
TIA!
Ok, so I discovered two things:
The issue only occurs on elements with overflow: hidden
When 'scrolling', the box emits the scroll event when changing, allowing one to do the following to prevent the scrolling:
document.querySelector('.overflow-box').addEventListener('scroll', evt => {
evt.target.scrollTop = 0;
evt.target.scrollLeft = 0;
});
Since I have a specific container that needs to prevent scroll, I'm using CSS to set overflow: hidden on it to trigger the issue on the container and not a parent element, and then I'm applying the JS above to prevent the scrolling.
This seems to be the best solution in my case.
If anyone knows of a simpler CSS solution, I will accept that answer over this one.
I am not sure if this what did you asking about:
if you need to solve problem of hidden content you only need to resize width at first and last selector
if you need to make text with scroll you can change type into text area and then defining rows and cols attribute, this should manage that.
If all of this does not help please add some picture of the expected result you need to make it clear.

How do I make an ::after element stick to the right of the screen?

I'm doing all of this to modify an already existing website using an extension called Stylus. Also, I'm doing this on Android. I use a browser called Kiwi Browser. It supports extensions.
I'm trying to make an element that sticks to the right of the screen so as to hide the scroll indicator on Android.
I can't hide that with ::-webkit-scrollbar {display: none} or any variation of it because that element seems to be part of Android. My current solution is to add border-right: 5px solid gray !important to the body element or any element where that would work.
I exaggerated the width there a bit so it'd very visible. With that border in place, the scroll indicator becomes invisible or unnoticeable because it has the same color as the border. Now, my problem is that when I zoom in on the page, especially on the very left part of the page, that scroll indicator is noticeable again. That's why now I want to try using ::after. I'm trying to create an element that will stick to the right of screen even if I zoom in. I also don't want it to float. I want it to occupy space so that the content of the page will resize. I tried this code (which I also found here on stack) but it didn't work:
body::after{
content: " ";
position: -webkit-sticky !important;
position: sticky !important;
top: 0;
right: 0;
background: gray;
height: 100%;
width: 10px;
z-index: 9999 !important;
}
I use Kiwi Browser to read manga and comics. And the reason I want to hide that scroll indicator is because when you touch any part of the screen, that indicator appears and I can see how much is left from what I'm reading and that really ruins the mood for me.
Edit:
It seems that half of what I want to accomplish is not possible with just CSS. For reference: Prevent that a fixed element resizes when zooming on touchscreen

Linkedin Follow Button not showing properly in Firefox

I've set the Linkedin Follow button within a hidden element, so only when you hover an icon, the hidden element becomes visible and button is shown.
Problem is that in Firefox v35.0.1 the followers number is shown not on the same row, as if there is no enough space on the same row. Look at the photo:
When I'm expecting the source code it seems the iframe is being set width and height in the moment of becoming visible (on hover) and then (on blur) its width/height is set back to 0. In Chrome the iframe has a constant width/height, which doesn't change on hover.
I tried to set the iframe width with css, which didn't work because when I expected the code it turned out there is another iframe in the Linkedin iframe and the internal iframe has again wrong dimensions.
Any ideas?
UPDATE: when I set the wrapping element to be visible all is good, so this seems to cause the problem, but how can I fix it?
UPDATE 2: You can see the problem yourself: link (make sure open it in Firefox!)
EDIT: Someone edited my post removing Linkedin tag from it, but I truly believe that this is more their issue than Firefox's or CSS, as there is something within their javascript that adds the width/height to the button iframe and adds them wrong. Also in IE the same issue appears. I added the button twice - first time as it was and second time in a visible wrapper and it's obvious that in the visible wrapper all is OK, though in the hidden wrapper is broken.
UPDATE 3: I realized that the button iframe width is the same as its #body element's 'min-width: 57px', so if Linkedin team correct that min-width to let's say 120px this may solve this problem.
problem is here :
in firefox the loaded width are 2px in the element but in webkit(chrome and opera) are 106px.
the style is not making enough width to show elements in one line.
and here is answer :
.social-details {
width: 195px;
/* float: left; */
position: absolute;
left: -120px;
top: -7px;
background-color: white;
padding: 11px 10px 8px 10px;
z-index: -1;
border-radius: 5px;
visibility: hidden;
}
and
#social .social-linkedin:hover .social-details {
visibility: visible;
}
its allow the element load with 106px of width and it is hidden to users.

Div Horizontal Scrollbar

I created a horizontal gallery for a client's website, which functions fairly well, not the best way for a gallery, but it's what they wanted:
http://www.lisagleeson.com/galleries/fashion/
It was done using the following code:
#galleryWrapper {
height: 525px;
width: 100%;
background-color: #ffffff;
padding: 10px 0px 10px 0px;
float: left;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
}
They are reporting it's a little difficult to scroll these images left to right, part of this is because there is no scrollbar within the div. I need assistance on how to add that scrollbar without having to change over to using an iFrame..
In your case you can make "progress bar" which will display current scroll position, something like scrollbar. Listen for scroll event on slider and update progress bar position. If you're not planning 2-ways interaction (drag this progress bar and scroll slider), then JS code will be simple.
I can see only one problem here - progress bar design :) There are a lot of progress bar examples - scrollbar with track, simple scrollbar, paging with radiobuttons, etc...
If you want to make scrollbar draggable, you can use jQuery Scrollbar which hides native scrollbar, but still allows scrolling with mouse/touch (not JS emulation!). Scrollbars are fully CSS customizable.

Make div act as a frame

I've got the following HTML group.
<div id="item-groups">
<!-- Section to select product types -->
<div class="item-group-button">
<!-- Item Group Selection Button -->
<h3>Beverage</h3>
</div>
<div class="item-group-button">
<!-- Item Group Selection Button -->
<h3>Tobacco</h3>
</div>
</div>
I've designed the following CSS for the above elements..
#item-groups{
height: 75px;
}
.item-group-button{
width:130px;
height:40px;
float:left;
margin:17px 0px 0px 20px;
border-radius:10px;
background:#4e5154;
}
.item-group-button h3{
padding:0px;
margin:8px 0px 0px 29px;
color:white;
}
How Can I design the CSS so that the item-groups div can act as a frame. To explain a little bit, The item-group-butons are loaded from a DB and the amount of elements are dependent on the number of DB records. when the elements exceed a certain limit, the excess elements go out of order. How can I stop this? I went through a method where making other elements position absolute then the needed element can act as a frame. but in my case that is not possible.
I tried removing the width limit of the item-groups element but no use!
Update:
As you can see the first images displayes correctly but the second images shows that with more buttons, other elements go out of the order. How can I fix this. I want the buttons to stick to one line rather than going to the second line.
When using html frames, when there is more elements to show, there will be a scroll bar! How can I use that functionality in a Div.
It's a simple CSS trick that can be done bu using the following codes.
for the parent element :
#item-groups{
height: 80px;
width: inherit;
overflow-x: scroll; <-- Make the scrolling horizontal
white-space: nowrap; <-- Handle the white space in the element
}
for the child element :
.item-group-button{
width: 130px;
height: 40px;
margin: 17px 0px 0px 20px;
border-radius: 10px;
background: #4e5154;
display: inline-block; <-- this will display the excess elements in a line
}
removing the float from the child element is necessary.
Thank you guys for your effort!
To get the scroll bar, you would use overflow-x: scroll; on the container, which allows the elements within to expand beyond its bounds, and creates a scroll bar when that happens.
I would like to point out that for a menu this might not be the best option. The scroll bar just won't mesh with the design well. I see two alternatives:
Re size buttons if the container can not fit them. Basically, you would define the max-width: property, and give them a percentage width:, thus all the buttons will look normal until there is overflow. Obviously this could be a problem with labeling. You may need to do overflow-x: hidden; on the label text to make it look right. Or try. . .
Create your own scrolling. If you are comfortable with a little JavaScript, you can use overflow-x: hidden; and position: relative; on the container, then have a "slider" inside of it that holds the buttons, and has position: absolute;. Then, on either end of the container would be hover-buttons, that would trigger JS to adjust the position of the slider, thus scrolling. This will only work if JS is enabled, though you can simply fall back to the overflow-x: scroll; method in such a case. The advantage here is that everything looks nice and uniform.
I generally try to stray away from forcing scroll bars, as each OS/browser can render them very differently. Now you can style scroll bars, as CSS3 provides a number of pseudo-elements to deal with them. Unfortunately browser support is sketchy, and requires special browser specific codes, which means it really isn't a very good option.