SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need a refresher on overflow

    I need a refresher on basic CSS. I have this "not staying within the box" problem in quite a few places in my application - not always on select boxes but other places, too: overflowIssue.gif

    How do I fix this with CSS? I know we can limit the amount of text we allow them to enter and/or we can chop off the amount we display - but is there a way to use CSS to keep content like this within the form and/or window? I've tried giving the select box a specific width, giving the options a specific width, using overflow:auto, using position:relative on the select box - even played around a bit with word-wrap options but none of those things have helped. I can post code if necessary but I'm really looking for the general answer first. Since this is happening in several places, there's obviously some fundamental something that I'm missing.

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The only true way to stop this from happening is to set a max-width which will prevent the issue overall, of course you will need to add it to every element that has this issue but it is bulletproof.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. That was probably the magic bullet I was looking for. There are still issues, though. On the example above, I put a max-width on both the select box and the options. It definitely did fix the overflow issue but the text of the longer options gets cut off. Does that issue have to be addressed with Javascript or is there something I can do with that via CSS? Like, is there any way to get the text in an option to wrap? Anyway to add some right padding so that longer text doesn't butt right up to the edge of the select box?

    longOptionsIssue.png


    Just occurred to me maybe I can put the option text in spans and play with it that way. I'll try that.

  4. #4
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm back to square #1 because I just figured out that an option element can't have any child elements - thus no spans inside my option tags. So I need help with the questions above:

    1. Is there any way to get the text in an option to wrap as opposed to getting cut off?
    2. Is there any way to add some right padding to an option so that longer text doesn't butt right up to the edge of the select box?

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tryin_to_learn View Post
    an option element can't have any child elements
    You can, however, group them in optgroup tags: http://reference.sitepoint.com/html/optgroup

    May not help you here, but worth knowing.

  6. #6
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    optgroup is a good idea and one I hadn't thought of. I've been experimenting with adding styles to the optgroup and have discovered something I don't get. Actually, this is happening with or without styles and even with or without the optgroup. Check the two screenshots below. In the top one, notice how the Catatonic listing runs off the right edge of the box. That's what I'm trying to prevent. However, if you notice the one the cursor is highlighting - the "Ulcer" one - you can see that the width of each of the options does NOT extend to the edge. To illustrate this even better, the bottom screenshot shows what happens when you hover over Catatonic: it clips off the characters to the width of the option. What's happening here? If the width of the option is only "x", why is the text extending beyond that unless you hover over it? And how do I fix it?

    optgroupPadding.png


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
  •