Results 1 to 8 of 8

Thread: [RESOLVED] Vertical scroll bars not appearing

  1. #1

    Thread Starter
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Resolved [RESOLVED] Vertical scroll bars not appearing

    I've got this markup - lots of it built during runtime with AJAX calls and jQuery dom modifications.

    I am having a hard time getting a scroll bar to appear on the right for the DIV or the parent-of-the-DIV that is overflowing vertically (the large box at the bottom). At one point I got a bar but it was greyed out - something I remember fighting with a while ago.

    Any insights into scroll bars anyone can share?
    Attached Images Attached Images  

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  2. #2

    Thread Starter
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: Vertical scroll bars not appearing

    Here's the HTML

    HTML Code:
    <div class="acs-edit-full">
        <div class="acs-div-p acs-input-padding" style="overflow:auto">
            <table>
                <tr><td style="width: 300px; font-weight: bold;"><label class="awc-NoteCat29"/></td><td style="width: 400px;"><label class="awc-Message129"/></td><td><label class="awc-Flag129"/></td></tr>
                <tr><td style="font-weight: bold;"><label class="awc-NoteCat30"/></td><td><label class="awc-Message130"/></td><td><label class="awc-Flag130"/><br/></td></tr>
                <tr><td style="text-align: right;"><label class="awc-NoteCat31"/></td><td><div class="awc-Message131"/></td><td><label class="awc-Flag131"/><br/></td></tr>
                <tr><td style="text-align: right;"><label class="awc-NoteCat32"/></td><td><label class="awc-Message132"/></td><td><label class="awc-Flag132"/><br/></td></tr>
                <tr><td style="text-align: right;"><label class="awc-NoteCat33"/></td><td><label class="awc-Message133"/></td><td><label class="awc-Flag133"/><br/></td></tr>
                <tr><td style="text-align: right;"><label class="awc-NoteCat34"/></td><td><label class="awc-Message134"/></td><td><label class="awc-Flag134"/><br/></td></tr>
                <tr><td style="text-align: right;"><label class="awc-NoteCat35"/></td><td><label class="awc-Message135"/></td><td><label class="awc-Flag135"/><br/></td></tr>
                <tr><td style="text-align: right;"><label class="awc-NoteCat36"/></td><td><label class="awc-Message136"/></td><td><label class="awc-Flag136"/><br/></td></tr>
                <tr><td style="text-align: right;"><label class="awc-NoteCat37"/></td><td><label class="awc-Message137"/></td><td><label class="awc-Flag137"/><br/></td></tr>
                <tr><td style="text-align: right;"><label class="awc-NoteCat38"/></td><td><label class="awc-Message138"/></td><td><label class="awc-Flag138"/><br/></td></tr>
                <tr><td style="text-align: right;"><label class="awc-NoteCat39"/></td><td><label class="awc-Message139"/></td><td><label class="awc-Flag139"/><br/></td></tr>
                                
                <tr><td style="font-weight: bold;"><label class="awc-NoteCat45"/></td><td><label class="awc-Message145"/></td><td><label class="awc-Flag145"/><br/></td></tr>
                <tr><td style="text-align: right;"><label class="awc-NoteCat46"/></td><td><label class="awc-Message146"/></td><td><label class="awc-Flag146"/><br/></td></tr>
                <tr><td style="text-align: right;"><label class="awc-NoteCat47"/></td><td><label class="awc-Message147"/></td><td><label class="awc-Flag147"/><br/></td></tr>
                                
                <tr><td style="font-weight: bold;"><label class="awc-NoteCat55"/></td><td><label class="awc-Message155"/></td><td><label class="awc-Flag155"/><br/></td></tr>
                <tr><td style="text-align: right;"><label class="awc-NoteCat56"/></td><td><label class="awc-Message156"/></td><td><label class="awc-Flag156"/><br/></td></tr>
                <tr><td style="text-align: right;"><label class="awc-NoteCat57"/></td><td><div class="awc-Message157"/></td><td><label class="awc-Flag157"/><br/></td></tr>
                <tr><td style="text-align: right;"><label class="awc-NoteCat58"/></td><td><label class="awc-Message158"/></td><td><label class="awc-Flag158"/><br/></td></tr>
                <tr><td style="text-align: right;"><label class="awc-NoteCat59"/></td><td><label class="awc-Message159"/></td><td><label class="awc-Flag159"/><br/></td></tr>
                <tr><td style="text-align: right;"><label class="awc-NoteCat60"/></td><td><label class="awc-Message160"/></td><td><label class="awc-Flag160"/><br/></td></tr>
                <tr><td style="text-align: right;"><label class="awc-NoteCat61"/></td><td><label class="awc-Message161"/></td><td><label class="awc-Flag161"/><br/></td></tr>
                <tr><td style="text-align: right;"><label class="awc-NoteCat62"/></td><td><label class="awc-Message162"/></td><td><label class="awc-Flag162"/><br/></td></tr>
                <tr><td style="text-align: right;"><label class="awc-NoteCat63"/></td><td><label class="awc-Message163"/></td><td><label class="awc-Flag163"/><br/></td></tr>
                <tr><td style="text-align: right;"><label class="awc-NoteCat64"/></td><td><label class="awc-Message164"/></td><td><label class="awc-Flag164"/><br/></td></tr>
            </table>
        </div>
    </div>

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  3. #3

    Thread Starter
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: Vertical scroll bars not appearing

    And this function is involved in re-sizing...

    Code:
    function resizeStuff() {
        resetWindowSize();
    
        var wesPE = [];
        var wesPW = [];
        var intHeight = 0;
        var intWidth = 0;
        var intPT = 0;
        var intPL = 0;
        var intHeadingHeight = 0;
        var blnNeedAuto = false;
        var intFH = 0;
        var intFW = 0;
                
        $(".acs-panel-edit").each(function() {
            wesPE = $(this);
            wesPW = wesPE.closest(".acs-panel-work");
            intHeight = wesPW.outerHeight();
            intWidth = wesPW.width();
            intPT = parseInt(wesPW.css("padding-top"), 10);
            intPL = parseInt(wesPW.css("padding-left"), 10);
            intHeadingHeight = wesPW.children(".acs-panel-heading").outerHeight(true);
            blnNeedAuto = false;
            intFH = wesPE.data("fixedheight") || 0;
            intFW = wesPE.data("fixedwidth") || 0;
            intHeadingHeight = intHeadingHeight + intPT;
            intHeight = intHeight - intHeadingHeight;
            if ((intFH !== 0) && (intHeight < intFH)) {
                intHeight = intFH;
                blnNeedAuto = true;
            }
            if ((intFW !== 0) && (intWidth < intFW)) {
                intWidth = intFW;
                blnNeedAuto = true;
            }
            wesPE.css({ top: intHeadingHeight, left: intPL, height: intHeight, width: intWidth });
            if (blnNeedAuto) {
                wesPW.css("overflow", "auto");
            }
        });
    And some of the markup from firefox

    Code:
    <div id="acs-panel1" class="ui-tabs-panel ui-widget-content ui-corner-bottom acs-panel-work slickgrid_868886 ui-widget acs-ddreflector acs-ddstatic acs-panel-in-edit" tabindex="0" hidefocus="true" style="overflow: hidden; outline: 0px none; position: relative;">
      <div id="acs-panel1-edit" class="acs-panel-edit acs-ddreflector acs-ddstatic" style="top: 35px; left: 15px; height: 838px; width: 1499.53px;">
        <div class="acs-edit-top">
        <div id="acs-panel1-edit-partmonthly" class="acs-edit-bottom" style="padding-left: 10px; padding-top: 10px; display: block;">
          <div class="acs-edit-left">
          <div class="acs-edit-right">
          <div style="clear:both"></div>
          <div class="acs-edit-full">

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  4. #4

    Thread Starter
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: Vertical scroll bars not appearing

    If I bring down the browser window and bring it back up to max window size then scroll bars appear.

    What is up with that?

    Firefox...

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  5. #5

    Thread Starter
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: Vertical scroll bars not appearing

    Actually - this might be a better question.

    How can I detect when the content I am putting into an item has made it too big for the container?

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  6. #6
    Frenzied Member tr333's Avatar
    Join Date
    Nov 2004
    Location
    /dev/st0
    Posts
    1,605

    Re: Vertical scroll bars not appearing

    Any chance of putting up a test case on http://cssdeck.com/ or one of the other code playgrounds? This would make it easier to debug the problem.
    CSS layout comes in to the 21st century with flexbox!
    Just another Perl hacker,

  7. #7

    Thread Starter
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: Vertical scroll bars not appearing

    It's built at runtime with AJAX calls - how can I cut out it out and put it up on cssdesk?

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  8. #8

    Thread Starter
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: Vertical scroll bars not appearing

    I added a DIV around this area - and gave it a special CLASS NAME - acs-scroll-bars
    Code:
    <div class="acs-edit-full">
        <div class="acs-div-p acs-input-padding" style="overflow:auto">
            <div class="acs-scroll-bars">
                <table>
                    <tr><td style="width: 300px; font-weight: bold;"><label class="awc-NoteCat29"/></td><td style="width: 400px;"><label class="awc-Message129"/></td><td><label class="awc-Flag129"/></td></tr>
                    <tr><td style="font-weight: bold;"><label class="awc-NoteCat30"/></td><td><label class="awc-Message130"/></td><td><label class="awc-Flag130"/><br/></td></tr>
    And then I added this to the bottom of my resize function.

    Code:
    function resizeStuff() {
        resetWindowSize();
    .
    .
    .
            wesSB = wesPE.find(".acs-scroll-bars");
            if (wesSB.length != 0) {
                wesSB.css({ height: (((wesPE.height() - wesPE.position().top) - wesSB.position().top) - 10) });
            }
        });
    Now it appears like below. I guess I needed to own the SIZE of the DIV to make this work properly.
    Attached Images Attached Images  

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

Posting Permissions

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



Click Here to Expand Forum to Full Width