# Input select: Option list on top

**URL:** <https://community.weweb.io/t/input-select-option-list-on-top/6116>\
**Category:** How do I?\
**Tags:** design, dropdown, select\
**Created:** [December 27, 2023, 6:55pm UTC](https://community.weweb.io/t/input-select-option-list-on-top/6116 "2023-12-27T18:55:31Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![FJP84](https://avatars.discourse-cdn.com/v4/letter/f/db5fbb/32.png) [@FJP84](https://community.weweb.io/u/FJP84)\
**Post date:** [December 27, 2023, 6:55pm UTC](https://community.weweb.io/t/input-select-option-list-on-top/6116/1 "2023-12-27T18:55:31Z")

</div>

Hi there,

I have pagination in place with the option to define the number of records per page. I have placed this below of the table, at the bottom of the page. But when I want to select a different number of records to show, the dropdown goed below the screen and I need to scroll. How can I solve this?

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/8/84854a5dcfc970f6b6acecd72dfb1afdb8d12ee7.png)

In another (React) example I noticed different behaviour of the drop down based on scroll/page position.  
 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/754939f870c4001173411e266a11a99a60a6fede.png)  
And when this input select is at the bottom the dropdown moves to top.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/9748ab5bbefe0833c6d00c7c240333daed265d67.png)

Is this possible with Weweb? Should I use a different component maybe?

For now I will put de record number selector at the top of the table.

---

<div class="post-metadata">

**Author:** ![FJP84](https://avatars.discourse-cdn.com/v4/letter/f/db5fbb/32.png) [@FJP84](https://community.weweb.io/u/FJP84)\
**Post date:** [December 27, 2023, 10:24pm UTC](https://community.weweb.io/t/input-select-option-list-on-top/6116/2 "2023-12-27T22:24:43Z")

</div>

I succeeded by using the hover drop down menu element. The content sub-element can be positioned on top of the select field, using the absolute option.

In the content element I added 3 text elements (10, 25, 50) each triggering a workdlow on click that sets a limit variable, updates the limit of the paginator variable and sets the paginator back to page 1. Works like a charm.

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [December 29, 2023, 1:50am UTC](https://community.weweb.io/t/input-select-option-list-on-top/6116/3 "2023-12-29T01:50:13Z")

</div>

Ooooh nicely done! I don’t think I would have found a nice solution so quickly!

Thanks so much for taking the time to share it with us 😀