jgthms / bulma

Modern CSS framework based on Flexbox
https://bulma.io
MIT License
48.77k stars 3.93k forks source link

Combining file input with .has-addons #3810

Open muellerj opened 1 month ago

muellerj commented 1 month ago

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework I'm using Bulma version v1.0.0 I am sure this issue is not a duplicate!

Description

When trying to combine a file input with a .has-addons button, the corners are rounded.

Steps to Reproduce

    .panel-block
      .control
        label.label Upload File
        .control
          .field.has-addons
            .control.is-expanded
              .file.has-name.is-fullwidth
                label.file-label
                  input.file-input#file-input type="file" name="uploadfile"
                  span.file-cta.has-icon-mobile
                    span.file-icon: i.fas.fa-upload
                    span.file-label.is-hidden-mobile Choose a file...
                  span.file-name#file-name
            .control
              button.button.is-success.has-icon-mobile#submit-upload 
                span.icon: i.fas.fa-angle-right
                span.is-hidden-mobile Upload

Expected behavior

No rounded corners between the two adjacent elements.

Actual behavior

Screenshot 2024-05-01 at 16 25 16

muellerj commented 2 weeks ago

FWIW: This is how I've fixed it locally:

.field.has-addons .file .file-name {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}