#Ddd0 debatiendo

Hi Monica,

It is written as follows. Can you confirm that it was deployed?

When you deploy the selector component files to your org (make sure that your deployment includes the selector files), you should see the following with your name instead of Mary Jones. You might need to refresh the page.

Hi @Richard Samme

Could you please try the following approach:

<apex:page renderAs="pdf" showHeader="false" standardController="Your_Object__c">
    <style type="text/css">
        table.center-table {
            width: 100%;
            border-collapse: collapse;
            -fs-table-paginate: paginate;  
        }
        table.center-table th, table.center-table td {
            border: 1px solid #ddd;       
            padding: 4px;                
            text-align: center;           
            vertical-align: top;          
        }
        .desc-col {
            text-align: left !important;
            white-space: normal !important;
        }
    </style>
    <apex:outputPanel layout="block"> 
        <apex:dataTable value="{!records}" var="rec" styleClass="center-table">
            <apex:column headerValue="Name">
                <apex:outputText value="{!rec.Name}"/>
            </apex:column>
            <apex:column headerValue="Description" styleClass="desc-col">
                <apex:outputText value="{!rec.Description__c}"/>
            </apex:column>
        </apex:dataTable>
    </apex:outputPanel>
</apex:page>

For more details, please refer to: 

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_output_pdf_considerations.htm

Thanks!

@Harsh Singh

Please replace these code 

  Selector.html 

<template>

    <div class="wrapper">

    <header class="header">Available Bikes for {name}</header>

    <section class="content">

        <div class="columns">

        <main class="main" >

            <c-list onproductselected={handleProductSelected}></c-list>

        </main>

        <aside class="sidebar-second">

            <c-detail product-id={selectedProductId}></c-detail>

        </aside>

        </div>

    </section>

    </div>

</template>

selector.css

body {

  margin: 0;

} 

.wrapper{

  min-height: 100vh;

  background: #ccc;

  display: flex;

  flex-direction: column;

}

.header, .footer{

  height: 50px;

  background: rgb(255, 255, 255);

  color: rgb(46, 46, 46);

  font-size: x-large;

  padding: 10px;

}

.content {

  display: flex;

  flex: 1;

  background: #999;

  color: #000; 

}

.columns{

  display: flex;

  flex:1;

}

.main{

  flex: 1;

  order: 2;

  background: #eee;

}

.sidebar-first{

  width: 20%;

  background: #ccc;

  order: 1;

}

.sidebar-second{ 

  width: 30%;

  order: 3;

  background: #ddd;

}

selector.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>48.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

  Selector.html 

<template>

    <div class="wrapper">

    <header class="header">Available Bikes for {name}</header>

    <section class="content">

        <div class="columns">

        <main class="main" >

            <c-list onproductselected={handleProductSelected}></c-list>

        </main>

        <aside class="sidebar-second">

            <c-detail product-id={selectedProductId}></c-detail>

        </aside>

        </div>

    </section>

    </div>

</template>

selector.css

body {

  margin: 0;

} 

.wrapper{

  min-height: 100vh;

  background: #ccc;

  display: flex;

  flex-direction: column;

}

.header, .footer{

  height: 50px;

  background: rgb(255, 255, 255);

  color: rgb(46, 46, 46);

  font-size: x-large;

  padding: 10px;

}

.content {

  display: flex;

  flex: 1;

  background: #999;

  color: #000; 

}

.columns{

  display: flex;

  flex:1;

}

.main{

  flex: 1;

  order: 2;

  background: #eee;

}

.sidebar-first{

  width: 20%;

  background: #ccc;

  order: 1;

}

.sidebar-second{ 

  width: 30%;

  order: 3;

  background: #ddd;

}

selector.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>48.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>