function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Prince VenkatPrince Venkat 

LWC Request

Hi,
I have total ten fields which are displayed on the page.The page is designed using lwc .

Now the width between two particular fields should be increased and also the ten fields should be displayed. How to achieve

The displayed are displayed by

<th class="slds-size_1-of-10" scope="col">
                          <div class="slds-truncate" style="text-align:center" title="Finish Role">Role</div>
                          <!-- <div class="slds-truncate" style="text-align:center" title="Finish Role">Role</div> -->
                      </th>

<th class="slds-size_1-of-10" scope="col">
                          <div class="slds-truncate" style="text-align:center" title="start Role"> Role</div>
                          <!-- <div class="slds-truncate" style="text-align:center" title="start Role">Role</div> -->
                      </th>


Any Assistance

Thanks in advance


 
Best Answer chosen by Prince Venkat
CharuDuttCharuDutt
Hii Prince Venkat
Try Below Code 
<div class='slds-grid slds-wrap' >
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Candidate Position">View Record</div>
                          
                      <th class="slds-size_1-of-10" scope="col">
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Candiadate Location">Name</div>
                      </th>
                     
                      <th class="slds-size_1-of-10" scope="col">
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Address Type">Address Type</div>
                          
                      </th>
                      
                      <th class="slds-size_1-of-10" scope="col">
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Location">Location</div>
                         
                      </th>
                      
                      <th class="slds-size_1-of-10" scope="col">
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Phone">Phone</div>
                          
                      </th>
                      <th class="slds-size_1-of-10" scope="col">
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Email">Email</div>
                          
                      </th>
                      <th class="slds-size_1-of-10" scope="col">
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Fax">Fax</div>
                      </th>
                      <th class="slds-size_1-of-10" scope="col">
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center; width: 150px; " title="Available">Available</div>
                          
                      </th>
                      
                      <th class="slds-size_1-of-10" scope="col">
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center; width: 150px; " title="Flexible ">Flexible</div>
                          
                      </th>
                      
                     <th class="slds-size_1-of-10" scope="col">
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Exceed Limit">Exceed Limit</div>
                          
                      </th>

</div>
Please Mark It As Best Answer If It Helps
Thank You!
 

All Answers

CharuDuttCharuDutt
Hii Prince Venkat
Try Below Code 
 <div class='slds-grid slds-wrap' >
    <th class="slds-size_1-of-10" scope="col">
                          <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Finish Role">Field 1</div>
                        
                      </th>
        <th class="slds-size_1-of-10" scope="col">
                          <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Finish Role">Field 2</div>
                         
                      </th><th class="slds-size_1-of-10" scope="col">
                          <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Finish Role">Field 3</div>
                        
                      </th><th class="slds-size_1-of-10" scope="col">
                          <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Finish Role">Field 4</div>
                        
                      </th><th class="slds-size_1-of-10" scope="col">
                          <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Finish Role">Field 5</div>
                         
                      </th><th class="slds-size_1-of-10" scope="col">
                          <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Finish Role">Field 6</div>
                        
                      </th><th class="slds-size_1-of-10" scope="col">
                          <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Finish Role">Field 7</div>
                       
                      </th><th class="slds-size_1-of-10" scope="col">
                          <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Finish Role">Field 8</div>
                       
                      </th><th class="slds-size_1-of-10" scope="col">
                          <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Finish Role">Field 9</div>
                        
                      </th><th class="slds-size_1-of-10" scope="col">
                          <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Finish Role">Field 10</div>
                         
                      </th>
</div>
Please Mark It As Best Answer If It Helps
Thank You!

 
Prince VenkatPrince Venkat
Hi CharuDatt Thanks for you Quick reply

All ten fields should be displayed besides that Available And flexible ( Fields i mentioned should have more visibility
than what is available now, for that we can reduce visibility of other fields).The widths of the two fields must increase

How can we achieve this
                     

<th class="slds-size_1-of-10" scope="col" >
                          <div class="slds-truncate" style="text-align:center" title="Candidate Position">View Record</div>
                          
                      <th class="slds-size_1-of-10" scope="col">
                          <div class="slds-truncate" style="text-align:center" title="Candiadate Location">Name</div>
                      </th>
                     
                      <th class="slds-size_1-of-10" scope="col">
                          <div class="slds-truncate" style="text-align:center" title="Address Type">Address Type</div>
                          
                      </th>
                      
                      <th class="slds-size_1-of-10" scope="col">
                          <div class="slds-truncate" style="text-align:center" title="Location">Location</div>
                         
                      </th>
                      
                      <th class="slds-size_1-of-10" scope="col">
                          <div class="slds-truncate" style="text-align:center" title="Phone">Phone</div>
                          
                      </th>
                      <th class="slds-size_1-of-10" scope="col">
                          <div class="slds-truncate" style="text-align:center" title="Email">Email</div>
                          
                      </th>
                      <th class="slds-size_1-of-10" scope="col">
                          <div class="slds-truncate" style="text-align:center" title="Fax">Fax</div>
                      </th>
                      <th class="slds-size_1-of-10" scope="col">
                          <div class="slds-truncate" style="text-align:center" title="Available">Available</div>
                          
                      </th>
                      
                      <th class="slds-size_1-of-10" scope="col">
                          <div class="slds-truncate" style="text-align:center" title="Flexible ">Flexible</div>
                          
                      </th>
                      
                     <th class="slds-size_1-of-10" scope="col">
                          <div class="slds-truncate" style="text-align:center" title="Exceed Limit">Exceed Limit</div>
                          
                      </th>

All ten fields should be displayed besides that Available And flexible ( Fields i mentioned should have more visibility
than what is available now, for that we can reduce visibility of other fields)

How can we achieve this
                     
CharuDuttCharuDutt
Hii Prince Venkat
Try Below Code 
<div class='slds-grid slds-wrap' >
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Candidate Position">View Record</div>
                          
                      <th class="slds-size_1-of-10" scope="col">
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Candiadate Location">Name</div>
                      </th>
                     
                      <th class="slds-size_1-of-10" scope="col">
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Address Type">Address Type</div>
                          
                      </th>
                      
                      <th class="slds-size_1-of-10" scope="col">
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Location">Location</div>
                         
                      </th>
                      
                      <th class="slds-size_1-of-10" scope="col">
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Phone">Phone</div>
                          
                      </th>
                      <th class="slds-size_1-of-10" scope="col">
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Email">Email</div>
                          
                      </th>
                      <th class="slds-size_1-of-10" scope="col">
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Fax">Fax</div>
                      </th>
                      <th class="slds-size_1-of-10" scope="col">
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center; width: 150px; " title="Available">Available</div>
                          
                      </th>
                      
                      <th class="slds-size_1-of-10" scope="col">
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center; width: 150px; " title="Flexible ">Flexible</div>
                          
                      </th>
                      
                     <th class="slds-size_1-of-10" scope="col">
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Exceed Limit">Exceed Limit</div>
                          
                      </th>

</div>
Please Mark It As Best Answer If It Helps
Thank You!
 
This was selected as the best answer
Prince VenkatPrince Venkat
Hi CharuDatt
Thanks it worked and then

How to decrease the Actual  width of  Candidate Position,Candidate Location , Address Type,  They mainly want to see more of Available, Flexible 

Thanks in advance