Pop up aligning to the top

edited August 2014 in Enyo 2.4
I just upgraded to enyo 2.4, I see one issues with the pop up is that even if I have mentioned centered: true, it is aligning the pop up vertically to the top. It is centering it horizontally just fine. Is this a known issue on 2.4? As works fine on the previous versions. Here is the code

kind: "onyx.Popup", name: "deviceSelectedPopup", classes: "deviceSelectedPopup", modal: true, floating: true, centered: true, scrimWhenModal: false, scrim: true, dataTable: '', nodeModel: null, handlers: { onHide: "onPopupHidden", nodesLoaded: "nodesLoaded", onErrorPopup: "hideLoader", onTableDrawCompleted: "hideLoader", onGraphReady: "hideLoader", onDataLoaded: "hideLoader", onRequestingData: "showLoader" },

Comments

  • There isn't anything I'm aware of for 2.4. Can you provide some more context, i.e. your CSS rules for deviceSelectedPopup? If you look at this sample and click on "Basic Popup", which has centered:true, the popup is centered both vertically and horizontally: http://enyojs.com/sampler/latest/lib/onyx/samples/PopupSample.html
  • Thank you for your help. The CSS rules has nothing but the size of the pop up. Here it is

    .deviceSelectedPopup{
    color:#000;
    width:90%;
    height:88%;
    background: $white;
    padding: 10px 0 0 10px;
    border-radius: 0;
    border:none;
    }
    Let me know if you need any more info.
  • If I check the basic onyx pop up in here http://enyojs.com/sampler/latest/ I don't see the pop up in the center.
  • Ah that's a good point - it looks like the change in 2.4.0 was that the instance owner's bounds are used to center the popup in the viewport, instead of using the actual viewport. I'll dig a little more into why this change was made, but we may need to make this more robust and/or add another option to specify which container to center the popup within. Here's the commit: https://github.com/enyojs/enyo/commit/bc4a0e3213acfd6b6841ba80539b71dc25030986
  • Ive had this issue before. It was because the floatingLayer height is 0. I .... [just clicked the link in @aarontam‌ 's post] lol, i see i made a comment on it way back in april.
    appsbychris commented on bc4a0e3 on Apr 18

    This change causes a floating popup to not center correctly. Instead of centering on the viewport, it "centers" it using the size of the controls owner, but places it according to the full viewport, so you get way out of position popups.
    I have removed this and reverted to what it was before this commit with all my projects since.
  • After some discussion, this change was made to address the case where the popup resides in a panel that does not fill the entire width of the screen (i.e. the Sampler app, which has a navigation bar on the left), and so the popup is no longer absolutely centered, but centered relative to its owner. @kumarild‌ and @chrisvanhooser‌, with this context in mind, are there straight-forward ways to modify your code to work with this updated popup behavior (I realize @chrisvanhooser‌ you've already reverted the code)? Let me know and we can figure out whether we need to add another API to differentiate between these two cases.
  • @aarontam I havn't ever had the need to a centered popup to be centered to a div. I always have had my center aligned popups center to the full screen.
    I don't know if there is a difference in how it behaves with floating vs not floating.
    Since setting floating = true puts it into the floating layer, I would assume it would use the full viewport for calculations.
  • @aarontam Same for me. The pop up that I use in the app, I want it to center the whole screen rather than a Div. Can you tell me what needs to be done ?
  • edited August 2014
    Hi @chrisvanhooser‌, it does indeed behave differently for both floating values, with centered:true as it uses the bounds of its instance owner still. We'll work on a fix for this (seems like we can center to the full viewport when floating, otherwise center based on its instance owner), but in the meantime @kumarild‌ you can revert the change from this commit: https://github.com/enyojs/enyo/commit/bc4a0e3213acfd6b6841ba80539b71dc25030986. Sorry for the inconvenience!

    Edit: Opened a ticket for this: https://enyojs.atlassian.net/browse/ENYO-4067
Sign In or Register to comment.