Hi,
I'm trying to make 'Apply' button and filter textbox on the same line to save space.
In widgets/Filter/Widget.js I took away the <div> but it didn't work. Can you please help? Thanks.
'</div>' +
'<div class="body">' +
'<span class="parameters"></span>' +
'<span class="jimu-btn apply">' +
'${apply}</span>' +
'</div>' +
'</li>',
Original codes:
// '</div>' +
// '<div class="body">' +
// '<div class="parameters"></div>' +
// '<span class="jimu-btn apply jimu-float-trailing jimu-trailing-margin25">' +
// '${apply}</span>' +
// '</div>' +
// '</li>',
Solved! Go to Solution.
Helen,
It will take changing the template some JS and CSS:
style.css (changes and additions):
.jimu-widget-filter .filter-list .filter-item .body .parameters{
/*margin: 0 30px;*/
}
.jimu-widget-filter .filter-list .filter-item .body .jimu-btn{
background: #fff;
border-radius: 0;
width: 82px;
border: 1px solid #c7c7c7;
color: #000;
font-size: 12px;
/*margin-bottom: 15px;*/
margin-left: 12px;
margin-top: 23px;
float: left;
}
.jimu-filter-parameters {
float: left;
width: 70%;
}
Widget.js:
_itemTemplate: '<li class="filter-item" data-index="${index}">' +
'<div class="header jimu-leading-padding1" >' +
'<span class="icon jimu-trailing-margin05">' +
'<img src="${icon}" />' +
'</span>' +
'<span class="item-title">${title}</span>' +
'<span class="done jimu-float-trailing jimu-leading-margin1"></span>' +
'<span class="setting jimu-float-trailing" ' +
'title="${toggleTip}" style="display:${hasValue}"></span>' +
'</div>' +
'<div class="body">' +
'<div class="parameters"><div class="jimu-btn apply" style="float:left;">${apply}</div></div>' +
//'<span class="jimu-btn apply jimu-float-trailing jimu-trailing-margin25">' +
//'${apply}</span>' +
'</div>' +
'</li>',
update this line by adding first:
node.filterParams.placeAt(pamDiv, "first");
Be aware that this will screw things up when using more than one filter expression.
Helen,
It will take changing the template some JS and CSS:
style.css (changes and additions):
.jimu-widget-filter .filter-list .filter-item .body .parameters{
/*margin: 0 30px;*/
}
.jimu-widget-filter .filter-list .filter-item .body .jimu-btn{
background: #fff;
border-radius: 0;
width: 82px;
border: 1px solid #c7c7c7;
color: #000;
font-size: 12px;
/*margin-bottom: 15px;*/
margin-left: 12px;
margin-top: 23px;
float: left;
}
.jimu-filter-parameters {
float: left;
width: 70%;
}
Widget.js:
_itemTemplate: '<li class="filter-item" data-index="${index}">' +
'<div class="header jimu-leading-padding1" >' +
'<span class="icon jimu-trailing-margin05">' +
'<img src="${icon}" />' +
'</span>' +
'<span class="item-title">${title}</span>' +
'<span class="done jimu-float-trailing jimu-leading-margin1"></span>' +
'<span class="setting jimu-float-trailing" ' +
'title="${toggleTip}" style="display:${hasValue}"></span>' +
'</div>' +
'<div class="body">' +
'<div class="parameters"><div class="jimu-btn apply" style="float:left;">${apply}</div></div>' +
//'<span class="jimu-btn apply jimu-float-trailing jimu-trailing-margin25">' +
//'${apply}</span>' +
'</div>' +
'</li>',
update this line by adding first:
node.filterParams.placeAt(pamDiv, "first");
Be aware that this will screw things up when using more than one filter expression.
I own you sooo much! Thank you and have a nice weekend Robert!