You need to sign in to do that
Don't have an account?
muromuro
特定条件下でapex:selectListの選択肢の表示が異常になる
お世話になっております。
Bootstrapでデザインを行っているのですが、ある条件下で一部の表示が異常になることがわかりました。
こちらをVisualforce上で解決する手段はありますでしょうか。
<現象>
apex:selectListの選択肢がずれ、選択肢が消えてしまったり余白ができてしまったりする(下記画像赤枠部分)
(本番環境に一度アップロードしているため、企業や業務が特定できそうな内容は消しております)
<発生した条件>
<VIsualforceコード>
(本番環境に一度アップロードしているため、選択肢近辺のみを抜粋し、企業や業務が特定できそうな内容は消しております)
以上、よろしくお願いいたします。
そのほか、必要な情報がありましたら可能な範囲で追記します。
Bootstrapでデザインを行っているのですが、ある条件下で一部の表示が異常になることがわかりました。
こちらをVisualforce上で解決する手段はありますでしょうか。
<現象>
apex:selectListの選択肢がずれ、選択肢が消えてしまったり余白ができてしまったりする(下記画像赤枠部分)
(本番環境に一度アップロードしているため、企業や業務が特定できそうな内容は消しております)
<発生した条件>
- ブラウザが「Google Chrome」
- 対象のVisualforceページを「コンソール上で」表示する
- ディスプレイを2つ使用し、「メインディスプレイと拡大率の異なるサブディスプレイ上で」表示する
- メインディスプレイより小さいと選択肢が一部消え、大きいと余白が発生します
<VIsualforceコード>
(本番環境に一度アップロードしているため、選択肢近辺のみを抜粋し、企業や業務が特定できそうな内容は消しております)
<apex:page showHeader="false" sidebar="false" standardStyleSheets="false" controller="CalendarPageController" docType="html-5.0"> <style> th, td{text-align: center; vertical-align: middle; font-size: small;} body{font-size: small;} </style> <script type='text/javascript' src='/soap/ajax/29.0/connection.js'></script> <script type='text/javascript' src='/soap/ajax/29.0/apex.js'></script> <apex:stylesheet value="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"/> <div style="text-align: center;" id="centeringDiv" onLoad="FixedMidashi.create();"> <apex:form id="form"> <div> <apex:outputText styleClass="header" style="text-align:center;"><h5 style="color: '#6c757d';"> カレンダー </h5></apex:outputText> <apex:commandLink action="{!replaceTargetToLastMonth}" value="<< {!lastYear}年{!lastMonth}月"/> <apex:outputText styleClass="header" style="display: inline; font-size: medium;" value=" {!targetYear}年{!targetMonth}月 "/> <apex:commandLink action="{!replaceTargetToNextMonth}" value="{!nextYear}年{!nextMonth}月 >>"/> <apex:messages styleClass="alert alert-danger" style="text-align: left;"/> </div> <div class="form-group"> <div class="d-inline-flex"> <apex:selectList value="{!selectedWeekString}" size="1" styleClass="form-control"> <apex:selectoptions value="{!monthOrWeekSelectList}"/> </apex:selectList> </div> <div class="d-inline-flex"> <apex:selectList value="{! IdString}" size="1" styleClass="form-control"> <apex:selectoptions value="{! SelectList}"/> </apex:selectList> </div> <div class="d-inline-flex"> <span class="input-group-append"> <apex:commandButton value="表示する ・期間を選択" styleClass="btn btn-info" action="{!selectMonthOrWeek}"/> </span> </div> </div> </apex:form> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> </apex:page>
以上、よろしくお願いいたします。
そのほか、必要な情報がありましたら可能な範囲で追記します。
Salesforce Namespacer
https://bootstrap-namespacer.herokuapp.com/
標準のBootstrapをそのまま利用できるのでVisualStrapよりもこちらの方が今後のメンテナンス性が優れているかもしれませんのでこちらのサイトもご確認してみてください。
利用時のイメージをまとめていましたので共有します。
https://tyoshikawa1106.hatenablog.com/entry/2016/09/24/162448
All Answers
Visualstrap - AppExchange
https://appexchangejp.salesforce.com/listingDetail?listingId=a0N3000000B56AMEAZ
開発ドキュメント系はこちらです。
http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000009MI61
一応StandardStyleSheetsはfalseにしているのですが、100%使わないようにはできない感じなのですね。
Visualstrapなるものがあるとは知りませんでした。こちらを導入できないか社内で検討させていただきます。
Salesforce Namespacer
https://bootstrap-namespacer.herokuapp.com/
標準のBootstrapをそのまま利用できるのでVisualStrapよりもこちらの方が今後のメンテナンス性が優れているかもしれませんのでこちらのサイトもご確認してみてください。
利用時のイメージをまとめていましたので共有します。
https://tyoshikawa1106.hatenablog.com/entry/2016/09/24/162448
結局Visualstrapでも表示が変わらなかったので、今回は仕様として納品することに決まりました。
Salesforce Namespacerについては、次回画面開発時に余裕や問題があれば試してみたいと思います。