Resize text boxes in Filter Widget

[AmyKlug]

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!

[RobertScheitlin__GISP]

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;
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[AmyKlug]

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

[RobertScheitlin__GISP]

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?

[AmyKlug]

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

[RobertScheitlin__GISP]

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;
}‍‍‍