You need to sign in to do that
Don't have an account?
Brian Richardson
Thanks,
BR
Lightning text size
Hello,
Having trouble finding the right SLDS style or layout to prevent the reduction of text/font size when a simple Lightning Component is displayed in mobile vs. standard layout. Using Chrome developer tools to view the results, as follows:
Responsive (mobile):
Toggling the device toolbar:
So, in responsive mode the text and controls are hard to use on a phone, as the table scales way down. I guess what I'm asking is, how do I turn off "responsiveness"? I'd like the component to display large text and controls as in the 2nd PNG.
My component table:
<table class="slds-table slds-table_bordered slds-table_cell-buffer"> <thead> <tr class="slds-text-title_caps"> <th scope="col"> <div class="slds-truncate" title="Table">Table Header</div> </th> </tr> </thead> <tbody> <tr> <td data-label="Skill"> <div class="slds-truncate"> <c:customLookup aura:id="lookupSkill" objectAPIName="Expertise__c" selectedRecord="{!v.selectedSKill}" label="Skill"/> </div> </td> </tr> <tr> <td data-label="Skill"> <div class="slds-truncate"> <lightning:input name="liCapability" label="Capability" type="text" value="{!v.selectedCapability}"/> </div> </td> </tr> <tr> <td data-label="Contact"> <div class="slds-truncate"> <lightning:input type="date" label="Start Date" name="startDate" aura:id="startDate" value="{!v.startDate}"/> </div> </td> </tr> <tr> <td data-label="Contact"> <div class="slds-truncate"> <ui:button label="Submit" press="{!c.submitForm}"/> </div> </td> </tr> </tbody> </table>Hoping this is a dumb question with a simple answer :)
Thanks,
BR
If it is really necessary, you can create your custom CSS and use media queries to override the way Salesforce controls the responsiveness of their fonts. Take a look at this article: https://css-tricks.com/snippets/css/fluid-typography/
If you do not want to get so far, another way to do it is to set the font-size using an absolute value such as pixels. All you have to do is to create your custom CSS and set a selector to use an absolute value.
See the examples below:
Keep in mind that using absolute values can affect the user experience.
Hope to have helped!
Regards.
Don't forget to mark your thread as 'SOLVED' with the answer that best helps you.