primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
10.62k stars 4.63k forks source link

InputNumber isn't the same size as other fields on theme bootstrap #13715

Open Ykseew opened 1 year ago

Ykseew commented 1 year ago

As depicted in the screenshot, it appears that the input number field is larger in size compared to the other fields when utilizing a Bootstrap theme.

image

You can see the issue on the stackblitz associated.

Themes with the issue : primeng/resources/themes/bootstrap4-light-blue/theme.css primeng/resources/themes/bootstrap4-light-purple/theme.css primeng/resources/themes/bootstrap4-dark-blue/theme.css primeng/resources/themes/bootstrap4-dark-purple/theme.css

Thanks.

Environment

PrimeNGDoc, Google Chrome Latest version, Opera latest version Windows 10.

Reproducer

https://stackblitz.com/edit/ibmm32?file=src%2Fapp%2Fdemo%2Finput-number-buttons-demo.html,src%2Fapp%2Fdemo%2Finput-number-buttons-demo.scss

Angular version

16.2.0

PrimeNG version

16.3.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.18.0

Steps to reproduce the behavior

Try with the stackblitz : https://stackblitz.com/edit/ibmm32?file=src%2Fapp%2Fdemo%2Finput-number-buttons-demo.html,src%2Fapp%2Fdemo%2Finput-number-buttons-demo.scss

OR

  1. go on : https://primeng.org/inputnumber
  2. Put any bootstrap theme
  3. Scroll down to see the inputnumber field.
ES-Six commented 1 year ago

Got this inconsistency too.

ES-Six commented 11 months ago

That's too bad this issue is not corrected by the PrimeNG team because it's a simple scss fix like this :

Need to put this in the primeng bootstrap theme : https://github.com/primefaces/primeng-sass-theme/tree/main/themes/bootstrap4

.p-inputnumber-buttons-stacked {
    .p-inputnumber-button-group {
        .p-button.p-inputnumber-button {
            flex: 1 1 auto;
            height: 1rem; // <--- ADDED
        }
    }
}