Why do parts boxes move off screen?

Options
I am using BBNC to create templates and pages for a client within their CMS. For some reason the margins for the popup boxes of parts move erratically when I click the "parts" box in my templates. It seems that the positioning of the popup box is tied to the margins of the page itself. I was only able to get the parts boxes to appear by using Firebug and altering the "top" and "left" css properties to get them to appear where they are supposed to.



I am at the end of my rope with this and there don't seem to be any easily accessible answers. Help!
Tagged:

Comments

  • Hey Jose!



    If you're able to do this in FireBug, let's just actually add whatever you do in there to the stylesheet so it stays. We can edit the stylesheet under Site Explorer, Stylesheets.



    I've also got case 11361970 open for this. If you need more please give us a call with that case number, or let me know here if you want me to have someone call you.
  • The styles that I alter in FireBug to get the popup boxes to behave are inline styles and cannot be affected by what I put in the stylesheet. If you have a css selector that will affect only the popup part boxes that would be very helpful.
  • When I look at this window in FireBug, I see the class DesignPane DesignPanePageHover referenced. Do you have this class? What happens if you add some appropriate stylings to that class?
  • Thank you for following up.



    Unfortunately the selectors you gave only reference the parts pane that houses the parts button. The DesignPane is where the parts button exists on the template. This I do not have a problem with. I can locate the parts button fine, and they position as I specified them in the layout.



    It is the parts Popup panel that is the problem, this is where one inserts, edits or cuts parts. This Popup element only has inline styles, no classes or id's. The problem persists.
  • Hi Jose, there are two ways to address this, or at least this is how we do it for our customers when we build the sites:



    1. JAVASCRIPT - add this to the bottom of your layout. I suggest you copy your layout and test this in the copy. (Note: This is not "supported" by our Support team):



    <script type="text/javascript">


    var bbpage = Sys.WebForms.PageRequestManager.getInstance();


    function fixPositioning()


    {


    $('div[id$=_panelPopup]').appendTo('body');


    $('div[id$=_panelPopup_DropShadow]').appendTo('body');


    };


    bbpage.add_pageLoaded(function(){


    fixPositioning();


    });


    </script>



    2. CSS - add to end of your style sheet, completing your selector between the ] and { as needed, based on what you are targeting:



    form[action*="pagedesign"] {


    /* your CSS here */


    }



    For example:



    form[action*="pagedesign"] .DesignPane {


    /* your CSS here */


    }



    I'd start with the CSS option first.



    Jono Young


    Interactive Design Principal - Professional Services
  • Thank you for the reply. I am sure both your above methods work. However, I tried the CSS solution you gave and experience no result. Ultimately, through a bit of research, I found that I could override inline styles by including "!important" in the style rules for the popup panes. This finally did the trick. I realize that this method does not work for IE6, but less than 1% seem to be using that browser so I am willing to live with that.



    For anyone out there that has this problem, this is what the CSS looks like to fix the problem. Listed are the style rules for the first five popup panes:



    #pane1_ctl01_panelPopup {left:0px !important;top:20px !important;}


    #pane2_ctl01_panelPopup {left:0px !important;top:20px !important;}


    #pane3_ctl01_panelPopup {left:0px !important;top:20px !important;}


    #pane4_ctl01_panelPopup {left:0px !important;top:20px !important;}


    #pane5_ctl01_panelPopup {left:0px !important;top:20px !important;}

Categories