CSS is not reflecting for the text boxes when included in external style sheet

CSS is not reflecting for the text boxes when included in external style sheet

  

Cannot edit the default CSS for a specific element.

Mamini Konidena wrote:

Cannot edit the default CSS for a specific element.


Please give us a example

Hello Mamini,

Try checking out the documentation for changing the look of a widget with the help of Styles Editor and using CSS in OutSystems.

 Hopefully they will be useful in your specific case otherwise please provide a bit more detail about your issue.

Cheers

Hi,

The CSS you are using is probably being overridden by an already existent CSS. 

The CSS priority is as follows, with the last one having priority (for the same rule):

  1. System style sheet for Container widgets in the Grid
  2. Web Blocks style sheet
  3. Theme style sheet, which also includes a base theme (if specified)
  4. Web Screens or Emails style sheet
  5. Theme extra style sheet, with the Grid settings defined in the Theme properties

If you are placing your CSS in a place with low priority (Web Block CSS), there is a chance that there is the same CSS rule in a file (Theme) that is overriding it.

You can read more about using CSS in Outsystems in: https://success.outsystems.com/Documentation/10/Developing_an_Application/Design_UI/Look_and_Feel/Cascading_Style_Sheets_(CSS)

Regards,

João

Solution

Hi Mamini,

Even i have faced this kind of issue, seems there is a bug in OS. CSS is reflecting for labels of a page when we declare at application level. But if you need same effects to text boxes of the pages, use form name and input type along with CSS class. Like below....

For text boxs:

.[form name] input[type="text"].ClassName {

background-color: blue;

}


For labels:

.Classname { 

background-color: blue;

}

 

Solution

Mahender rc wrote:

Hi Mamini,

Even i have faced this kind of issue, seems there is a bug in OS. CSS is reflecting for labels of a page when we declare at application level. But if you need same effects to text boxes of the pages, use form name and input type along with CSS class. Like below....

For text boxs:

.[form name] input[type="text"].ClassName {

background-color: blue;

}


For labels:

.Classname { 

background-color: blue;

}

 

Thanks a lot... this works and sorry for the late reply :)


Mamini,


If someone answer your question, mark it as correct. That will help other to find answers to similar questions.


TIA