+ Start a Discussion
muromuromuromuro 

特定条件下でapex:selectListの選択肢の表示が異常になる

お世話になっております。

Bootstrapでデザインを行っているのですが、ある条件下で一部の表示が異常になることがわかりました。
こちらをVisualforce上で解決する手段はありますでしょうか。

<現象>
apex:selectListの選択肢がずれ、選択肢が消えてしまったり余白ができてしまったりする(下記画像赤枠部分)
(本番環境に一度アップロードしているため、企業や業務が特定できそうな内容は消しております)
User-added image

<発生した条件>
  • ブラウザが「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>

以上、よろしくお願いいたします。
そのほか、必要な情報がありましたら可能な範囲で追記します。
Best Answer chosen by muromuro
Taiki YoshikawaTaiki Yoshikawa
前回の投稿時に失念していたのですが、VisualStrapの何年か後にSalesforce Namespacerというサイトが公開されました。こちらはBootstrapのCSSに任意のNamespaceを追加することができるサイトです。プロジェクトで利用したことはないのですがおそらく正常に動いてくれると思います。

Salesforce Namespacer
https://bootstrap-namespacer.herokuapp.com/

標準のBootstrapをそのまま利用できるのでVisualStrapよりもこちらの方が今後のメンテナンス性が優れているかもしれませんのでこちらのサイトもご確認してみてください。

利用時のイメージをまとめていましたので共有します。
https://tyoshikawa1106.hatenablog.com/entry/2016/09/24/162448

All Answers

Taiki YoshikawaTaiki Yoshikawa
SalesforceのCSSとBootstrapのCSSが干渉してしまい発生していると思います。CSSを大きく変更するページ開発を行う場合はapexタグを使わない方法での開発が望ましいと思います。apexタグを使う場合はVisualStrapというSalesforceに適したBootStrapを適用できるフレームワークもありますのでそちらが使えるかもしれません。(無償のAppExchangeで公開されています。2016/02が最終リリースとなっていますが...)

Visualstrap - AppExchange
https://appexchangejp.salesforce.com/listingDetail?listingId=a0N3000000B56AMEAZ

開発ドキュメント系はこちらです。
http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000009MI61
muromuromuromuro
Yoshikawa様、ありがとうございます。

一応StandardStyleSheetsはfalseにしているのですが、100%使わないようにはできない感じなのですね。
Visualstrapなるものがあるとは知りませんでした。こちらを導入できないか社内で検討させていただきます。
Taiki YoshikawaTaiki Yoshikawa
前回の投稿時に失念していたのですが、VisualStrapの何年か後にSalesforce Namespacerというサイトが公開されました。こちらはBootstrapのCSSに任意のNamespaceを追加することができるサイトです。プロジェクトで利用したことはないのですがおそらく正常に動いてくれると思います。

Salesforce Namespacer
https://bootstrap-namespacer.herokuapp.com/

標準のBootstrapをそのまま利用できるのでVisualStrapよりもこちらの方が今後のメンテナンス性が優れているかもしれませんのでこちらのサイトもご確認してみてください。

利用時のイメージをまとめていましたので共有します。
https://tyoshikawa1106.hatenablog.com/entry/2016/09/24/162448
This was selected as the best answer
muromuromuromuro
ありがとうございます。
結局Visualstrapでも表示が変わらなかったので、今回は仕様として納品することに決まりました。
Salesforce Namespacerについては、次回画面開発時に余裕や問題があれば試してみたいと思います。