Page History

Sv translation

language	en

In BellaDati it is possible to change the appearance of almost any elemtent on the screen. This example will show you how to change appearance of filter components. At the end basic radio buttons will be transformed into clickable buttons. Knowledge of HTML and CSS is required.

Preparation

Create a report which will contain a filter with radio button component. In this example a filter inside view is used but similiar approach can be used for other types of filters. By default it will look something like this:

Custom CSS

It is possible to add custom CSS by using look and feel settings of your domain or by adding the code to a custom content. In this case custom content will be used since we want to apply the changes only on one report.

Note
All changes have to be done in Source mode. Otherwise the code won't work.

Add new custom content to your report.
Switch to Source mode.

Hide radio buttons and aligned all options in one row:

Code Block

language	css

 <style>
input[type="radio"], 
input[type="checkbox"] {
    /* hide the inputs */
    opacity: 0;
}
.no-slider form div p {
  display:inline-block;
}
.no-slider form div {
	max-width:900px !important;
	border:0px !important;
	padding-bottom: 0px !important;
    margin-top: 0px !important;
    padding-top: 0px !important;
}
.no-slider {
	overflow:unset !important;
}
</style>

Add style to labels which will work as buttons:

Code Block

language	css

/* style your lables/button */
input[type="radio"] + label, 
input[type="checkbox"] + label {
    /* keep pointer so that you get the little hand showing when you are on a button */
    cursor: pointer;
    /* the following are the styles */
    padding: 4px 10px;
    border: 1px solid #FF8254;
    background: #FF8254;
    color: #fff;
    width: 40px;
	display: block;
	margin-left: 10px;
	text-align: center;
	font-size: 15px;
	text-rendering: unset;
	text-rendering: optimizelegibility !important;
}

You can also add advanced style options such as shadows, rounded corners or transitions:

Code Block

language	css

box-shadow: 1px 2px 4px #888888;
transition: all 0.6s ease 0s;
text-shadow: 1px 1px 1px rgba(200, 200, 200, 0.5);
text-rendering: optimizelegibility !important;
border-radius: 3px;

Add different style for selected and hovered item:

Code Block

language	css

input[type="radio"]:hover + label, 
input[type="checkbox"]:hover + label {
    border: 1px solid #DE594B;
    background: #DE594B;
}
input[type="radio"]:checked+ label,
input[type="checkbox"]:checked+ label{
    /* style for the checked/selected state */
    background: #ECC34D;
    border: 1px solid #ECC34D;
    color: white;
}

Now you have fully working buttons. Of course it is possible to further change the appearance of the report. In this example we will change the background to be the same as the map and we will also hide the name of filter.

Code Block

#contentNarrower, .textViewContainer,.leaflet-container  {
    background-color: #73B6E6!important;
}
.viewContentInnerLayout {
      background-color: #73B6E6 !important;
}
.t-bdlayout-space {
  	border: 1px solid #73B6E6 !important;
}

Finally to have a clean look we will hide all report controls and top bars in Report appearance settings.
This is the final result:

Complete CSS code:

Code Block

 <style>
input[type="radio"], 
input[type="checkbox"] {
    /* hide the inputs */
    opacity: 0;
}
.no-slider form div p {
  display:inline-block;
}
.no-slider form div {
	max-width:900px !important;
	border:0px !important;
	padding-bottom: 0px !important;
   margin-top: 0px !important;
    padding-top: 0px !important;
}
.no-slider {
	overflow:unset !important;
}
/* style your labels/button */
input[type="radio"] + label, 
input[type="checkbox"] + label {
    /* keep pointer so that you get the little hand showing when you are on a button */
    cursor: pointer;
    /* the following are the styles */
    padding: 4px 10px;
    border: 1px solid #FF8254;
    background: #FF8254;
    color: #fff;
    width: 40px;
	display: block;
	margin-left: 10px;
	text-align: center;
	font-size: 15px;
	text-rendering: unset;
	box-shadow: 1px 2px 4px #888888;
	transition: all 0.6s ease 0s;
	text-shadow: 1px 1px 1px rgba(200, 200, 200, 0.5);
	text-rendering: optimizelegibility !important;
    border-radius: 3px;
}
input[type="radio"]:hover + label, 
input[type="checkbox"]:hover + label {
    border: 1px solid #DE594B;
    background: #DE594B;
}
input[type="radio"]:checked+ label,
input[type="checkbox"]:checked+ label{
    /* style for the checked/selected state */
    background: #ECC34D;
    border: 1px solid #ECC34D;
    color: white;
}
#contentNarrower, .textViewContainer,.leaflet-container  {
    background-color: #73B6E6!important;
}
.viewContentInnerLayout {
    background-color: #73B6E6 !important;
}
.t-bdlayout-space {
  	border: 1px solid #73B6E6 !important;
}
</style>

You can find the final report and other examples of filter in attached BellaApp.

Sv translation

language	ja

BellaDatiでは、画面上のほぼすべての要素の外観を変更できます。この例では、どのようにフィルタ部品の外観を変更する方法を表示します。終わりに、最後に基本的なラジオボタンがクリック可能なボタンに変換されます。 HTMLやCSSの知識が必要です。

