HTML & CSS Sticky And Select List

[Regy]

I'm trying to put together a simple web page but.....

My sticky isn't hiding my select list and I can't work out why.

And while I'm here I should also ask.....

1 - What is the correct name for this select list (it appears to be only "select")?

2 - Why is there a gap at the top of the page between the browser window and the sticky?

3 - When I scroll down my page the sticky actually moves, and hides the gap that I just mentioned, so is this normal?

Thanks for any help 🙂

<!DOCTYPE html>
<html>
  <head>
    <title>???</title>
    <style>
      div.sticky {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        background-color: aquamarine;
        padding: 10px;
        font-size: 50px;
      }
    </style>
  </head>
  <body>
    <div class="sticky">
        <form>
            <textarea class="txt" cols="100" rows="25">
            </textarea>
        </form>
    </div>

    <h1>Here is some text.</h1>

    <select name="nothing" size="50">
    <option value="ran1">A sentence.</option>
    <option value="ran1">A sentence.</option>
    <option value="ran1">A sentence.</option>
    <option value="ran1">A sentence.</option>
    <option value="ran1">A sentence.</option>
    </select>

  </body>
</html>

 

[OldMan]

The top gap can be gotten rid of by using a "reset". This sets all browsers to the same specifications.. The simplest is:
body, html{margin: 0;padding: 0;} I place this as the first CSS rule.

 

[Deleted member 2829]

Ha, I was just going to reply you need margin:0 on your body, but OldMan beat me to it 🙂

As for your very first question, why do you expect the sticky div to hide your select list ?

Q1: Not sure what you mean. You have given it the name "nothing", which is (at least technically) as good a name as any.
Q2: Already solved now.
Q3: I don't know why it does that, but it should no longer be an issue now that the margins is gone.

 

[Regy]

body, html{margin: 0;padding: 0;}

That works nicely OldMan, thanks, and it also solves question 3 (the moving sticky.)

So that leaves 2 questions I guess that I need to answer...

1 - My isn't my sticky hiding my select list?

2 - What is the correct name for this select list (it appears to be only "select")?

why do you expect the sticky div to hide your select list ?

Well it hides the h1 text so I just thought it should hide the select list as well (I'm pretty much a HTML/CSS/Javascript newbie.)

Not sure what you mean.

I was just wondering what the official name was, that's all. In my world it's a listbox, but in the HTML world it appears to be just called a "select" and that seems odd to me.

Thanks for replying 🙂

 

[Deleted member 2829]

Well it hides the h1 text so I just thought it should hide the select list as well (I'm pretty much a HTML/CSS/Javascript newbie.)

It does not hide the <h1> text anymore than it does the select list. At least not for me:



No reason why it should. If it does so for you, I think something is the matter that needs to be resolved.

I was just wondering what the official name was, that's all. In my world it's a listbox, but in the HTML world it appears to be just called a "select" and that seems odd to me.

Well, what's in a name 😊 Actually the HTML select is a drop down list, that you can expand and then select one and only one item. The listbox is more generic, as you can select multiple items.

 

[OldMan]

Your SELECT is coded entirely wrong. Firsts problem is: size="50". The size attribute is meant to show the options or a small amount of the options. It is used very sparingly. I have never seen a need for it. I know you used it to git height to your page and get a scroll bar. We can do that by adding height:500px; to the body rule.

You use the name attribute, which is ok, but only helps if the select is in a form and the selection is used in the submitted information. But, as is the case in the majority of selections, it is used in the browser. So, an ID would be more to the point.

Understand this is a fast setup and having the same option and option value saves time, but it is the cause of the problem.

Look at this:

 <body style="height: 5000px;">
    <div class="sticky">
        <form>
            <textarea class="txt" cols="100" rows="25">
            </textarea>
        </form>
    </div>

    <h1>Here is some text.</h1>

    <select name="nothing" id="part" >
        <option></option>
        <option value="ran1">Sentence one</option>
        <option value="ran2">Sentence two</option>
        <option value="ran3">Sentence three</option>
        <option value="ran4">Sentence four</option>
        <option value="ran5">Sentence five</option>
    </select>
 
  </body>
</html>

 

[Regy]

Thanks for the information guys, I'll get back to you soon.

 

[Regy]

There's some good information above and as I was working through it I read the following...

We can do that by adding height:500px

it is used in the browser

These comments got me thinking and then it finally occurred to me that a web page (as opposed to a standalone app that doesn't have vertical scrollbars) can simply be used as one big list.

Therefore, I no longer need a select list as I can just add links and get the same result that I was after.

So, my problem's solved albeit via a different route.

Thanks again for the help 🙂