akveo/ngx-admin

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

Open

#1,827 opened on Aug 19, 2018

View on GitHub
 (8 comments) (3 reactions) (0 assignees)TypeScript (7,916 forks)batch import
help wanted

Repository metrics

Stars
 (24,990 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

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

  • 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. image

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. screenshot1

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.

Contributor guide