Editpopup center on bootstrap page

3 posts, 0 answers
  1. Aykut
    Aykut avatar
    4 posts
    Member since:
    Nov 2014

    Posted 02 Jun 2019 Link to this post

    I'm trying to implement bootstrap 3 on my existing project.  radgrid with popup edit form works fine with PopUpShowing script found in this forum, shows as centered on page without bootstrap. But when I put radgrid to bootstrap grid cell, popup edit form shows on funny places. This happens when I have 2 columns (on bootstrap row) and grid placed to right column. As I see if I place grid to leftmost column it can calculate and set left of popup edit window.

    Looks like edit popup windows stays in bootstrap cell and repositioning always start from left of this cell.

    Strange thing is I also have delete confirmation dialog and this dialog centers on page perfectly.

    Obviously I don't have enough knowledge. Can anyone help me please ?

  2. aykut
    aykut avatar
    67 posts
    Member since:
    Oct 2007

    Posted 02 Jun 2019 Link to this post

    Okay, I found it.

    At the end of PopUpShowing script, adding following line solves the problem. As I said, it was my lack of knowledge.

     popUp.style.position = "fixed";

  3. Attila Antal
    Attila Antal avatar
    520 posts

    Posted 03 Jun 2019 Link to this post

    Hi Aykut,

    The reason for that is Bootstrap overrides some of the internal styles which will result in unexpected appearance.

    In addition to the fix you have found, I would also like to share the following article that addresses the topic of centering the PopUp edit form of the grid: Center PopUp Edit Form in RadGrid. Perhaps, you are already familiar with this article, It is still good have it shared. Multiple solutions for an issue is always helpful for the community and for us when we reference it the next time.

    Kind regards,
    Attila Antal
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top