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

Button selected style

SOLVED
Highlighted
Aquamarine

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
Highlighted

Re: Button selected style

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
Highlighted

Re: Button selected style

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

Highlighted

Re: Button selected style

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

Highlighted

Re: Button selected style

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

Highlighted

Re: Button selected style

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

Highlighted

Re: Button selected style

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

Highlighted

Re: Button selected style

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

Highlighted

Re: Button selected style

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

 

 

Highlighted

Re: Button selected style

 

 

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;
}

Announcements

Thingworx Navigate content has a new home! Click here to access the new Thingworx Navigate forum!