ng2-smart-table dropdown filter or editor gets bigger than text inputs.

[mkhoshnasib]

Hi everyone. I'm facing an styling issue on ng2-smart-table.

• [x] bug report
• [ ] feature request
• [ ] question about the decisions made in the repository

Issue description

When setting.column.filter.type or setting.column.editor.type set to list, the size of dropdown gets bigger than text inputs like image below.

Steps to reproduce: Simply changing type to list like this.

settings: {
   columns: {
      age: {
        title: 'Age',
        editor: {
          type: 'list',
          config: {
            selectText: 'Select',
            list: [
              {value: '1', title:'Option 1'},
              {value: '2', title:'Option 2'},
              {value: '3', title:'Option 3'},
              {value: '4', title:'Option 4'},
            ],
          },
        }
        filter: {
          type: 'list',
          config: {
            selectText: 'Select',
            list: [
              {value: '1', title:'Option 1'},
              {value: '2', title:'Option 2'},
              {value: '3', title:'Option 3'},
              {value: '4', title:'Option 4'},
            ],
          },
        },
      },
   }
}

I fixed this problem using these CSS:

.ng2-smart-filter select {
  height: calc(2rem + 4px) !important;
  padding: 0 10px !important;
}

table-cell-default-editor select-editor select {
  height: calc(2rem + 8px) !important;
  padding: 0 10px !important;
}

and here is the result.

but I'm not sure if it's the best way.

I will be very happy if I know that how can I fix this issue on main project.

[cerkiner]

+1. Thanks for the hack.

[jchavarria1983]

I need to create a multi select when add new row, Someone have implemented that ?

[mkhoshnasib]

In the below code the editor part will do that.

settings: {
   columns: {
      age: {
        title: 'Age',
        editor: {
          type: 'list',
          config: {
            selectText: 'Select',
            list: [
              {value: '1', title:'Option 1'},
              {value: '2', title:'Option 2'},
              {value: '3', title:'Option 3'},
              {value: '4', title:'Option 4'},
            ],
          },
        }
        filter: {
          type: 'list',
          config: {
            selectText: 'Select',
            list: [
              {value: '1', title:'Option 1'},
              {value: '2', title:'Option 2'},
              {value: '3', title:'Option 3'},
              {value: '4', title:'Option 4'},
            ],
          },
        },
      },
   }
}

[jchavarria1983]

it is a select but i need the ability user can select multiple options

[hdahrouch]

@mkhoshnasib i have the same problem , could you please explain where did you put the CSS code to resolve the issue . thanks

[kgrigorian]

having the same issue

[varmamkm]

i have the same issue. can you please share the complete css @mkhoshnasib

[AbdallahAbdedaiem]

In my rows, I only see the value, I wan't to show the title instead for my select field. how???