0

Hi I need to put the two big statement in one line as shown in the below, can some one help me out for this

below is the screenshot

enter image description here

when i am putting it in one line then i am getting below overlapping issue ....can someone help me out in order to put the left word in one single line without overlapping on zooming.

Below is the screenshot i am facing for the issue.

enter image description here

Zooming at 125 percent left and right words are getting overlapped with each other.

code:

<template if:false={test}>
                                            <dt class='slds-item_label slds-text-color_weak slds-var-p-bottom_x-small' title='tyrufhdff hgyhgffghg'>
                                                <div class='slds-truncate slds-cell-wrap slds-size_12-of-12'>
                                                    tyrufhdff hgyhgffghg</div>
                                            </dt>
                                            <dd class='slds-item_detail slds-var-p-bottom_x-small slds-var-p-left_xx-large'>
                                                <div class='slds-col slds-m-left_medium slds-truncate slds-size_7-of-7' title='ytughhffhg - hgfyfhgfhb'>
                                                    ytughhffhg - hgfyfhgfhb
                                                </div>
                                            </dd>
                                        </template>
1
  • TRy adding the <dl> tags around your <dt> and <dd> tags and also you can restructure using table <td> and <tr> that will give you more clear boundries Sep 18 '20 at 11:40
3

The Lightning Design System provides a component blueprint dedicated to horizontal description lists.

For you code, you should use :

<dl class="slds-dl_horizontal">
    <dt class='slds-item_label slds-text-color_weak slds-var-p-bottom_x-small' title='tyrufhdff hgyhgffghg'>
            tyrufhdff hgyhgffghg sfsdfsdfdsfsdfsdf
    </dt>
    <dd class='slds-item_detail slds-var-p-bottom_x-small slds-var-p-left_xx-large'>
        ytughhffhg - hgfyfhgfhb
    </dd>
</dl>

With that code, the label size adjusts depending on the text size.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.