Add style attribute based on checkbox selection | Community
Skip to main content
Vinod-N-E
Level 2
May 24, 2023 11:19 AM UTC
Solved

Add style attribute based on checkbox selection

Hi Community,

 

I need to add a style attribute to an element in a HTL file, if a checkbox is checked and I tried the below example.

<div class="test" style="${model.checkBox ? 'display:none' : ''}"> </div>

 

I also tried ,

data-sly-attribute.style=""

I guess which is not allowed.

 

Is there any suggestions, please do help here. Thanks. 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
arunpatidar
arunpatidarAccepted solution
New Participant
May 24, 2023 2:27 PM UTC

You can go with CSS approach

 

HTL

 

<div class="test${logic.checkBox ? ' hide' : ''}"> Test </div>

 

 

CSS

 

.hide{ display:none; }

 

 

Arun Patidar
View reply

5 replies

DPrakashRaj
DPrakashRaj
New Participant
May 25, 2023 1:34 AM UTC

You can add css class based on condition and with respective cad you can hide and show

div class="exampleclass ${true ? 'testclass' : ''}">
Translate
    arunpatidar
    arunpatidarAccepted solution
    New Participant
    May 24, 2023 2:27 PM UTC

    You can go with CSS approach

     

    HTL

     

    <div class="test${logic.checkBox ? ' hide' : ''}"> Test </div>

     

     

    CSS

     

    .hide{ display:none; }

     

     

    Translate
    Arun Patidar
      Vinod-N-EAuthor
      Level 2
      May 25, 2023 4:57 AM UTC

      Thank You everyone, all answers worked out but it was good to avoid inline css. So Thank you Arun again for helping out.

      Translate
        Shiv_Prakash_Patel
        Shiv_Prakash_Patel
        New Participant
        May 24, 2023 12:51 PM UTC

        Hi @vinod-n-e ,

        Please change the code as below

         

        <div class="test" style="${model.checkBox =='true' ? 'display:none' : ''}">

         

        Regards,

        Shiv

         

         

         

         

        Translate
        Shiv Prakash
          jalaja
          Employee
          May 24, 2023 12:29 PM UTC

          Hi @vinod-n-e 

           

          You may try writing your sightly as 
          <div class="test ${properties.isreadonly @context='unsafe'}">Test</div>

          Please take care of double quotes and define uncheckedValue accordingly (if using dialog value).

          This result in below html output:

           

          Thanks!

          Translate
            Terms & ConditionsAccessibility statement

            Loading footer...