Jump to content
Sign in to follow this  
DancingShrimp

Modal Window Scrollbar

Recommended Posts

Hi folks,

 

I really don't know if this is the right section for posting this question, but perhaps some Moderators could move it otherwise? :) On my website I have a "modal window" which shows a bulleted list of various online stores for digital music. At the moment I have inserted perhaps 100 different stores, and the pop-up box are really long. I need help with creating a fixed size for this window with a scrollbar inside it.

 

CSS part:

.text-box-ul li { list-style-type:disc; margin-left:16px; margin-top:5px; }

HTML part:

<ul class="text-box-ul"><li>Text here</li><li>Text here</li><li>Text here</li><li>Text here</li></ul>

The CSS and HTML-parts are located in different folders on the website structure. I would really appreciate all the help I could get!

 

Thanks!

Share this post


Link to post
Share on other sites

Giving a fixed size is as easy as setting the width and height. To give it a scrollbar, set the overflow property to "auto"

.modal {    width: 600px;    height: 400px;    overflow: auto;}
  • Like 1

Share this post


Link to post
Share on other sites

Thanks for your fast response!

 

So, should I replace my CSS-code with yours, or simply add it to the existing? Or perhaps change the ".text-box-ul" to ".modal" in both parts?

Edited by DancingShrimp

Share this post


Link to post
Share on other sites

You could apply those styles to your list, or wrap the list in another element with those styles applied to it. I just gave the class selector called "modal" so that you know the styles are intended for the modal box. You can put the rules on any element that you want to give a scrollbar to.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...