Rollup merge of #99086 - GuillaumeGomez:search-result-crate-filter-dropdown, r=notriddle
Fix display of search result crate filter dropdown In case a crate name is too long, the `<select>` completely overflows its parent. Another problem is that there is left margin on the `select` which break the alignment. You can see both issues here:  And with the fix:  cc `@jsha` r? `@notriddle`
This commit is contained in:
commit
ca51d325e8
@ -924,7 +924,6 @@ table,
|
||||
#crate-search {
|
||||
min-width: 115px;
|
||||
margin-top: 5px;
|
||||
margin-left: 0.25em;
|
||||
padding-left: 0.3125em;
|
||||
padding-right: 23px;
|
||||
border: 1px solid;
|
||||
@ -941,6 +940,8 @@ table,
|
||||
background-size: 20px;
|
||||
background-position: calc(100% - 1px) 56%;
|
||||
background-image: /* AUTOREPLACE: */url("down-arrow.svg");
|
||||
max-width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.search-container {
|
||||
margin-top: 4px;
|
||||
|
@ -10,3 +10,31 @@ size: (600, 100)
|
||||
// As counter-intuitive as it may seem, in this width, the width is "100%", which is why
|
||||
// when computed it's larger.
|
||||
assert-css: (".search-results div.desc", {"width": "570px"})
|
||||
|
||||
// Check that the crate filter `<select>` is correctly handled when it goes to next line.
|
||||
// To do so we need to update the length of one of its `<option>`.
|
||||
size: (900, 900)
|
||||
|
||||
// First we check the current width and position.
|
||||
assert-css: ("#crate-search", {"width": "222px"})
|
||||
compare-elements-position-near: (
|
||||
"#crate-search",
|
||||
"#search-settings .search-results-title",
|
||||
{"y": 5},
|
||||
)
|
||||
|
||||
// Then we update the text of one of the `<option>`.
|
||||
text: (
|
||||
"#crate-search option",
|
||||
"sdjfaksdjfaksjdbfkadsbfkjsadbfkdsbkfbsadkjfbkdsabfkadsfkjdsafa",
|
||||
)
|
||||
|
||||
// Then we compare again.
|
||||
assert-css: ("#crate-search", {"width": "640px"})
|
||||
compare-elements-position-near-false: (
|
||||
"#crate-search",
|
||||
"#search-settings .search-results-title",
|
||||
{"y": 5},
|
||||
)
|
||||
// And we check that the `<select>` isn't bigger than its container.
|
||||
assert-css: ("#search", {"width": "640px"})
|
||||
|
Loading…
x
Reference in New Issue
Block a user