Skip to content

Commit

Permalink
Prevent longer values from line breaks in dropdowns
Browse files Browse the repository at this point in the history
Longer values in the person subtype menu, like Organization,
were displaying with a line break. In some browsers, like MS Edge,
max-content seems to work. But in Firefox and Safari, the 50%
on the col-6 seems to override the content.
  • Loading branch information
cbrandtbuffalo committed Dec 17, 2024
1 parent 7118a67 commit 3f1df7f
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 2 deletions.
4 changes: 2 additions & 2 deletions share/html/Search/Elements/SelectPersonType
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
%#
%# END BPS TAGGED BLOCK }}}
<div class="row my-0">
<div class="col-<% $Suffix ? 12 : 6 %>">
<div class="col-<% $Suffix ? 12 : 6 %> <% $Suffix ? '' : 'rt-search-person-type' %>">

<select id="<%$Name%>" name="<%$Name%>" class="form-select selectpicker">
% if ($AllowNull) {
Expand All @@ -69,7 +69,7 @@
</div>

% if (!$Suffix) {
<div class="col-6">
<div class="col-6 rt-search-person-subtype">
% my $Name = $Name . 'SubType';
<select id="<%$Name%>" name="<%$Name%>" class="form-select selectpicker">
% foreach my $subtype (@subtypes) {
Expand Down
10 changes: 10 additions & 0 deletions share/static/css/elevator/tom-select-rt.css
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,16 @@ div.ts-dropdown {
min-width: 100%;
}

/* max-content above doesn't work in the query builder dropdowns
in all browsers. Set a min-width manually to prevent values from
wrapping in the opened dropdown. */

div.rt-search-person-type .ts-dropdown .ts-dropdown-content,
div.rt-search-person-subtype .ts-dropdown .ts-dropdown-content
{
min-width: 130px;
}

[data-bs-theme=dark] {
.ts-wrapper {
background-color: #323D42 !important;
Expand Down

0 comments on commit 3f1df7f

Please sign in to comment.