【Salesforce】apex:inputField＋slds-inputで日付項目を表示したらはみ出る

5072 ワード
Salesforce Apex Visualforce Salesforce テキストリンク

動作確認

apex:inputField＋slds-inputで日付項目を表示したら・・・

・・・はみ出とるやないか！

test

<apex:inputField value="{!日付項目}" styleClass="slds-input"/>
test

.slds-input{
    background-color: #fff;
    border: 1px solid #dddbda;
    border-radius: .25rem;
    /* ここがうまくやってくれないようです */
    width: 100%;
    transition: border .1s linear,background-color .1s linear;
    display: inline-block;
    padding: 0 1rem 0 .75rem;
    line-height: 1.875rem;
    min-height: calc(1.875rem + 2px);
}

解決策

test

<apex:inputField value="{!日付項目}" styleClass="slds-input-autoWidth"/>
test

.slds-input-autoWidth {
    background-color: #fff;
    border: 1px solid #dddbda;
    border-radius: .25rem;
    /* !importantしないと反映されない */
    width: auto !important;
    transition: border .1s linear,background-color .1s linear;
    display: inline-block;
    padding: 0 1rem 0 .75rem;
    line-height: 1.875rem;
    min-height: calc(1.875rem + 2px);
}

参考リンク

Lightning Design System Input