Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Ykseew opened this issue Sep 22, 2023 · 3 comments
Closed

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

Ykseew opened this issue Sep 22, 2023 · 3 comments
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@Ykseew
Copy link

Ykseew commented Sep 22, 2023

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.
@Ykseew Ykseew added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Sep 22, 2023
@ES-Six
Copy link

ES-Six commented Oct 13, 2023

Got this inconsistency too.

@ES-Six
Copy link

ES-Six commented Dec 7, 2023

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

@mertsincan
Copy link
Member

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding!
Best Regards,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Development

No branches or pull requests

3 participants