Skip to content

fix(aio): fix search box overlap for small devices #17075

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.

Sign up for GitHub

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

Merged
IgorMinar merged 1 commit into from
Jun 6, 2017
Merged

fix(aio): fix search box overlap for small devices #17075

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions aio/src/styles/1-layouts/_top-menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ md-toolbar.mat-toolbar {
}
}

aio-shell.sidenav-open {
aio-shell.page-home.sidenav-open {

@gkalpak gkalpak May 31, 2017

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why only on home page?

@sjtrimble sjtrimble Jun 1, 2017

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because the sidenav content drops below the non-transparent toolbar on all other pages.

@gkalpak gkalpak Jun 1, 2017

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This has nothing to do with the overlap (and the styles below will not "fix" it). The actual issue on the home page is that the top bar is transparent.

md-toolbar.mat-toolbar md-icon {
color: $mediumgray;
}
Expand All @@ -108,17 +108,17 @@ aio-search-box input {
background-color: $offwhite;
padding: 5px 16px;
margin-left: 8px;
width: 150px;
height: 40%;
width: 180px;
max-width: 240px;

@gkalpak gkalpak May 31, 2017

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the purpose of max-width here, since you already specified width?

@sjtrimble sjtrimble May 31, 2017

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So the animation doesn't pop out of it's 'box'.

@gkalpak gkalpak May 31, 2017

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see. You can remove the max-width: 240px from the @include bp(big) section below.

height: 50%;

@include bp(big) {
transition: width 0.4s ease-in-out;
&:focus {
width: 50%;
max-width: 240px;
}
}
@media (max-width: 480px) {
width: 180px;
width: 150px;
}
}