cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Custom css to sap.m.Button

Former Member

on ‎09-15-2016 12:50 PM

0 Kudos

Hi,

I want to give custom css to sap.m.Button. I had tried below code:

var button = new sap.m.Button({text:"BorderonButton");

$(button.getId()).addClass("rightBorder");

rightBorder is defined in css file like below:

.rightBorder{

border-right:1px solid;

}

But somehow I am not able to add this css to button. Using addStyleClass, I can do it  but in some controls, I usually get an error that addStyleClass is not a function. So I want to use above mentioned approach.

Thanks,

Dashrath

Show replies
Show replies
Answer

Accepted Solutions (0)

Answers (3)

Answers (3)

former_member227918
Active Contributor
‎09-19-2016 11:39 AM
0 Kudos

Hi Dashrath ,

Try one from below:

using JQuery:

$("#"+button.getId()).addClass("rightBorder");

in Javascript:

document.getElementById(button.getId()).className = "rightBorder";


Multiple class :

document.getElementById(button.getId()).className += " rightBorder";




Regards,

Akhilesh

Show replies
Show replies
Former Member
‎09-17-2016 10:24 AM
0 Kudos

Hi Dashrath,

Use below code it will work



var page = this.getView().byId("page");


var button = new sap.m.Button({text:"Test Button"}).addStyleClass("rightBorder");


page.addContent(button);

Output :

Regards,

Kalpan

Show replies
Show replies
Former Member
‎09-17-2016 11:24 AM
0 Kudos

Hi Kalpan,

Yes. We can achieve it using addStyleClass. But i mentioned that i don't want to use addStyleClass. As some control doesn't support this event. For button its fine, but same event can't be used for sap.ui.layout.form.FormContainer. That's why i want to achieve using jQuery.

Thanks,
Dashrath

suresu22
Explorer
‎09-19-2016 9:58 AM
0 Kudos

Hi Dashrath,

We have a option of Nested Selectors. Add a class to page and with this class we can add the style to form

Please see Nested selectors: the inception rule

Ex:

If i want to change h1 background-color in below code

.container .content .articles .post .title he{

background-color : red;

}

following code also will work

.container  .title he{

background-color : red;

}

<body>

  <div class="container">

   <div class="content">

   <div class="articles">

   <div class="post">

   <div class="title">

   <h1><a href="#">Hello World</a>

   </div>

   <div class="content">

   <p></p>

   <ul>

   <li>...</li>

   </ul>

   </div>

First we need to check in inspect element. then we need to app appropriate class properties

Thanks

Suresh

suresu22
Explorer
‎09-16-2016 10:24 AM
0 Kudos

Hi Dashrath,

Try with

document.getElementById('Button').setAttribute('class','IN-widget')

Show replies
Show replies
Former Member
‎09-17-2016 11:14 AM
0 Kudos

Hi Suresh,

I tried it but its not working. When i was consoling it then it was showing 'undefined'.

Thanks,

Dashrath

Ask a Question