I'm having a unique situation. I need to make a scrollable area that has a custom scrollbar which is slightly padded from the container. At first, I was thinking of adding an additional container that would have the necessary padding to create the illusion that the scrollbar itself has padding, but some elements will have different background color from the additional container and that would make obvious there's another container instead of the scrollbar having padding.
As you can see, the background color of each individual container spills out of the main container past the scrollbar. Is there any way I can add padding to the scrollbar or at least a hack that would give that impression?
Initially, I have found and started using react-custom-scrollbars npm package, but it seemed it had a lot of open issues and I had problems implementing it, so I switched to simplebar package which is very lightweight and works similarly to a facebook custom scrollbar. Solved my issue.
Related
I'm facing an issue with as scrollbar package(React-Perfect-Scrollbar). Actually this is not issue but default behaviour of scrollbar functionality, while loading list of image. I've given default min-height to image(50px). So, initially scrollbar will cover the scroll area as per the current height of the div, but as soon as the image will load scrollbar adjust its size as per the new height because different image have different height. Because of the entire behaviour i'm seeing the fluctuation in the size of the scrollbar. Is there any way using that way i can overcome this scrollbar?
i have tried some CSS and react-perfect-scrollbar npm package features but not getting the required solution.
What is the correct CSS to remove the horizontal scroll bar appearing on the web page with changes in resolution ?
Has the width to be fixed to does it have to be in %?
Also, is the position to be kept absolute or relative ?
Please help - also are there any pointers for best CSSdesign across the browsers and when site is opened on phone ?
There could be many scenarios leading to this issue,
Most common one is that you have defined a parent element (most probably a div) with width of 100% and then you have added padding and margin to it.
have a look at this link :
http://www.w3schools.com/css/css_boxmodel.asp
Other way is to create a responsive design (go with mobile first responsive design).
Read this for more info: http://designshack.net/articles/css/mobilefirst/
Finally I would recommend you use a css frame work. there are many out there and each has it's pros and cons. I personally prefer Bootstrap : http://getbootstrap.com/
you could do a overflow-x:hidden; on the elements you want to hide the scrollbar from
Thanks for the responses, solved this my removing the fixed width of div in CSS which was causing problem
Here is the website I've been working on: Comotional - test site
I am using flipping cards within "Who we are" section and have problems with z-index. Whichever z-index and css combination I tried (even added additional divs on the back side), I can't fix the flipped content appearing below other cards. If you hover over these, you will see what happens and will see where the problems happens. Is there anyway to get this working via js?
It's limited by your container height, not the z-index. Set the height auto and find another way to set up the grid - perhaps making something like a row container along with a clear div while setting height to the front side of the card.
i think the problem is that you have lots of nested elements so changing the z-index of a nested element does not make them appear above on the stack unless until you make the z-index of the parent container greater than other parent containers that are blocking the view.
you can use hover event to change/increase the z-index of parent container on mouse-in and default on mouse-out
link to justify what I am saying
I'm working on the front end build of a set of HTML templates with a tricky element in the design.
As you'll see from the screengrab the main navigation is a vertical list which will contain nested lists of links where child pages and sections exist thus requiring the height of the menu to be flexible.
The design has a set of full width stripes in the background - header, centre and from beneath the main nav downwards. This is proving tricky to integrate as the dark blue background which goes the full width of the browser needs to be flexible and change alongside changes in the height of the main nav.
I have tried implementing the following solution from CSS tricks but it's causing various problems in various versions of IE.
I'm considering creating a blank absolutely positioned container that has it's height set by determining the height of the main nav via JavaScript but I'm worried about jumps in the layout on page load and again cross browser compatibility.
Any other suggestions on how to approach this?
It can be done with pure css bu not clearing floats. Basicly the idea is to have a div that wraps your nav and content, and float the content. The wrapper sould not have overflow:hidden. The float is cleared in footer.
Fiddle.
Tested FF4, Opera 11.50 and Chrome 12. Don't have IE on hand but it should work fine.
I tried googling, but didn't come up with much. I'm building a horizontal carousel which displays images in a LI, floated. The issue I want to solve is, everytime I add thumbnails to the carousel (I'm lazy loading), I need to recalculate the width of the carousel (so that all the floated thumbnails line up nicely side by side).
For one, I rather not have to do these kinds of calculations in JS, and for two, I found that it's hard to find a cross browser way to ensure that the width will be properly calculated (I end up having to add or remove pixels from the total width depending on the browser).
So my question is, is there any way without JS, to be able to add content to a div, and have the width adjust as needed, the same way a div's height would?
And if not, have you found a more efficient way to handle this scenario than recalculating the width every time?
I'm not new to web dev, and for as long as I've been in this field, to my knowledge this has never been possible. But with the advent of new technologies cropping up, I thought maybe there was an obscure way of achieving this now.
Thanks in advance!
[EDIT] (for clarification, but simplified): If my carousel is 500px wide with overflow hidden. There's a slideable section containing thumbnails, each is 100px wide, floated, they fit 5 across in the carousel. When a user clicks Next, it lazy loads the next set of 5 thumbnails, and appends it to the slider area after the first set of 5. But since this div was 500px wide to accommodate 5 thumbnails, adding another 5, I need to recalculate the width to get the new thumbnails to show up side by side. Ideally I'd like to find a way to have the div autoresize its width to fit horizontal content, the same way it naturally does for vertical content.
I've found that using a containing carousel div with white-space: nowrap and overflow: hidden has worked. I then have display: inline-block for each item in the div.
Using this class for each individual item:
.eachItem {
display: inline-block;
}
Will work (I've done something similar to that).
The problem is that in IE7 it won't work! and you'll have to use JavaScript anyway :(
EDIT: I meant inline-block... and as you may know, IE7 doesn't "like" it.