topic Re: Filter widget: no line break between textbox and 'apply' button ? in Web AppBuilder Custom Widgets Questions

Filter widget: no line break between textbox and 'apply' button ?

helenchu — Sun, 12 Dec 2021 08:49:16 GMT

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>',

Re: Filter widget: no line break between textbox and 'apply' button ?

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:49:19 GMT

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.

Re: Filter widget: no line break between textbox and 'apply' button ?

helenchu — Fri, 07 Oct 2016 19:46:46 GMT

I own you sooo much! Thank you and have a nice weekend Robert!