topic Re: Resize text boxes in Filter Widget in Web AppBuilder Custom Widgets Questions

Resize text boxes in Filter Widget

AmyKlug — Wed, 29 Nov 2017 21:30:30 GMT

Hi,

I want to change the size of and the distance between the text boxes in the filter widget. Have been looking around to no avail to where this might be done. Trying to get it to fit better into the dashboard theme. Can anyone point me in the right direction? Thanks!

Re: Resize text boxes in Filter Widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:37:50 GMT

Amy,

All the css rules for that are in the jimu.js\css\jimu.css file:

/* css for jimu-single-filter-parameter */

.jimu-single-filter-parameter > table > tbody > .first-tr > td{
  padding-bottom: 4px;
}

.jimu-single-filter-parameter > table > tbody > .third-tr > td{
  padding-bottom: 10px;
}

.jimu-single-filter-parameter .dijit-form-Select>tbody>tr>td{
  height: 23px;
}

.jimu-single-filter-parameter .dijit-form-Select>tbody>tr>td>.dijitButtonText{
  height: 20px;
  height: 20px !important;
}

.jimu-single-filter-parameter .dijit-form-FilteringSelect.loading > .dijitInputField.dijitInputContainer{
  background: url(images/validating.gif) right no-repeat;
}

.jimu-rtl .jimu-single-filter-parameter .dijit-form-FilteringSelect.loading > .dijitInputField.dijitInputContainer{
  background: url(images/validating.gif) left no-repeat;
}

.jimu-single-filter-parameter .dijit-form-FilteringSelect>div.dijitArrowButton.dijitDownArrowButton{
  width: 18px;
  height: 100%;
}

.jimu-single-filter-parameter .dijit-form-FilteringSelect>div.dijitArrowButton.dijitDownArrowButton>input{
  padding: 0;
  border: 0;
  display: inline-block;
  height: 100%;
  height: 100% !important;
}

.jimu-single-filter-parameter .dijit-form-ValidationTextBox>div.dijitInputField{
  height: 100%;
}

.jimu-single-filter-parameter .dijit-form-ValidationTextBox>div.dijitInputField>input.dijitInputInner{
  margin: 0;
  padding:0;
  height: 100%;
  height: 100% !important;
}

.jimu-single-filter-parameter .dijit-form-NumberTextBox>div.dijitInputField{
  height: 100%;
}

.jimu-single-filter-parameter .dijit-form-NumberTextBox>div.dijitInputField>input.dijitInputInner{
  margin: 0;
  padding: 0;
  height: 100%;
  padding:0 !important;
  height: 100% !important;
}

.jimu-single-filter-parameter .dijit-form-DateTextBox>.dijitRight{
  width:17px;
  height: 100%;
}

.jimu-single-filter-parameter .dijit-form-DateTextBox>.dijitRight .dijitInputField{
  border: 0;
  line-height: 24px;
}

.jimu-single-filter-parameter .dijitSelectLabel.dijitValidationTextBoxLabel{
  width:52px;
  max-width:52px;
  overflow:hidden;
  max-width:52px !important;
  overflow:hidden !important;
}

.jimu-single-filter-parameter .prompt{
  font-size: 12px;
  color: #686868;
}

.jimu-single-filter-parameter .hint{
  font-style: italic;
  font-size: 12px;
  color: #d9dde0;
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Resize text boxes in Filter Widget

AmyKlug — Mon, 04 Dec 2017 21:12:10 GMT

Do these settings have to be changed at the web appbuilder level? i tried at the app level to no avail

Re: Resize text boxes in Filter Widget

RobertScheitlin__GISP — Mon, 04 Dec 2017 21:21:40 GMT

App level should do the trick. Are you not seeing any of your changes? Have you tried a bold change like a font color or something?

Re: Resize text boxes in Filter Widget

AmyKlug — Mon, 04 Dec 2017 21:37:05 GMT

I have been able to change everything it seems except the text box height and padding between them

Re: Resize text boxes in Filter Widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:37:53 GMT

Amy,

It is hard to guide you here as I am not sure if you understand the elements involved in the layout of the filter parameters.

Here is a new rule I added to the themes common.css file to override the textbox height for the filter widget:

.jimu-filter-simple-value-provider .dijitTextBox,
.jimu-filter-list-value-provider .dijitTextBox {
  height: 20px;
}‍‍‍‍‍‍‍‍

With the spacing between the filter elements there are a lot of different things in play there. The filter providers are layed out using a table and then the distance between them depends on the presence of a hint.

You can override this rule to recover a bit of padding that is added:

.jimu-single-filter-parameter > table > tbody > .first-tr > td {
  padding-bottom: 4px;
}‍‍‍‍‍‍

And this one too:

.jimu-single-filter-parameter > table > tbody > .third-tr > td {
  padding-bottom: 10px;
}‍‍‍