0

When I set LightningStylesheets ="true" in Visualforce, the width of widened. How can I adjust the width? Also, it will be helpful if you can tell me how to change the color of the background.

<apex:page standardController="Order__c" extensions="SimulationController" action="{!initAction}" showHeader="true" sidebar="false" lightningStylesheets="true">
    <style type="text/css">
        .column_width{width: 80px}
        .mini_width{width: 29px}
        .short_width{width: 50px}
        .midi_width{width: 60px}
        .long_width{width: 180px; display: inline-block;}
        .info{ margin: 10px 25px }
        .parent_row{background-color: #BAD3FF}
        .child_row{background-color: #D9E5FF}
        .numeric_cell{text-align: right;}
        .totalRow{text-align: right;}
        .customPopup {
            background-color: white;
            border-style: solid;
            border-width: 2px;
            left: 20%;
            padding: 10px;
            position: absolute;
            z-index: 9999;
            width: 400px;
            top: 20%;
        }
        .closeButton {float: right;}
    </style>
    <apex:pageMessages escape="false" />
<apex:form id="form">
    <apex:pageBlock title="" mode="edit">
        <apex:pageBlockSection >
                <apex:pageBlockTable value="{!vhlpList.values}" var="vhlp" id="productTable" >
                    <!-- Checkbox -->
                    <apex:column styleClass="{!IF(vhlp.isParent,'parent_row', '')}">
                        <apex:inputCheckbox value="{!vhlp.IsSelected}" rendered="{!(vhlp.isParent || (!vhlp.isChild && !vhlp.isParent))}" />
                    </apex:column>
                    <!-- Checkbox Child-->
                    <apex:column styleClass="{!IF(vhlp.isParent,'parent_row', IF(vhlp.isChild,'child_row',''))}">
                        <apex:inputCheckbox value="{!vhlp.IsSelected}" rendered="{!vhlp.IsChild}"/>
                    </apex:column>
                    <!-- 受注商品: 品名 -->
                    <apex:column headerValue="{!$ObjectType.BOrderProduct__c.Fields.BDescription__c.Label}" styleClass="{!IF(vhlp.isParent,'parent_row', IF(vhlp.isChild,'child_row',''))}">
                        <apex:inputField value="{!vhlp.op.BDescription__c}" style="width: 235px" />
                    </apex:column>
                    <!-- 型式 -->
                    <apex:column headerValue="{!$ObjectType.Product2.Fields.BModelNumber2__c.Label}" styleClass="{!IF(vhlp.isParent,'parent_row', IF(vhlp.isChild,'child_row',''))}">
                        <apex:outputText value="{!vhlp.product.BModelNumber2__c}"/>
                    </apex:column>
                    <!-- 計上方法 -->
                    <apex:column headerValue="{!$ObjectType.BOrderProduct__c.Fields.BEarningsSummingUp__c.Label}" styleClass="{!IF(vhlp.isParent,'parent_row', IF(vhlp.isChild,'child_row',''))}">
                    <apex:outputPanel layout="block">
                        <apex:outputPanel styleClass="requiredBlock" layout="block"/>
                        <apex:outputtext value="{!vhlp.op.BEarningsSummingUp__c}" />
                    </apex:outputPanel>
                </apex:column>
                <!-- 数量 -->
                <apex:column headerValue="{!$ObjectType.BOrderProduct__c.Fields.BQuantity__c.Label}" styleClass="{!IF(vhlp.isParent,'parent_row', IF(vhlp.isChild,'child_row',''))}">
                    <apex:outputPanel styleClass="requiredInput" layout="block">
                        <apex:outputPanel styleClass="requiredBlock" layout="block"/>
                        <apex:inputField value="{!vhlp.op.BQuantity__c}" styleClass="short_width" required="true" rendered="{!OR(vhlp.isParent,AND(NOT(vhlp.isChild),NOT(vhlp.isParent)))}">
                            <apex:actionSupport event="onchange" action="{!doChangeQuantity}" rerender="productTable">
                                <apex:param name="rowNum" value="{!vhlp.num}" />
                            </apex:actionSupport>
                        </apex:inputField>
                    </apex:outputPanel>
                    <apex:outputtext value="{0, number, ###.##}" rendered="{!vhlp.isChild}">
                        <apex:param value="{!vhlp.op.BQuantity__c}" ></apex:param>
                    </apex:outputtext>
                    <apex:outputText value="{!vhlp.errorMessage}" styleClass="errorMsg" rendered="{!LEN(vhlp.errorMessage)>0}"/>
                </apex:column>
                <!-- 定価 -->
                <apex:column headerValue="リスト価格" styleClass="{!IF(vhlp.isParent,'parent_row', IF(vhlp.isChild,'child_row',''))}" >
                    <apex:outputtext value="{0, number, ###,###}" rendered="{!OR(vhlp.op.BBomFlag__c,vhlp.isChild)}">
                        <apex:param value="{!vhlp.op.BStockingFixedPriceList__c}" ></apex:param>
                    </apex:outputtext>
                    <apex:outputPanel styleClass="requiredInput" layout="block">
                        <apex:outputPanel styleClass="requiredBlock" layout="block"/>
                    </apex:outputPanel>
                </apex:column>
                <!-- 期間 -->
                <apex:column headerValue="{!$ObjectType.BOrderProduct__c.Fields.sls_SalesPeriod__c.Label}" styleClass="{!IF(vhlp.isParent,'parent_row', IF(vhlp.isChild,'child_row',''))}">
                    <apex:outputtext value="{0, number, ###,###}" rendered="{!vhlp.op.BEarningsSummingUp__c='月別'}">
                        <apex:param value="{!vhlp.op.sls_SalesPeriod__c}" />
                    </apex:outputtext>
                </apex:column>
                <!-- 販売価格 -->
                <apex:column headerValue="{!$ObjectType.BOrderProduct__c.Fields.BUnitPrice__c.Label}" styleClass="{!IF(vhlp.isParent,'parent_row', IF(vhlp.isChild,'child_row',''))}">
                    <apex:outputPanel styleClass="requiredInput" layout="block">
                        <apex:outputPanel styleClass="requiredBlock" layout="block"/>
                        <apex:inputField value="{!vhlp.op.BUnitPrice__c}" styleClass="column_width" rendered="{!AND(NOT(vhlp.isParent),vhlp.op.BEarningsSummingUp__c='一括')}"/>
                        <apex:inputField value="{!vhlp.op.sls_MonthlySum__c}" styleClass="column_width" rendered="{!AND(NOT(vhlp.isParent),vhlp.op.BEarningsSummingUp__c='月別')}"/>
                    </apex:outputPanel>
                    <apex:outputtext value="{0, number, ###,###}" rendered="{!AND(vhlp.isParent,vhlp.op.BEarningsSummingUp__c='月別')}">
                        <apex:param value="{!vhlp.op.sls_MonthlySum__c}" ></apex:param>
                    </apex:outputtext>
                    <apex:outputtext value="{0, number, ###,###}" rendered="{!AND(vhlp.isParent,vhlp.op.BEarningsSummingUp__c='一括')}">
                        <apex:param value="{!vhlp.op.sls_TotalUnitPrice__c}" ></apex:param>
                    </apex:outputtext>
                </apex:column>
                <!-- 仕入単価 -->
                <apex:column headerValue="仕入単価" styleClass="{!IF(vhlp.isParent,'parent_row', IF(vhlp.isChild,'child_row',''))}">
                    <apex:outputPanel styleClass="requiredInput" layout="block">
                        <apex:outputPanel styleClass="requiredBlock" layout="block"/>
                        <apex:inputField value="{!vhlp.op.BStockingPrice__c}"  required="true" styleClass="column_width" rendered="{!AND(NOT(vhlp.isParent),vhlp.op.BEarningsSummingUp__c='一括')}"/>
                        <apex:inputField value="{!vhlp.op.sls_MonthlyStockingPrice__c}"  required="true" styleClass="column_width" rendered="{!AND(NOT(vhlp.isParent), vhlp.op.BEarningsSummingUp__c='月別') }"></apex:inputField>
                    </apex:outputPanel>
                    <apex:outputtext value="{0, number, ###,###}" rendered="{!AND(vhlp.isParent,vhlp.op.BEarningsSummingUp__c='月別')}">
                        <apex:param value="{!vhlp.op.sls_MonthlyStockingPrice__c}" ></apex:param>
                    </apex:outputtext>
                    <apex:outputtext value="{0, number, ###,###}" rendered="{!AND(vhlp.isParent,vhlp.op.BEarningsSummingUp__c='一括')}">
                        <apex:param value="{!vhlp.op.sls_TotalStockingPrice__c}" ></apex:param>
                    </apex:outputtext>
                </apex:column>
                <!--割引率 -->
                <apex:column headerValue="{!$ObjectType.BOrderProduct__c.Fields.BDiscount__c.Label}" styleClass="{!IF(vhlp.isParent,'parent_row', IF(vhlp.isChild,'child_row',''))}">
                    <apex:inputText value="{!vhlp.discountAmount}" styleClass="short_width" rendered="{!NOT(
                    vhlp.isParent)}"/>
                    <apex:outputtext value="{0, number, ###,###.##}" rendered="{!vhlp.isParent}">
                        <apex:param value="{!vhlp.discountAmount}"></apex:param>
                    </apex:outputtext>
                    <!-- 割引合計 -->
                    <apex:facet name="footer">
                        <apex:outputtext value="{0, number, ###,###.##}" >
                            <apex:param value="{!vhlpList.grandTotalDiscount}"></apex:param>
                        </apex:outputtext>
                    </apex:facet>
                </apex:column>
                <apex:column styleClass="{!IF(vhlp.isParent,'parent_row', IF(vhlp.isChild,'child_row',''))}">
                    <apex:selectList value="{!vhlp.discountType}" size="1" >
                        <apex:selectOptions value="{!discountTypes}"/>
                        <apex:actionSupport event="onchange" action="{!doSwitchDiscountType}" rerender="productTable">
                            <apex:param name="rowNum" value="{!vhlp.num}" />
                        </apex:actionSupport>
                    </apex:selectList>
                    <!-- 割引タイプ -->
                    <apex:facet name="footer">
                        <apex:selectList value="{!vhlpList.grandDiscountType}" size="1" >
                            <apex:selectOptions value="{!discountTypes}"/>
                            <apex:actionSupport event="onchange" action="{!doSwitchGrandDiscountType}" rerender="productTable" />
                        </apex:selectList>
                    </apex:facet>
                </apex:column>
                <!--合計 -->
                <apex:column headerValue="売上" styleClass="{!IF(vhlp.isParent,'parent_row', IF(vhlp.isChild,'child_row',''))} numeric_cell">
                    <apex:outputtext value="{0, number, ###,###}">
                        <apex:param value="{!vhlp.totalPrice}"></apex:param>
                    </apex:outputtext>
                    <!-- Grand Total -->
                    <apex:facet name="footer">
                        <apex:outputtext value="{0, number, ###,###}" >
                            <apex:param value="{!vhlpList.grandTotalPrice}"></apex:param>
                        </apex:outputtext>
                    </apex:facet>
                </apex:column>
                <!-- 売総率 -->
                <apex:column headerValue="売総率" styleClass="{!IF(vhlp.isParent,'parent_row', IF(vhlp.isChild,'child_row',''))} numeric_cell">
                    <apex:outputtext value="{!TEXT(vhlp.profitRate) & ' %'}" rendered="{!vhlp.isParent}">
                        <!-- <apex:param value="{!vhlp.profitRate}"/> -->
                    </apex:outputtext>
                    <apex:outputPanel styleClass="midi_width" layout="block"/>
                    <apex:outputtext value="{!vhlp.profitRate}" styleClass="mini_width" rendered="{!NOT(vhlp.isParent)}">
                        <apex:param name="rowNum" value="{!vhlp.num}" />
                        <apex:outputtext value="{0, number, 00.00 %}" rendered="{!vhlp.isParent}"/>
                    </apex:outputtext>
                    <apex:outputtext value=" %" rendered="{!NOT(vhlp.isParent)}" />
                    <!-- Grand Total -->
                    <apex:facet name="footer" >
                        <apex:outputtext value="{0, number, 00.00 %}" >
                            <apex:param value="{!vhlpList.grandTotalProfit}">
                        </apex:param>
                        </apex:outputtext>
                    </apex:facet>
                </apex:column>
            </apex:pageBlockTable>
        </apex:pageBlockSection>

        <!-- ボタン -->
        <apex:pageBlockButtons >
            <apex:commandButton action="{!doAllCheckOff}" value="選択解除" reRender="productTable"/>
            <apex:commandButton action="{!doDeleteOrderProduct}" value="削除" reRender="productTable"/>
            <apex:outputText value=" " />
            <apex:commandButton action="{!moveTop}" value="↑ 最上位へ" reRender="productTable" />
            <apex:commandButton action="{!moveUp}" value="↑ 上へ" reRender="productTable" />
            <apex:commandButton action="{!moveDown}" value="↓ 下へ" reRender="productTable" />
            <apex:commandButton action="{!moveBottom}" value="↓ 最下位へ" reRender="productTable"/>
            <apex:outputText value=" " />
            <!-- onchangeのアクション後、再計算 -->
            <apex:outputPanel >
                <input type="button" id="calc" value="再計算" onclick="setTimeout(doCalc, 700);" class="btn" />
                <apex:actionFunction action="{!doCalculate}" name="doCalc" rerender="productTable"/>
            </apex:outputPanel>
            <apex:commandButton action="{!doApply}" value="適用"/>
            <apex:commandButton value="リセット" action="{!showPopup}" rerender="popup" status="status" immediate="true"/>
            <apex:outputPanel id="popup">
                <apex:outputPanel id="popInnerOutputPnl" styleClass="customPopup" layout="block" rendered="{!displayPopUp}">
                    <apex:commandButton value="X" title="Close the popup" action="{!closePopup}" styleClass="closeButton" rerender="popup" immediate="true"/>
                    <apex:pageblockSection >
                        <apex:pageblockSectionItem >
                            <apex:outputLabel value="保存していない内容は破棄されます。 よろしいですか ?" for="address"/>
                        </apex:pageblockSectionItem>
                    </apex:pageblockSection>
                    <apex:commandButton value="いいえ" action="{!closePopup}" styleClass="closeButton" rerender="popup" immediate="true"/>
                    <apex:commandButton value="はい" action="{!pageRefresh}" styleClass="closeButton" rerender="productTable,popup" immediate="true"/>
                </apex:outputPanel>
            </apex:outputPanel>
        </apex:pageBlockButtons>
    </apex:pageBlock>
</apex:form>

1
  • Hey Noa. Were you able to get the layout working? Sep 30, 2018 at 21:45

1 Answer 1

0

Not sure this is something you need to adjust using Lightning stylesheets. I would just wrap the content in a div and use it to set the width & background color.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .