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
Fix search bar buttons on very small screens #1243
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
could you double check that this works on ie11 as well, if you haven't already? specifically with a ui refresh site
Good call. I just tested it and it didn't work with ie11 so I'm going to look into an alternative solution. The UI refresh without this change does work on IE11 |
Update: Discussed offline. The change does in fact work in IE11. The issue I was seeing was a separate CORS issue that occurred because how how I was serving the SDK locally. (SLAP-1024) |
@@ -121,6 +121,7 @@ $searchbar-button-text-color-active: var(--yxt-searchbar-button-text-color-base) | |||
&-clear | |||
{ | |||
display: flex; | |||
flex-shrink: 0; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since we removed the flex-grow
from &-input
is this still necessary?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I tested this PR without flex-shrink it and the buttons still shrink at low resolutions. The buttons and the search bar elements are all flex items because their parent (the search bar form) has display: flex;
set. By default the flex items have a flex-shrink of 1, which makes them susceptible to shrinking. Setting flex-shrink to 0 prevents that.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lgtm pending tom!
Fix the search bar styling so that the buttons don't disappear on small screens On screens with very small widths (<350px width), the search bar clear and search buttons shrink and eventually disappear as the screen width decreases. This PR prevents the buttons from shrinking and disappearing on very small screens. J=SLAP-999 TEST=visual Build a site and view it at various sizes between 300px and 400px wide and confirm that the search bar buttons no longer shrink or disappear. Test on a browswerstack iphone 8 with safare and on a windows laptop on IE11.
Fix the search bar styling so that the buttons don't disappear on small screens On screens with very small widths (<350px width), the search bar clear and search buttons shrink and eventually disappear as the screen width decreases. This PR prevents the buttons from shrinking and disappearing on very small screens. J=SLAP-999 TEST=visual Build a site and view it at various sizes between 300px and 400px wide and confirm that the search bar buttons no longer shrink or disappear. Test on a browswerstack iphone 8 with safare and on a windows laptop on IE11.
Fix the search bar styling so that the buttons don't disappear on small screens On screens with very small widths (<350px width), the search bar clear and search buttons shrink and eventually disappear as the screen width decreases. This PR prevents the buttons from shrinking and disappearing on very small screens. J=SLAP-999 TEST=visual Build a site and view it at various sizes between 300px and 400px wide and confirm that the search bar buttons no longer shrink or disappear. Test on a browswerstack iphone 8 with safare and on a windows laptop on IE11.
Fix the search bar styling so that the buttons don't disappear on small screens On screens with very small widths (<350px width), the search bar clear and search buttons shrink and eventually disappear as the screen width decreases. This PR prevents the buttons from shrinking and disappearing on very small screens. J=SLAP-999 TEST=visual Build a site and view it at various sizes between 300px and 400px wide and confirm that the search bar buttons no longer shrink or disappear. Test on a browswerstack iphone 8 with safare and on a windows laptop on IE11.
Fix the search bar styling so that the buttons don't disappear on small screens On screens with very small widths (<350px width), the search bar clear and search buttons shrink and eventually disappear as the screen width decreases. This PR prevents the buttons from shrinking and disappearing on very small screens. J=SLAP-999 TEST=visual Build a site and view it at various sizes between 300px and 400px wide and confirm that the search bar buttons no longer shrink or disappear. Test on a browswerstack iphone 8 with safare and on a windows laptop on IE11.
Fix the search bar styling so that the buttons don't disappear on small screens On screens with very small widths (<350px width), the search bar clear and search buttons shrink and eventually disappear as the screen width decreases. This PR prevents the buttons from shrinking and disappearing on very small screens. J=SLAP-999 TEST=visual Build a site and view it at various sizes between 300px and 400px wide and confirm that the search bar buttons no longer shrink or disappear. Test on a browswerstack iphone 8 with safare and on a windows laptop on IE11.
### Bug Fixes - Fixed a styling bug that caused the search bar buttons to disappear on small screens. (#1243) - When a spell check query suggestion is clicked, the proper `queryTrigger` is now sent. (#1230) - Fixed some small typos about the `SearchBar` configuration in the README. (#1229) - Fixed a small race condition that occurred when the `ANSWERS` instance was loaded on the page before the `templateBundle`. (#1305)
Fix the search bar styling so that the buttons don't disappear on small screens
On screens with very small widths (<350px width), the search bar clear and search buttons shrink and eventually disappear as the screen width decreases. This PR prevents the buttons from shrinking and disappearing on very small screens.
J=SLAP-999
TEST=visual
Build a site and view it at various sizes between 300px and 400px wide and confirm that the search bar buttons no longer shrink or disappear. Test on a browswerstack iphone 8 with safari and on a windows laptop on IE11.