locked
Move button command bar LightSwitch Html RRS feed

  • Question

  • Hi,

    when I add the button in the command bar (LightSqwitch Html), automatically the button is in position on right in the command bar, but I can't move the same button on left position?

    For example, I would get one button on extreme right and another button on extreme left command bar.
    This, it's possible?

    Thanks, best regards.

    Ale

    Friday, July 26, 2013 12:34 PM

Answers

  • Hello

    Yes, this is very much possible. In this example I have two buttons:- btnLeft and btnRight. When they are rendered intitally they are in the standard position of the right.

    Now what you need to do is select the button you wish to move within the designer and then select the Edit PostRenderCode link in the properties window. Then enter the following code within the PostRender Event.

    myapp.StartScreen.btnRight_postRender = function (element, contentItem) {
        // Write code here.
        var MenuButtonRight = $(element);
        MenuButtonRight.css({
            "position": "fixed",
            "left": "0"
        });
    };

    Now, when you run the app you will see btnLeft on the right and btnRight on the left :)

    Isn't CSS Wonderful :)


    If you found this post helpful, please mark it as helpful. If by some chance I answered the question, please mark the question as answered. That way you will help more people like me :)

    • Proposed as answer by Otis Ranger Friday, July 26, 2013 1:05 PM
    • Marked as answer by Arenaut Friday, July 26, 2013 2:52 PM
    Friday, July 26, 2013 1:05 PM

All replies

  • Hello

    Yes, this is very much possible. In this example I have two buttons:- btnLeft and btnRight. When they are rendered intitally they are in the standard position of the right.

    Now what you need to do is select the button you wish to move within the designer and then select the Edit PostRenderCode link in the properties window. Then enter the following code within the PostRender Event.

    myapp.StartScreen.btnRight_postRender = function (element, contentItem) {
        // Write code here.
        var MenuButtonRight = $(element);
        MenuButtonRight.css({
            "position": "fixed",
            "left": "0"
        });
    };

    Now, when you run the app you will see btnLeft on the right and btnRight on the left :)

    Isn't CSS Wonderful :)


    If you found this post helpful, please mark it as helpful. If by some chance I answered the question, please mark the question as answered. That way you will help more people like me :)

    • Proposed as answer by Otis Ranger Friday, July 26, 2013 1:05 PM
    • Marked as answer by Arenaut Friday, July 26, 2013 2:52 PM
    Friday, July 26, 2013 1:05 PM
  • Hi Otis,

    the answer is perfect!

    thanks, best regards

    Ale

    Friday, July 26, 2013 1:33 PM
  • No problem. Happy to help. Please mark my previous post as the answer so others can be helped from this

    If you found this post helpful, please mark it as helpful. If by some chance I answered the question, please mark the question as answered. That way you will help more people like me :)

    • Marked as answer by Arenaut Friday, July 26, 2013 2:51 PM
    • Unmarked as answer by Arenaut Friday, July 26, 2013 2:52 PM
    Friday, July 26, 2013 2:00 PM
  • when i try to implement your above code, am I missing something? im using the HTML Client side, on the screen im attempting I've tried left, center/middle and right and the button just disappears. i take the code out it works, any idea? cheers
    Monday, August 18, 2014 3:06 PM
  • Hello

    Can you post an example of the code that isnt working and what you are trying to do?


    If you found this post helpful, please mark it as helpful. If by some chance I answered the question, please mark the question as answered. That way you will help more people like me :)

    Thursday, August 21, 2014 8:24 AM
  • Adding to what Crezzer7 said, the issue is that if there's not already a button present on the right side, adding a button and affixing it to the left with the css doesn't generate the button or the command bar (as if there are no buttons whatsoever). However, as soon as you add a default button that appears on the right side of the command bar, your custom left-positioned button also appears. This seems like a bug.

    Here's the css from above that I'm using:

    myapp.Administration.BackButton9_postRender = function (element, contentItem) {
        // Write code here.
        var MenuButtonRight = $(element);
        MenuButtonRight.css({
            "position": "fixed",
            "left": "0"
        });
    };

    Monday, October 27, 2014 6:36 PM
  • I was on about moving all buttons the the left, I found out how to do this eventually: 

    This should to be done in both the msls.2.5.3 and msls-2.5.3.min, or which ever one you are referencing in your default.htm file

    for the msls.2.5.3, locate this code: and change the float from right to left

    .msls-header .msls-buttons-row,
    .msls-footer .msls-buttons-row {
        float: left;
    }


    for the msls-2.5.3.min: (change from right to left again)

    .msls-header .msls-buttons-row,.msls-footer .msls-buttons-row{float:left}

    I had this working in older versions of MSLS files aswell so hope this helps anyone who needs it

    • Proposed as answer by Crezzer777 Wednesday, April 27, 2016 9:08 AM
    • Edited by Crezzer777 Wednesday, April 27, 2016 9:13 AM
    Wednesday, April 27, 2016 8:59 AM