-
-
Save robrap/b4eedbacf69787c15b160f374f7b5f8d to your computer and use it in GitHub Desktop.
| .js-edx-header-ui .course-search-bar { | |
| position: absolute; | |
| left: 0; | |
| top: 77px; | |
| z-index: 9999; | |
| width: 100%; | |
| padding: 20px 60px; | |
| background-color: rgb(0, 125, 184); | |
| margin: 0; | |
| } | |
| .js-edx-header-ui .react-autosuggest__input { | |
| margin-left: 75px; | |
| padding-left: 15px; | |
| margin-right: 70px; | |
| padding-right: 15px; | |
| width: 90%; | |
| } | |
| .js-edx-header-ui .js-search-button { | |
| color: white; | |
| } | |
| /* | |
| This style is not getting applied so it has been added in JavaScript. | |
| .js-edx-header-ui .search-bar-label { | |
| color: white; | |
| font-weight: bold; | |
| } | |
| */ |
@AlasdairSwan: Thanks. I'm not sure how to make the selector any more specific. However, the !important worked.
@AlasdairSwan: Separately, one problem with the current CS is that the magnifying glass goes under the text box when the page gets too narrow. I could add additional padding, but then it will look like a lot of extra spacer on a wider screen.
@robrap could you attach a screenshot of what you mean re. the magnifying glass. I think you may need to adjust the widths of some of the top level containers.
@AlasdairSwan: You can try using this link to see it in action.
Here is a screenshot of the magnifying glass going under on a narrower screen.
I don't know how to have better control over the magnifying glass (.js-edx-header-ui .js-search-button) relative to the input box (.js-edx-header-ui .react-autosuggest__input). If I change the input box width to 87% (which is the current state), it fixes the overlap issue, but gets a wide gap on a large screen like the following:
I'm guessing this is an issue with specificity of the selector. I would recommend either making the selector more specific or using
!important