The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
Reply to this topicStart new topic
> position: fixed issue
CharlesEF
post Mar 20 2017, 07:31 PM
Post #1


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Hi All,

I've run into a problem and I'm hoping someone can point me in the right direction.

Please see this page for an example (HTML and CSS only). The page consists of 3 sections (CSS), red is the header, yellow is the content and blue is the footer. The menu is contained in the content section and has position: fixed defined in the #menu rules. I have found that when position: fixed is used the white background of the menu extends to cover the scroll bar. If position: relative or absolute is used then the background does not cover the scroll bar.

What am I missing? If I visit 'Stack Overflow' there seems to be a fixed header and it does not cover the scroll bar. Why?


Thanks for any help,

Charles
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 20 2017, 09:03 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Seems the scrollbar is created for #wrapper DIV with CSS. If you instead let the BODY section create its default scrollbar I don't think it will be covered by the menu.

Or you could place the menu above #wrapper so they don't occupy the same vertical space.

Or you might position the menu away from #wrapper's scrollbar space with e.g. "left: 0; right: 20px", except that I don't know if scrollbar widths are the same in different OSs (there's a setting for changing its width in Windows, but I don't know if anyone uses it).



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Mar 21 2017, 12:19 AM
Post #3


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



I'm pretty sure I tried it that way with the first version of the page. I had 4 CSS sections in the body section. It's been a few days since I tried it but if I remember correctly, having the menu in its own container caused the drop down menu options to not show. I thought it was because of the fixed height of the menu container.

I'll do some more tests and post back if I still need help.

Thanks
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Mar 21 2017, 07:41 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Ok, I think I've worked it out. I still had to use the 'wrapper' class but I figured out how to make the scroll bar show. In the 'wrapper' class I had to add a rule: 'height: auto;'. I had to add a couple of media queries for when the menu bar wraps but it seems to work as I wanted. If you want to see it click here.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 21 2017, 11:05 AM
Post #5


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



There's no overlapping now, except from the submenus (where it doesn't matter).

But as a sidenote, what does it look like on mobile browsers? Make sure that the fixed part doesn't cover too much of the screen (or remove the fixed style for small screens altogether with media queries).

Also check that the dropdowns can be opened with touch events. Normally a touch event fires both a hover and a click event, with confusion as a result...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Mar 21 2017, 12:03 PM
Post #6


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Yes, I still need to do more testing. Hopefully, things will work out.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Mar 21 2017, 03:35 PM
Post #7


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



I used my android phone to test the page. The entire page showed except it was a miniature version. I had always thought that reducing my desktop browser window would simulate small screens. When I reduce my browser window the menu will wrap. It doesn't do this on my phone. In portrait mode I can see the entire page, from 1st line of text to last line of text. In landscape mode the scroll bar should appear but it doesn't.

Seems I have a lot of research to do. Any ideas?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 21 2017, 03:57 PM
Post #8


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Try adding this for a start:

CODE
<meta name="viewport" content="width=device-width">
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Mar 21 2017, 04:26 PM
Post #9


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Thanks for that line of code. It fixed the phone problem. I'm going to add that line to my templates file. Oh, even though I can't see a scroll bar the page does scroll correctly.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 21 2017, 05:18 PM
Post #10


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(CharlesEF @ Mar 21 2017, 10:26 PM) *

Oh, even though I can't see a scroll bar the page does scroll correctly.

A missing scrollbar seems to be "normal" for the iOS browser too. There might be workarounds but I haven't tested.

Note that if there's no visible scrollbar it becomes harder for the user to see that content is cropped and needs to be scrolled, especially on a small screen. One workaround might be to remove the "overflow: auto" from mobile screens with media queries, but detecing a mobile screen vs a small desktop window is yet another exercise.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Mar 21 2017, 06:04 PM
Post #11


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Well, I removed the overflow rule but that resulted in not being able to scroll at all. I also tried 'overflow: initial;' but again no scrolling.

Once I touch the screen and begin to scroll I do see a scroll bar but otherwise I don't see any scroll bar.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 21 2017, 08:02 PM
Post #12


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(CharlesEF @ Mar 22 2017, 12:04 AM) *

