scrollable html panel with scroll buttons using css and flexbox - html

I'm having layout difficulties when creating a scrollable panel using css and flexbox. I saw this one (http://jsfiddle.net/5A9c9/)
that works well as long as no elements are added into the divs. When I modify that and add one line (line 11 in http://jsfiddle.net/5A9c9/7/), the layout is completely messed up. It could be almost any other tag and it still gets messed up.
`<!-- adding this line messes it up -->
<p>abcd</p>`
How do I get this to lay itself out properly?
p.s. or any other full working examples of such a panel using only css and flexbox?
Edit:
One of the issues I hit with the scrollable area using flexbox was that the elements were getting crushed and force-fitted into the area, and therefore it had no chance to scroll.

To start with, use "display:flex" in your CSS if you want to use the flexbox magic.
Set display to flex in both the outer and inner divs like so:
#scrollBox {
display:flex; /* <--- here */
overflow-x: auto;
overflow-y: hidden;
-ms-overflow-x: auto;
-ms-overflow-y: hidden;
white-space: nowrap;
}
#scrollBox > div {
display: flex; /* <--- and here */
margin-right: 10px;
}
Secondly, in your html, put your "abcd" paragraph inside the fieldset. I can't imagine you would want it outside of the fieldset... Like this:
<div class="firstPanel">
<fieldset class="firstPanel">
<legend>Panel 1</legend>
<p>abcd</p>
</fieldset>
</div>
I hope this helps some :-)

I came across this page http://fantasai.inkedblade.net/style/discuss/flexbox-min-size/ which gave me a hint on why the components were getting crushed or started overlapping within my supposed scrollable area. To solve it, I put a min-width size to the elements/components within my scroll area. This allows the scroll to happen.

Related

Div Card Elements Won't Scroll

I am new to HTML and CSS and am creating a website for a basic university course. For a project, I have created 8 div cards highlighting the planets of the Solar System but cannot get the cards out of this fixed/unscrollable position.
This is the link to the current page state:
https://hollandtheperson.com/dight/250/website/planets.html
Any tips on how to fix this?
You have added overflow: hidden; for the CSS in the body tag, which hides the scrollbar essentially making the scroll feature unusable, if you remove it then it should work.
You can set the overflow-x instead of overflow to hidden, like so:
...
overflow-x: hidden;
...
This disables horizontal scroll but allows vertical scroll
The problem isn't really with it being fixed in place, but i can see why you got that impression.
You're using overflow: hidden; which means "if something doesn't fit, snip it off".
So, because the overflow has cut away everything wasn't already within the viewport - there is now nothing outside the viewport, and hence, no reason to allow scrolling.
Fixed the .card height and add overflow-x: hidden which give you scrolling card. Sample code given below:
.card{
// add additional code
height: 350px;
overflow-x: hidden;
}
Hi can see that you have added items in css of body tags which i guess you should remove in order make it scrollable feature those are
height: 100vh;
overflow: hidden;
Please check if that works hopefully it should be.

position fixed and webkit overflow touch issue ios 7

