Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

md-progress-linear: CSS conflicts with md-autocomplete #3109

Closed
Barnabas opened this issue Jun 3, 2015 · 1 comment
Closed

md-progress-linear: CSS conflicts with md-autocomplete #3109

Barnabas opened this issue Jun 3, 2015 · 1 comment

Comments

@Barnabas
Copy link

Barnabas commented Jun 3, 2015

When the linear progress bar displays while the autocomplete is in the middle of a query, the progress bar appears to the right of the input box, like this:

autocomplete-progress-position

I found this on Chrome 43.0.2357.81 and in Angular Material 0.9.7.

The root cause is that the selector which sets CSS position to "relative" for the indeterminate progress bar (md-progress-linear[md-mode="indeterminate"]) is more specific than the progress bar in the autocomplete control (md-autocomplete md-autocomplete-wrap md-progress-linear).

The rewrite of the animation for indeterminate mode introduced this CSS property (1d478eb, line 67), but I believe that it's unnecessary. The "relative" position of the child md-container should be sufficient. An alternate fix is to make the CSS selector in the autocomplete CSS more specific, as in md-autocomplete md-autocomplete-wrap md-progress-linear[md-mode="indeterminate"].

In the meantime, the workaround is to add the following CSS:

md-autocomplete md-autocomplete-wrap md-progress-linear[md-mode="indeterminate"] {
    position:absolute;
}
@Barnabas
Copy link
Author

Barnabas commented Jun 8, 2015

Looks like addressed in #3115

@Barnabas Barnabas closed this as completed Jun 8, 2015
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant