SAP UI5 button CSS properties for displaying text in it

[former_member342469]

Hi Everyone,

I'm developing a button with text in it. Text is chosen dynamically using globalization. So size of the text will vary.

For eg now i have

<Button text="scan product" class="mybtn" ></Button>

output :

when text size and length is increased,

output :

in first case i want "scan product" to be displayed exactly in the middle  of the button.

and in second case how can i make my button to increase size automatically based on text length? Is it possible?

this is my css

     .mybtn {

         height:100px;

         width:200px;

        font-color:black;

         word-wrap:break-word;

         white-space: normal;

         line-height: normal;

        font-size:30px;

         background-color:#DCDCDC;

         font-weight:bold;

      }

Thanks in advance

[santhu_gowdaz · Accepted solution]

sap.m.button text is responsive but you are applied css that's the reason for this issue,

use "%" for the height and width then the "px"

     .mybtn {

         height:2%;

         width:5%;

        font-color:black;

         word-wrap:break-word;

         white-space: normal;

         line-height: normal;

        font-size:30px;

         background-color:#DCDCDC;

         font-weight:bold;

      }

[former_member342469 · Accepted solution]

Thank you Santhosh. I Changed few other css properties and its working fine now.

[former_member182862 · Accepted solution]

Hi Sangeeta

Can you kindly share your solution?

Thanks

-D

[former_member342469 · Accepted solution]

Hi Dennis,

I have changed css for for following classes.

  .mybtn {

         background-color:#DCDCDC;

         height:50%;

             width:50%;

             font-color:black!important;

             word-wrap:break-word;

             white-space: normal;

             line-height: normal;

             font-size:30%;

             font-weight:bold;

             border:1px solid black;

             }

    .sapMBtnInner{border:0px;}

     .sapMBtnPaddingRight {

       padding-right: 0rem;

    }

    .sapMBtnPaddingLeft {

       padding-left: 0rem;

    }

      .sapMBtnContent {

        background-color:#DCDCDC;

         height:inherit;

       overflow: hidden;

      text-overflow: ellipsis;

      white-space: normal;

      vertical-align: top;

line-height: normal;}

    

That seemed like a lot of code.

Regards,

Sangeeta