Well, I removed the overflow rule but that resulted in not being able to scroll at all.

Yeah I guess you'd have to remove the fixed positioning too.

QUOTE
I also tried 'overflow: initial;' but again no scrolling.

No, that's equivalent to "overflow: visible". If you use that together with "height: auto" the content would expand, but remain obscured by the fixed sections.

QUOTE
Once I touch the screen and begin to scroll I do see a scroll bar but otherwise I don't see any scroll bar.

I got a couple of silly ideas about using CSS backgrounds to fake a scrollbar, but frankly I think it's best to just make the page simpler for mobile (no fixing and no scrolling).

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 21 2017, 08:46 PM
Post #13


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



This is how you want it, isn't it?

Attached Image

Remove all instances of position: fixed you already have. Remove the wrapper DIV. Remove the overflow delclaration.

Wrap #header and #nav in a common DIV and make that DIV fixed and give it a 100% width. You also need to increase the top margin for #content. I didn't check properly, but a little less than 150px.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Mar 21 2017, 09:20 PM
Post #14


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



QUOTE(Christian J @ Mar 21 2017, 08:02 PM) *

Yeah I guess you'd have to remove the fixed positioning too.
#content has no position rule.

QUOTE
I got a couple of silly ideas about using CSS backgrounds to fake a scrollbar, but frankly I think it's best to just make the page simpler for mobile (no fixing and no scrolling).
Yes, maybe I'll just hide the header and footer sections. I'll think about it, Thanks for the input.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Mar 21 2017, 09:26 PM
Post #15


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



QUOTE(pandy @ Mar 21 2017, 08:46 PM) *
Remove all instances of position: fixed you already have. Remove the wrapper DIV. Remove the overflow delclaration.

Wrap #header and #nav in a common DIV and make that DIV fixed and give it a 100% width. You also need to increase the top margin for #content. I didn't check properly, but a little less than 150px.
Yes, when I first started out that was the goal but as I coded things changed. I think I'll go ahead and create a page based on your suggestion. That way I can test both versions on mobile phones.

Oh, the current version is here.

This post has been edited by CharlesEF: Mar 21 2017, 09:31 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 21 2017, 09:39 PM
Post #16


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(CharlesEF @ Mar 22 2017, 03:20 AM) *

QUOTE(Christian J @ Mar 21 2017, 08:02 PM) *

Yeah I guess you'd have to remove the fixed positioning too.
#content has no position rule.

No I meant the positioned header and footer --if you can't scroll #content, the former two must not cover its text content (in other words, a traditional layout for mobile).

You could also use a top (and bottom) margin for #content like pandy wrote, though the fixed parts will of course use a lot of space on a small mobile screen.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Mar 21 2017, 11:58 PM
Post #17


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



I'm still thinking but maybe I could just reduce the height of the header to show only the company name and hide the footer. Like I said, I'm still thinking (and working on another version).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Mar 24 2017, 02:52 PM
Post #18


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



After doing some research and looking at the apps on my phone, it seems the scroll bar does disappear. Some apps show the scroll bar only while the app is loading. Once loaded the scroll bar only appears once you start to scroll. Some apps don't show a scroll bar at all, but you can still scroll.

I guess the scroll bar is 'implied' on mobile phones? I did find some CSS for webkit browsers to force showing the scroll bar. However, I didn't find any CSS for other browsers.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 24 2017, 05:47 PM
Post #19


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



To imply scrollability, you might use an opacity gradient on the bottom part of the scrollable box. Of course that reduces the readable area even more, and maybe people won't notice the gradient on small screens anyway, so in addition perhaps you could add a "down arrow" CSS background-image in front of the gradient.

Or you could display a picture of a scrollbar as a CSS background-image, but maybe that will becomes weird in mobile browser that do display a scrollbar.

But the easiest for everybody is probably to design the page so no CSS scrollbars are necessary for smallscreen users...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Mar 24 2017, 06:46 PM
Post #20


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



TBH, my scroll bar seems to act just like other scroll bars so I don't think I'm going to do anything special. Still doing research so I might change my mind.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 03:21 PM