I have a problem in overriding the default css of a property line control and az text output control

, ,
1

Hi Experts,

I am not able to override the default css of a property line and az text output control. Below are the ways i tried to overide.

Property Line :

→ i have entered the css in CSS style attribute , but it not worked

by default the text-align for this property is right and i want to change it to left and i use the text-align:left in the CSS style and not worked.

az Text output control

→ i have use the css in the CSS style and it did not get reflected as expected.

font-weight:bold;
text-align:left;
color:#366f8c;

Please help me to resolve the above issue.

Thanks in Advance.

2

“text-align” is a style that would need to be applied to the block-level element surrounding the text.

I would suggest placing a Block Panel control inside the Property Line and apply the “text-align” css style to the block panel control. Then place the text control inside the Block Panel and it should get styled as you specify.

3

Hi Eric,

Thank You for your quick reply,

I have a property line and given some text in property label to display on the screen and when it displaying on browser it is right aligned, i need left aligned , could you help me by providing the right css property display text on browser with left aligned.

Thanks in Advance.

4

If you are trying to change the alignment of the label of the property line, then you probably can’t do that with properties on the control since the label text is an child html element whose styling is being controlled by CSS.

You could probably affect the styling by providing an external CSS stylesheet in the page that has CSS styles that have higher specificity than the default styling rules to override those.

For example, set the “CSS class” property on the property line controls to “my-property-line”.

And then in an external CSS file, create CSS styles to apply styles for the elements that have that CSS class with something like this:

.my-property-line label {
    text-align: right
}
5

Thank you Eric,

I have tried like below and it worked.

i have created the new css and drag and drop in my portlet and wrote the css class as below.

.portlet-form-field-label{

text-align:left

}

and i have not used this class in the property line css class attribute and worked.

Thanks for your inputs.

6

Right, that would change the styling for everywhere the portlet-form-field-label CSS class is used on your page. The suggestion I provided was a more surgical change that only applied the change to specific property line elements which is safer as you wouldn’t be changing the look and feel of other elements that aren’t designed to use a left aligned text.