I'm having a responsive website which has the menubar as a sidebar (like FB app) which is fixed via position: fixed; to the right corner. This works fine so far except for iOS7 in combination with -webkit-overflow-scrolling: touch;. The fixed element does not stay at its position, moreover it jumps to the fixed position after the scroll is finished.
Does anyone of you have an advice?
Thanks
I've been struggling with exactly same issue for the whole day, the conclusion is, yes, there is a bug when you position an element as 'fixed' within a container with '-webkit-overflow-scrolling: touch' in Apple screen devices. And I couldn't find any work around. '-webkit-transform: translate3d(0,0,0)' nor '-webkit-backface-visibility: hidden' make any difference.
So finally i got it working by reassembling my html structure, so the fixed element is not within the scrollable container, is in an upper layer. Maybe not ideal if the 'body' is your scrollable container, but hoping it shed some light for a possible solution.
Extending it with a simplified example:
<body>
<sidebar></sidebar>
<div id="content-wrap">
<article></article>
<footer></footer>
</div>
</body>
And CSS would look like:
sidebar{
position: fixed;
}
#content-wrap{
-webkit-overflow-scrolling: touch;
}
Basically the bottom line is, don't position as fixed an element which exist within a scrolling touch container. You have to take it out if you don't want to deal with that iOS weird problem.
I was able to solve this problem by dynamically changing the -webkit-overflow-scrolling style to auto whenever a button was triggered to show the position: fixed div (which is inside the scrolling container).
I simply add the dont-scroll class.
.container{
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.container.dont-scroll{
-webkit-overflow-scrolling: auto; /* The fix */
}
Once the position: fixed div is hidden (in my case, when a user clicks the 'cancel' button on the popup modal), I dynamically remove the dont-scroll class to enable the smooth scrolling once again.

Remove horizontal scroll bar Godaddy html

I am currently building a website for Bearskin Group ....
The site is pretty much done, I am creating it with the GoDaddy online builder....
BUT - I have this stupid horizontal bar scroll coming up that id like to diasble...
I have tried using:
style="overflow-x: hidden"
&
div {
overflow-x:hidden;
overflow-y:hidden;
}
Can anyone help me remove this?
Thanks
Dan
This is because you are using huge width.
#wsb-element-233156931 .wsb-image-inner div {
height: 60px;
overflow: hidden;
position: relative;
width: 2904px; /*remove it*/
}
or
change overflow:auto to overflow:hidden in class wsb-canvas-page-container
Also I noticed you are using image (check below), can't you remove the image or use a background-color to fill the color.
<div class="customStyle"><img style="width:2904px;height:60px;" alt="" src="//nebula.wsimg.com/b7fd20f21ba2c36e5ef9f39ea2613e8e?AccessKeyId=D238BA178C5B0342ADD7&disposition=0&alloworigin=1"></div>
I ran into the same problem. It turned out to be an element that was sticking out with an invisible box. You can define page restrictions but if a shape, text box or element is protruding into the edges it automatically overrides your restrictions and creates more room. Eliminating these should shrink your page back down to normal and eliminate the horizontal scroll.

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.

CSS3 columns: how to get proper horz padding with overflow-x?

So, I'm playing with CSS3 columns and trying to lay out content in a bunch of horizontal columns where, if the content is long enough, it creates a horizontally scrolling page. However, I don't want the content to butt right up against the left/right edges of the viewport but I do want the scrollbar to touch the left/right edges. I thought I could do this with padding, and initially it looked like it was working perfectly, until I scrolled all the way to the end of the content.
The code is pretty simple. HTML:
<section id="content">
<p>Lorem ipsum...</p>
<p>And a bunch more paragraphs to overflow the viewport...</p>
</section>
And the CSS:
#content {
height: 400px;
padding: 10px 50px;
column-count: 2;
column-gap: 50px;
-webkit-column-count: 2;
-webkit-column-gap: 50px;
overflow-x: scroll;
overflow-y: hidden;
}
#content p {
/* just to make it easier to see the boundaries */
background-color: rgba(255,0,0,0.1);
}
​
I also set up a fiddle here: http://jsfiddle.net/uu9Tv/.
I've tried a bunch of things, but nothing seems to give the desired effect... margins on #content cause the scrollbars to not reach the sides of the viewport.
I also tried it a different way and basically let a wrapper div handle the overflow/scrolling and putting horizontal margins on the #content element, but it didn't seem to help at all. See here: http://jsfiddle.net/vQLCz/.
Anyone able to shed any light on how to get some space on the far right of the columned content in a horizontally scrolling layout?
Your approach makes sense, but padding section#content doesn't apply to the overflowed content. Having columns makes this harder to see, so first look at my example section#no-columns in http://jsfiddle.net/ansonhoyt/wGKFa/. The section contains a paragraph with nowrap. Notice how the padding constrains the background color, but not the overflowing text.
When you add columns into the mix, the padding still doesn't apply to the overflowed paragraphs. A good alternative would be to put a margin on the <p>. This solution is limited. Since margin provides both the right "padding" and the "gap", they both have to be 50px.
Ah, the limits of CSS. CSS3 columns are nice, but limited....we can hope CSS4 will add some more elegant additions like p:last-column { margin-right: 50px; }.