いいね!数

0

閲覧数
94

いつもご参考にさせていただいております。

 

今回ご相談したいのはCSSについてです。

XpagesでLINE風の枠を作りたくdivに丸みを持たせようとしていたのですが、再現されません。

以下のCSSを<xp:div>に適用したのですが、

.balloon{
  width: 200px;
  height: 50px;
  background: #00c300;
  border-radius: 15px;
  padding: 5px;
  position: relative;
}

普通のHTMLだと、きちんと丸みを帯びるのにXpagesだとうまくいかないのはなぜでしょうか?

【HTMLだと大丈夫な例】=============================

<head>
 <title>丸みを持たせる</title>
   <link rel="stylesheet" type="text/css" href="test.css">
   <div class="balloon"></div>
</head>

================================================

【HTMLだとNGな例】=================================
<xp:div styleClass="balloon"></xp:div>

================================================


ご存知の方がいらっしゃいましたら、ぜひ知恵をお貸しいただけませんか?

以上、よろしくお願いいたします。

 

サーバー情報: | クライアント情報: | 
カテゴリ:アプリ開発 - XPages | タグ:
  | 質問日時:Jun 5, 2017 1:27:18 PM

回答・コメント

いいね!数

0

普通に適用されましたよ?

CSSがリソースとして設定されていないとかないですよね?

回答日時:Jun 5, 2017 2:26:45 PM

いいね!数

1

ブラウザのバージョンによりうまく適用されていないのではないかと思います。


例えばIEであれば、IE11で表示していても、自動的にIE7などでエミュレートされる為、
うまく表示さないと思います。(border-radiusはIEであればIE9以降で有効なようですので)

以下のようなスクリプトをXPageのbeforeRenderResponse イベントに記載することで
解消されるのではないでしょうか。

var exContext = facesContext.getExternalContext();
var resp = exContext.getResponse();
resp.setHeader("X-UA-Compatible", "IE=9");

 

回答日時:Jun 5, 2017 3:26:49 PM

いいね!数

0

kaz winecellarさま、およよさま

ご回答ありがとうございます。

 

なるほどですね!!!

環境がIE11をエンタープライズモードで閲覧していたので、表示されなかったということですね。。。

とても勉強になりました、ありがとうございます!!!!!

 

回答日時:Jun 5, 2017 3:50:37 PM