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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Fixed div inside another div

    Hello Everyone

    Is there any way I can make a div position fixed inside another div.For eg
    postion:fixed makes an element postion fixed in the WINDOW irrespective of the scrolling.Is there any way I can do this within a div?

    -Thank You

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    well a nested div is always going to be fixed in it's parent div so to speak. if your making the parent scroll like giving it a fixed height and have overflow set to auto, then the div you want to fix you can put it out side the scrolling div and use positioning to make it appear like it's inside the parent. Of course this is all speculation as you provided no code to work with.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello Sir,

    Sorry for not providing the code....here it is...I am coding in JSF

    <tr:form id="pendingResults">
    <tr:table id="pendingResultsTable" value="#{userAdminBean.pendingResults}" var="pendingResults" varStatus="pendingResultsStatus"
    rows="10" emptyText="There are no users awaiting approval." binding="#{userAdminBean.pendingTable}" width="580px" styleClass="userResults">
    <tr:column sortProperty="myLastname" sortable="true">
    <f:facet name="header">
    <trutputText value="Last Name" />
    </f:facet>
    <tr:commandLink text="#{pendingResults.myLastname}" action="#{userAdminBean.displayPending}" >
    <faram name="rowIndex" value="#{pendingResultsStatus.index}"/>
    </tr:commandLink>
    </tr:column>
    <tr:column sortProperty="myFirstname" sortable="true">
    <f:facet name="header">
    <trutputText value="First Name" />
    </f:facet>
    <trutputText value="#{pendingResults.myFirstname}"/>
    </tr:column>

    Here,"First Name", "Last Name" are the headers...I dont want them to scroll with the results.So, Is there anyway I can include them in a <div> and make its position fixed inside the parent <div>?

    -Thank You

  • #4
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    before starting in here, trutput seems like an interesting tag, put your code in [ CODE] tags and you'll not have that problem in the future. what parent div are you referring to? are you trying to nest the whole table or just those 2 fields? if you're trying to nest the whole table, just wrap it in a div, if you're trying to do those 2 fields you first must figure out where your parent div will go before we can try to nest something in it
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    taurus2006, read http://www.codingforums.com/showthread.php?t=82672
    And post the generated html source taken from browser's view source method
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    I've posted an example to show you how you can do it.

  • #7
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Nice bit of code, but it fails in (guess who?) IE6... too bad...

  • #8
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Well it would have to. position:fixed doesn't work in IE6. You'd have to use images as a background for that. But cheers for pointing it out.

    Edit: Updated to reflect this
    Last edited by Apostropartheid; 04-12-2008 at 06:26 PM.

  • #9
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    CyanLight,

    you can do that if you make the form output like:

    form
    header
    header
    div
    output stuff
    div
    form

    the 2 headers can then be absolutely positioned over the div so that they are not affected by the div's scrolling. no need for fixed positioning.

    p.s. circumnavigation that's your $10 word for the day. got that out of the way early
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

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