cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Need to share some code when posting a question or reply? Make sure to use the "Insert code sample" menu option. Learn more! X

Button selected style

krishnakomal123
14-Alexandrite

Button selected style

On click of a button I am getting border on all sides of a button.I want to get only border in the bottom.I tried using css but it doesn't work.

 

My css code :

#root_button-7 .button-element:active
{
border-style : solid;
border-width : 2px;
border-bottom-color : #77c5f9;
border-top : none;
border-right : none;
border-left : none;
}

 

Please find the attached file.

1 ACCEPTED SOLUTION

Accepted Solutions

Hi,

 

Try to use !important, usually this works to overwrite the existing css:

 

#root_button-7 .button-element:active
{
border-style : solid !important;
border-width : 2px !important;
border-bottom-color : #77c5f9 !important;
border-top : none !important;
border-right : none !important;
border-left : none !important;
}

 

Hope it helps,

Raluca Edu

View solution in original post

8 REPLIES 8

Hi @krishnakomal123.

 

I assume the screenshot you provided depicts the results you're currently seeing.  Can you provide a mock up of what you expect to see?  Are you trying to show that the button has been clicked?

 

Regards.

 

--Sharon

It is done in photoshop.I need to do it in thingworx using css which I am unable to get.

On button click ,only the bottom border of button should have line as shown in the image.

Hi,

 

Try to use !important, usually this works to overwrite the existing css:

 

#root_button-7 .button-element:active
{
border-style : solid !important;
border-width : 2px !important;
border-bottom-color : #77c5f9 !important;
border-top : none !important;
border-right : none !important;
border-left : none !important;
}

 

Hope it helps,

Raluca Edu

Hi @krishnakomal123.

 

We did some testing on ThingWorx 8.5.4 and there is an option on the Style Properties tab for Pressed and Selected that allows you to choose an underline for text-decoration.  However, the Selected option doesn't appear to work, so we will be opening an internal case for this.

 

The option for Pressed works, but as soon as you release the mouse, the line disappears, as it is designed to do.  The Hover option also appears to work, so that might be a solution depending on your needs.

 

Regards.

 

--Sharon

slangley
23-Emerald II
(To:slangley)

Hi @krishnakomal123.

 

The internal case has been accepted as a bug and is being targeted for fix in ThingWorx 9.0.  This version is targeted for June release.

 

Regards.

 

--Sharon

slangley
23-Emerald II
(To:slangley)

Hi @krishnakomal123.

 

ThingWorx 9.0 was released last week and is available for download here.  The release contains the fix for the issue you reported.

 

Regards.

 

--Sharon

 

 

 

 

I want style to exist after button click also.i.e focus style as attached pic.But it's not impacting.I have tried below code.It doesn't work.

 

#root_button-7 .button-element:active .button-element:focus
{
border-style : solid !important;
border-width : 2px !important;
border-bottom-color : #77c5f9 !important;
border-top : none !important;
border-right : none !important;
border-left : none !important;
}

Top Tags