SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2003
    Location
    Italy
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Line spacing inside a combo box

    Hi to everybody,

    I trying to solve a little problem ...
    I want to modify the line spacing (I need a bigger one) between the options of a select tag (combo box).
    That is, I need more space between the different lines inside a combo box.

    The reason is that the users of the my application have touchscreen displays and it's hard for them to select an option clicking with (a big) finger.

    Thank You very (very) much in Advance and Ciao
    Fausto

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Try this bit of CSS:
    Code:
    option {
      line-height: 200%;
    }

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2003
    Location
    Italy
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks..
    but I'm using a separate CSS file (I'm not very expert), can I put the code you sent me in a different part of the html file?
    For example inside the header, or somewhere in the body....

    Thank you again
    Fausto

  4. #4
    SitePoint Zealot
    Join Date
    Jun 2003
    Location
    Italy
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I Tryed to put in the header:

    <style type="text/css">
    option
    {
    line-height: 200%;
    }
    </style>


    but it doesn't work....
    Was it correct?

  5. #5
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Holland
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Integrate it

    Without seeing the rest of your CSS and HTML sources it's impossible to tell, but your addition may be overruled by an already present style declaration in the external CSS file. Your best bet would be to integrate the style provided by vgarcia into the CSS file, checking that it doesn't conflict or gets overruled with any of the present styles.
    Regards,
    Ronald.

  6. #6
    SitePoint Addict phptek's Avatar
    Join Date
    Jun 2002
    Location
    Wellington, NZ
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Fausto70
    <style type="text/css">
    option
    {
    line-height: 200%;
    }
    </style>
    Again without seeing your CSS - it's near on impossible to say but try one of these:

    Code:
    <style type="text/css">
    select option
    {
    line-height: 200%;
    }
    </style>
    or add: class="sizeable-opt" to the <select> menu in question like this:

    <select class="sizeable-opt">

    and then define a special rule for it:

    Code:
    <style type="text/css">
    select.sizeable-opt option
    {
    line-height: 200%;
    }
    </style>
    or even:

    Code:
    <style type="text/css">
    select.sizeable-opt option
    {
    font-size: 95%;
    }
    </style>
    These should make the text appear about the normal size, but wil increase/decrease when the text-size on the browser is changed.

    HTH
    Russ

  7. #7
    SitePoint Zealot
    Join Date
    Jun 2003
    Location
    Italy
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi to everybody,
    thanks to all but It can't work yet...

    first of all the my pages don't use any external (or embedded in the pages) CSS file, unless there are some default CSS setted in the browser (IE) or in the web server (Apache).
    Anyway I tried this simple test html script:
    _______________________
    <html>
    <head>
    <style type="text/css">

    select.sizeable-opt option
    {
    line-height: 200%;
    font-size: 14pt ;
    }

    </style>
    </head>

    <body>
    <select size="1" name="Test" class="sizeable-opt" >
    <option> 1111 </option>
    <option> 2222 </option>
    <option> 3333 </option>
    <option> 4444 </option>
    </select>
    </body>
    </html>
    ______________________________

    The problem is that for each different value of line-height or font-size, nothing occur, therefore it doesn't work.

    Any solution?

    Thank You very much again
    Fausto

  8. #8
    SitePoint Addict phptek's Avatar
    Join Date
    Jun 2002
    Location
    Wellington, NZ
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this - it just worked for me:

    HTML Code:
    <style type="text/css">
    select.sizeable-opt
    {
     font-size:	95%;
    }
    </style>
    Cheers.
    Russ


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •