Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Pre-empting a list container's width

    Hi there,

    I have the following problem.
    I have a set of nested lists populated with content selected from the site page. Each selection may have different depths of nesting within the list tree structure due to database content.

    My problem is I would like to be able to have the list within a containing div forming a bordering box (with background) that auto resizes with whatever depth the user has currently chosen to appear. I am having difficulty as a circular problem arises with word wrapping or width overflow. Of course the height adjusts just fine but the width doesnt.

    Is there any way of calculating the width needed for the list to size it's container (without presentation problems leading to an incorrect width from a poorly sized container?) Or may I have missed a simple css property that would solve this issue completely?

    I chose the css forum, because the latter answer would be of much greater benefit to me.

    Please help,
    Alex

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Are the lists (and/or list items) floated?

    Really, to best answer this we should get a look at your actual page. Do you have a live test page up and viewable?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    positioning, a fix?

    Unfortuneately no test page yet, Im in the middle of writing my own javascript "blind" style transitions for the lists. Since the db is only on my localhost with xammp its a little complicated at the mo.

    Bear with me here...

    If I use "getOffsetWidth" for the master list I run into a little trouble ...

    I think the easiest way (javascript fix) is to have two nested divs, the inner with its width set to something outrageous like 1200 px.
    The outer div can have overflow hidden, and the list can be placed into the inner div, allowing me to read getOffsetWidth without problems from wrapping. I can then use this to set the width of the outer div, which will have the background and border formatting.

    I want to be able to use my blind effect on the outer div aswell, as the nesting increases or decreases.

    I have a couple of local files using these nested lists with my javascript file(s) but before I iron out the bugs I would like to see if there is an easier way before I alter my js.. 9/10 bugs occur with this presentation problem, not the js itself.

    The biggest bug is the container of the list causes inner nested lists to wrap, (but only by 1 or 2 pixels) I can fix this by increasing the padding of the container,.. but then getOffsetHeight in my transitions still believes the entries wrap - I end up transitioning the height to twice its proper amount, leaving lots of whitespace.

    As I said,.. a little buggy. Plus, Im no expert at css or js.

    Are the nested divs the way to go?

    Alex


  •  

    Tags for this Thread

    Posting Permissions

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