用意

ラジオボタンコンポーネントを使用したフィルタが含まれるレポートを作成します。この例では、フィルタ内部のビューが使用されますが、他のタイプのフィルタにも同様のアプローチを使用できます。デフォルトでは、次のようになります。

CSSカスタマイズ

ルックアンドフィールドメインの設定を使用するかカスタムコンテンツにコードを追加することでカスタムCSSを追加することが可能です。1つのレポートだけに変更を適用したいので、この場合にはカスタムコンテンツが使用されます。

Note
すべての変更は、ソースモードで実行されます。そうでなければ、コードは動作しません。

レポートに新しいカスタムコンテンツを追加します。
ソースモードに切り替えます。

ラジオボタンを非表示にし、一列にすべてのオプションを整列します。

Code Block

language	css

 <style>
input[type="radio"], 
input[type="checkbox"] {
    /* hide the inputs */
    opacity: 0;
}
.no-slider form div p {
  display:inline-block;
}
.no-slider form div {
	max-width:900px !important;
	border:0px !important;
	padding-bottom: 0px !important;
    margin-top: 0px !important;
    padding-top: 0px !important;
}
.no-slider {
	overflow:unset !important;
}
</style>

ボタンとして動作するようにラベルにスタイルを追加します。

Code Block

language	css

/* style your lables/button */
input[type="radio"] + label, 
input[type="checkbox"] + label {
    /* keep pointer so that you get the little hand showing when you are on a button */
    cursor: pointer;
    /* the following are the styles */
    padding: 4px 10px;
    border: 1px solid #FF8254;
    background: #FF8254;
    color: #fff;
    width: 40px;
	display: block;
	margin-left: 10px;
	text-align: center;
	font-size: 15px;
	text-rendering: unset;
	text-rendering: optimizelegibility !important;
}

シャドウ、角丸や遷移など、高度なスタイルオプションを追加すできます。

Code Block

language	css

box-shadow: 1px 2px 4px #888888;
transition: all 0.6s ease 0s;
text-shadow: 1px 1px 1px rgba(200, 200, 200, 0.5);
text-rendering: optimizelegibility !important;
border-radius: 3px;

選択された項目に別のスタイルを追加します。

Code Block

language	css

input[type="radio"]:hover + label, 
input[type="checkbox"]:hover + label {
    border: 1px solid #DE594B;
    background: #DE594B;
}
input[type="radio"]:checked+ label,
input[type="checkbox"]:checked+ label{
    /* style for the checked/selected state */
    background: #ECC34D;
    border: 1px solid #ECC34D;
    color: white;
}

今、完全に動作するボタンがあります。もちろんレポートの外観を変更することが可能です。この例では、マップと同じになるように背景を変更し、フィルタの名前を非表示になります。

Code Block

#contentNarrower, .textViewContainer,.leaflet-container  {
    background-color: #73B6E6!important;
}
.viewContentInnerLayout {
      background-color: #73B6E6 !important;
}
.t-bdlayout-space {
  	border: 1px solid #73B6E6 !important;
}

最後に、レポートの外観設定ですべてのレポートコントロールとトップバーを非表示になります。
これは、最終的な結果です

CSS コード完了:

Code Block

 <style>
input[type="radio"], 
input[type="checkbox"] {
    /* hide the inputs */
    opacity: 0;
}
.no-slider form div p {
  display:inline-block;
}
.no-slider form div {
	max-width:900px !important;
	border:0px !important;
	padding-bottom: 0px !important;
   margin-top: 0px !important;
    padding-top: 0px !important;
}
.no-slider {
	overflow:unset !important;
}
/* style your labels/button */
input[type="radio"] + label, 
input[type="checkbox"] + label {
    /* keep pointer so that you get the little hand showing when you are on a button */
    cursor: pointer;
    /* the following are the styles */
    padding: 4px 10px;
    border: 1px solid #FF8254;
    background: #FF8254;
    color: #fff;
    width: 40px;
	display: block;
	margin-left: 10px;
	text-align: center;
	font-size: 15px;
	text-rendering: unset;
	box-shadow: 1px 2px 4px #888888;
	transition: all 0.6s ease 0s;
	text-shadow: 1px 1px 1px rgba(200, 200, 200, 0.5);
	text-rendering: optimizelegibility !important;
    border-radius: 3px;
}
input[type="radio"]:hover + label, 
input[type="checkbox"]:hover + label {
    border: 1px solid #DE594B;
    background: #DE594B;
}
input[type="radio"]:checked+ label,
input[type="checkbox"]:checked+ label{
    /* style for the checked/selected state */
    background: #ECC34D;
    border: 1px solid #ECC34D;
    color: white;
}
#contentNarrower, .textViewContainer,.leaflet-container  {
    background-color: #73B6E6!important;
}
.viewContentInnerLayout {
    background-color: #73B6E6 !important;
}
.t-bdlayout-space {
  	border: 1px solid #73B6E6 !important;
}
</style>

添付られたBellaApp で最終報告書とフィルタの他の例を見つけることができます。

Page tree

Versions Compared

Old Version 8

New Version Current

Key

Preparation

Custom CSS

用意

CSSカスタマイズ