locked
How to center a button on a page RRS feed

  • Question

  • I have the following code in my button's _postRender function:

    myapp.Splash.btnSplashOK_postRender = function (element, contentItem) {
        $(element).find("ui-btn-inner").css({
            "padding-left": "0"
        });
        $(element).css({
            "padding-left": "0",
            "margin-left": "50%",
            "margin-right": "50%"
        });
    };

    And the result is this:

    Resultant page

    The padding-left, margin-left, and margin-right are being applied to the div just fine. But the find("ui-btn-inner") doesn't seem to be working at all. And the margin tags don't seem to be taking into account the width of the button in order to get it to the center of the page. What am I missing here?

    Friday, September 25, 2015 5:48 PM

Answers

  • This works for me:

    myapp.Home.OK_postRender = function (element, contentItem) {
        // Write code here.
        $(element).css({
            "margin": "auto",
            "max-width": "90px",
            "float":"none"
        });
    };

    HTH,

    Josh

    • Marked as answer by kyle ls Friday, September 25, 2015 9:03 PM
    Friday, September 25, 2015 8:55 PM

All replies

  • Hey Kyle,

    The jQuery Class Selector is $(".class")

    notice the dot.

    So try:

        $(element).find(".ui-btn-inner").css({
            "padding-left": "0"
        });

    or

        $(".ui-btn-inner",element).css({
            "padding-left": "0"
        });

    HTH,

    Josh

    Friday, September 25, 2015 7:33 PM
  • Tried that. padding-left remained at 11px.
    Friday, September 25, 2015 7:37 PM
  • This works for me:

    myapp.Home.OK_postRender = function (element, contentItem) {
        // Write code here.
        $(element).css({
            "margin": "auto",
            "max-width": "90px",
            "float":"none"
        });
    };

    HTH,

    Josh

    • Marked as answer by kyle ls Friday, September 25, 2015 9:03 PM
    Friday, September 25, 2015 8:55 PM
  • Ah! I had tried margin: auto but was missing the float: none. Works perfectly.

    Is there any particular reason you used the max-width tag to set the width instead of setting it in the screen designer? Any benefit?

    Friday, September 25, 2015 9:02 PM
  • Is there any particular reason you used the max-width tag to set the width instead of setting it in the screen designer? Any benefit?

    No reason, just works for default button having 'fit to container' min-width:90.  Could have set max in designer or changed to fixed width in designer.
    Friday, September 25, 2015 9:09 PM