Cant press outside number in row of dropdown box

[hungdev]

Please help me. @AllenFang @Chun-MingChen

[AllenFang]

@hungdev some question here

1. Is there any error log in the console of dev tool?
2. Do you use bootstrap4
3. If you use dropdown instead of dropup, is able to fix this issue?
   4 What react-bootstrap-table2 version you used? Please list all the related package versions
4. Do you enable the remote mode?

[hungdev]

@AllenFang
1.no log in console
2. "bootstrap": "^4.1.1",
3. im using default code at:
https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Pagination&selectedStory=Custom%20Pagination&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel
4. I don't understand this question. Your mean is teamviewer or anydesk?

"dependencies": {
    "@coreui/coreui": "^2.0.2",
    "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
    "@coreui/icons": "0.2.0",
    "@coreui/react": "^2.0.4",
    "axios": "^0.18.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2017": "^6.24.1",
    "babel-preset-flow": "^6.23.0",
    "babel-preset-react": "^6.24.1",
    "bootstrap": "^4.1.1",
    "chart.js": "^2.7.2",
    "chartjs-plugin-datalabels": "^0.4.0",
    "classnames": "^2.2.6",
    "copy-webpack-plugin": "^4.0.1",
    "core-js": "^2.5.7",
    "date-range-for-react": "^1.0.9",
    "draft-js": "^0.10.5",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "flag-icon-css": "^3.0.0",
    "font-awesome": "^4.7.0",
    "humps": "^2.0.1",
    "img-loader": "^3.0.0",
    "immutable": "^4.0.0-rc.9",
    "lodash": "^4.17.10",
    "numeral": "^2.0.6",
    "paginator": "^1.0.0",
    "prop-types": "^15.6.2",
    "react": "^16.4.2",
    "react-bootstrap": "^0.32.3",
    "react-bootstrap-table-next": "^1.2.0",
    "react-bootstrap-table2-paginator": "^1.0.2",
    "react-chartjs-2": "^2.7.2",
    "react-ckeditor-component": "^1.1.0",
    "react-click-outside": "github:tj/react-click-outside",
    "react-confirm-alert": "^2.0.5",
    "react-datepicker": "^1.5.0",
    "react-dialog": "^1.0.2",
    "react-dom": "^16.4.1",
    "react-flip-move": "^3.0.2",
    "react-images-upload": "^1.2.2",
    "react-input-slider": "^4.0.1",
    "react-loadable": "^5.4.0",
    "react-mde": "^5.8.0",
    "react-paginate": "^5.2.4",
    "react-router-config": "^1.0.0-beta.4",
    "react-router-dom": "^4.3.1",
    "react-router-with-props": "^0.1.3",
    "react-select": "^2.0.0",
    "react-select-me": "^0.10.3",
    "react-table": "^6.8.6",
    "react-test-renderer": "^16.4.1",
    "react-timezone": "^2.1.0",
    "react-toastr": "^3.0.0",
    "react-toasts": "^2.0.13",
    "react-validation": "^3.0.7",
    "reactjs-toastr": "^1.1.0",
    "reactstrap": "^6.1.0",
    "showdown": "^1.8.6",
    "simple-line-icons": "^2.4.1",
    "validator": "^10.6.0",
    "watch": "^1.0.2"
  },

[AllenFang]

@hungdev I think there's something wrong in the size per page dropdown.

this is online pagination table with bootstrap4.

You can see the my above example, the option button in size per page dropdown is not a "link" style. i noticed that when the mouse over to the button text, it's seems become a hyper link. I think it's not a bug in react-bootstrap-table2, it probably cause by your customization of pagination or size per page dropdown. or maybe there're some wrong styling was including. Please check it again. thanks

[hungdev]

@AllenFang
after removing option in paginationFactory, it still errors.

            <BootstrapTable
              keyField='id'
              data={this.state.products}
              columns={columns((rs) => this.viewAction(rs))}
              className='table'
              pagination={paginationFactory()}
            />

[AllenFang]

@hungdev I believe it's not about paginationFactory. As I said, there're some problem in your styleing. How about you give me an online demo, I probably can help you debug...

[hungdev]

@AllenFang I created an online example. But it seems not to work with style. Please review for me.
https://stackblitz.com/edit/react-egjsge

[hungdev]

thank for your support.
I fixed that issue by adding bootstrap4={true}.
But when i press to the number of rows, it navigates to index (#). How to disable navigate?
And another question: How to style Pagination to right like position in the image?.
Thank you.@AllenFang

the online demo: https://stackblitz.com/edit/react-egjsge

[AllenFang]

@hungdev about the styling the position, currently it's limited to do it. However, I encourage you to make some changes on CSS or class.

How to disable navigate?

It's default element structure from bootstrap 4 and it perform the dropdown option with a li > a.