locked
Label font size in html client? RRS feed

  • Question

  • Hi all!

    How can I change label font size in html client? If I select font size "small" and align label to the left, label font size is still smaller then displayed information in specific control..

    Currently I'm adding extra property to the screen (ie. "textprop") and then I'm grouping them in columns layout without label, then I'm changing inner html of "textprop" to label displayed text to have consistency in size.. I'm sure there should be easier way.. I have tried to manipulate in post render method of a property but it doesn't change label size (or I'm doing it wrong)..

    Tnx in advance!

    Kivito


    Nobody expects the Spanish Inquisition! (M.P.F.C.)

    Saturday, August 22, 2015 9:45 AM

Answers

  • Hi Kivito

    I usually do like this, on the control's post render:

     $(element).parent().find("label").css({ "font-size": "30px" });

    Hope it helps!

    • Marked as answer by Kivito Sunday, August 23, 2015 2:00 PM
    Sunday, August 23, 2015 12:39 PM
  • Hi,

    You can apply it app-wide too if you want to make your life simpler?

    In msls-n.n.n.css the msls-label class will be defined something like this:

    /* Labels */
    .msls-label label {
        display: block;
        margin: 0px;
        line-height: inherit;
        opacity: .7;
        font-size: 12px;
    }
    


    So you can simply change the font-size in user-customization.css

    /* Labels */
    .msls-label label {
        font-size: 14px;
    }
    

    There are sections for @media screen sizes to adjust by form factor as appropriate.

    Cheers

    Dave


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    • Marked as answer by Kivito Sunday, August 23, 2015 5:58 PM
    Sunday, August 23, 2015 2:27 PM

All replies

  • Hi Kivito

    I usually do like this, on the control's post render:

     $(element).parent().find("label").css({ "font-size": "30px" });

    Hope it helps!

    • Marked as answer by Kivito Sunday, August 23, 2015 2:00 PM
    Sunday, August 23, 2015 12:39 PM
  • Hi Nuno!

    Yup I was doing it wrong.. :) It works, thank you!

    Kivito


    Nobody expects the Spanish Inquisition! (M.P.F.C.)

    Sunday, August 23, 2015 2:00 PM
  • Hi,

    You can apply it app-wide too if you want to make your life simpler?

    In msls-n.n.n.css the msls-label class will be defined something like this:

    /* Labels */
    .msls-label label {
        display: block;
        margin: 0px;
        line-height: inherit;
        opacity: .7;
        font-size: 12px;
    }
    


    So you can simply change the font-size in user-customization.css

    /* Labels */
    .msls-label label {
        font-size: 14px;
    }
    

    There are sections for @media screen sizes to adjust by form factor as appropriate.

    Cheers

    Dave


    Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

    • Marked as answer by Kivito Sunday, August 23, 2015 5:58 PM
    Sunday, August 23, 2015 2:27 PM
  • Hi Dave!

    This could really make my life simpler! :) And it opens new possibilities (at least for me now).. Thank you!

    Kivito


    Nobody expects the Spanish Inquisition! (M.P.F.C.)

    Sunday, August 23, 2015 5:57 PM