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

has-float-label class apply on all labels #21

Open
NicosKaralis opened this issue Sep 20, 2017 · 1 comment
Open

has-float-label class apply on all labels #21

NicosKaralis opened this issue Sep 20, 2017 · 1 comment

Comments

@NicosKaralis
Copy link

NicosKaralis commented Sep 20, 2017

This code worked fine in version 1.0.0, now in version 1.0.2 it breaks

<div class="col-xs-12">
  <div class="form-group has-float-label">
    <input type="text" name="username" id="username" class="form-control" placeholder=" ">
    <label class="control-label" for="username">Username</label>
    <span class="help-block"> Help message </span>
  </div>
</div>

Aparently, this change scss/_mixins.scss#L6 made all spans inside a .has-float-label element become a float label, when it shouldn't

Can someone explain to me why this change was made? And why it was needed?

In my application we have a lot of fields, all of them using float label. We had been using v1.0.0, but a new dependency made v1.0.2 required and this bug appeared.

I know I can change the spans to p but how could I solve this without messing with the current HTML?

@vn2706
Copy link

vn2706 commented Oct 3, 2023

The change you mentioned in the SCSS mixins file has likely affected the behavior of the float label in your HTML elements. This change might have been made for various reasons, including improving compatibility with other CSS frameworks or addressing specific use cases. Without the exact context of the change, it's challenging to provide a specific explanation.

However, if you're experiencing issues with float labels in version 1.0.2 that were not present in version 1.0.0, and you don't want to change your HTML structure, you can try the following approaches to address the problem:

  1. Override the CSS:
    You can override the CSS styles that are causing the float label behavior for the span elements inside the .has-float-label elements. For example, if the float label styles are being applied to all span elements, you can specifically target the span elements inside your .help-block elements to exclude them from the float label styles. Here's an example of how you might do this:

css
.has-float-label .help-block span {
/* Reset styles here to remove float label behavior */
}
This approach allows you to keep your existing HTML structure intact.

  1. Contact the Library Maintainers:
    If the change in the library has caused issues for your specific use case, consider reaching out to the maintainers of the library (if it's open source) to discuss the problem and see if there's a recommended solution or if they plan to address it in a future release.

  2. Consider a Temporary Downgrade:
    If the issue is blocking your application's functionality and there is no immediate solution, you might consider temporarily downgrading to version 1.0.0 until a fix or workaround becomes available.

Remember that when working with CSS and third-party libraries, updates can sometimes introduce unexpected behavior. Customizing the CSS is often the quickest way to address such issues while maintaining your existing HTML structure.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants