Login form doesn't display fine when bootstrap4 style is enqueued

[eri-trabiccolo]

Need to enqueue bootstrap4 CSS or use a theme/plugin which enqueues it.

The user reporting this issue is using the theme Airi Theme which is based on bootstrap4 as far as I can see.

The issue resides on the fact that one of the llms form wrapper CSS classes is col-1 which in bootstrap4 is styled as following:
.col-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; }
which means that the form box width will take 8.3% of its container...

I think we need to "namespace" that class to avoid this kind of issues.

[thomasplevy]

I can't find any CSS in our stylesheets that use this class. I think it may have been used in v1 of LifterLMS and removed but the HTML was never updated.

My concern would be if 3rd party themes reference this class, if we change it, it will cause new issues.

I don't know the best way to deprecate a CSS class but that's probably what we should be doing here. Maybe adding an HTML comment above the <div> (source) stating the class will be removed in a future version of LifterLMS. This would prompt a template change which theme devs should be tracking, we could note the deprecation in the changelog and then in version 4.x (whenever that comes) we can remove the class "safely".

In the meantime I think we can either ignore this as a theme compatibility issue that can be resolved with more specific CSS in the child theme/customizer.

If it is a more widespread issue we can add that more specific CSS to a compatibility file in the codebase. I'd like to avoid this solution though.

[eri-trabiccolo]

I'm not sure how much bootstrap 4 is widespread as of now, but I think it will (and possibly future versions of bootstrap will still follow this pattern: they dropped the xs infix as bs is more and more mobile first).
I agree on the deprecation thing.

[thomasplevy]

but I think it will (and possibly future versions of bootstrap will still follow this pattern: they dropped the xs infix as bs is more and more mobile first).

You're probably right but in any event I'd like to hold on adding compatibility code to LifterLMS until we know it's a more widespread issue.

For now let's just add a deprecation of the class and keep an eye on it to see if there's more we should do in the future.

[monbro]

+1 having Bootstrap compatibility would be great. I got the same issue when loading bootstrap.

[thomasplevy]

@monbro are you a theme developer? If you're doing this from a theme can you let me know what theme you're using so I can gauge it's popularity. At this moment we're not planning on adding compatibility code but if there are some really well-used themes that this will make life easier for I'll consider it. Although if you are already supporting LifterLMS a small bit of CSS in the theme takes care of this.

[monbro]

Hey Thomas, I am a web dev, but not working on a prticular theme. Thank a lot for the feedback. I get the point. Thanks anyway so far for your great work on lifterLMS!

[eri-trabiccolo]

reported here too:
https://wordpress.org/support/topic/customization-need-on-purchase-form/

[zainirfani]

Dear Team, Thanks for cooperation, We resolve this Issue through our JUGAAD theory if you need how please visit this link
http://www.whatdigi.com/lifter-lms-resolving-lifter-lms-login-page-issue/