動作確認
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);
}