2

I can't seem to change the font size of the lightning:outputfield. The unordered list text below is the font size I am looking for.

    <aura:attribute name="Impact1Title" type="Aura.Component[]">
    <div class="red">
        <lightning:outputField variant="label-hidden" fieldName="Project_Title__c" class="red" />
    </div>
    <ul>
        <li class="red">I'm red.</li>
    </ul>        
</aura:attribute>


.THIS .red {
background-color: red;
font-size:5rem;}

                    <aura:if isTrue="{!not(empty('Impact_1__c'))}">
                    <lightning:card title="{!v.Impact1Title}" iconName="action:approval" class="cards" />
                </aura:if>
Improve this question
5
  • How are you accessing the attribute's value? And where is your CSS declared in the .CSS file of the component? E.g., if I use this snippet and print {!v.Impact1Title}, it works as expected.
    – Jayant Das
    Commented Apr 22, 2019 at 16:29
  • - The css is delcared in the Style section of the component. The attribute is accessed in a lightning:card component. The strange thing is that the card displays the I'm Red correctly. It is displaying the content or the rich text object field with the font of the field. I can't seem to control it. If the field text is bolded, it displays bolded.
    – Michele Kleinhomer
    Commented Apr 22, 2019 at 16:37
  • Your red class is designed to work one level deep, same way it's used in <li>. Have you tried wrapping your output field in another div and then apply the class there and see if it works? Something as <div><div class="red"> ... </div></div>
    – Jayant Das
    Commented Apr 22, 2019 at 16:45
  • I added a div around the code and it did not make a difference. It is displaying whatever font is showing in the rich text field. If I change the text in the field, it changes it in the component. I can't seem to control it via the component. That would probably be o.k. if I could control the font and size in the rich content field. I don't seem to have that option in internal Salesforce. I do see it when using the rich content component. Is there a way to control the font & size with the rich content field controls?
    – Michele Kleinhomer
    Commented Apr 22, 2019 at 17:14
  • I think I need to use code to strip the HTML from the field. I think there is HTML present that is trumping anything I do around it.
    – Michele Kleinhomer
    Commented Apr 22, 2019 at 17:18

0

Reset to default

You must log in to answer this question.

Browse other questions tagged .