Skip to content

Input group field style #69

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
bshand merged 2 commits into from
Mar 7, 2025
Merged

Input group field style #69

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
30e0748
fix input group UI style in form and readonly mode
suezhou Mar 6, 2025
45e8dea
update changelog
suezhou Mar 6, 2025
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
2 changes: 1 addition & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
## [Unreleased]
* no unreleased changes *
* fix input group UI style in form and readonly mode

## 5.0.2 / 2025-03-02
### Fixed
Expand Down
50 changes: 34 additions & 16 deletions app/assets/stylesheets/ndr_ui/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,28 +12,46 @@ $bootstrap-icons-font-dir: ".";
}
}

// for input fields with input-addons, remove background and border when the form is readonly.
.input-group {
.form-control-plaintext + .input-group-text {
background: none;
border:0;
}
}

// UI fix for .input-group in readonly mode
// UI fix for form element in .input-group
form .input-group {
// for input-addons in readonly mode, remove background and border
.form-control-plaintext + .input-group-text,
.input-group-text:has(+ .form-control-plaintext) {
background: none;
border:0;
}

// for readonly fields following or followed by input-addons, set auto width to display content in one line
.form-control-plaintext:has(+ .input-group-text),
.input-group-text + .form-control-plaintext {
width: auto;
}

// for input-addons in readonly mode, reserve the border style for plain text and add more spacing on both sides
> .form-control-plaintext:has(+ .input-group-text),
> .input-group-text + .form-control-plaintext {
border: var(--bs-border-width) solid var(--bs-border-color);
padding-left: 8px;
padding-right: 8px;
}

// BS radius fix for elements in .input-group, as we added `.has-validation` class to .input-group by default
// remove right radius if an element is followed by another
// > .form-control in edit mode
.form-control:has(+ .input-group-text),
.input-group-text:has(+ .form-control) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
// > .form-control-plaintext in readonly mode
.form-control-plaintext:has(+ .input-group-text),
.input-group-text:has(+ .form-control-plaintext) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

// as a general global fix, ensure correct radius on first and last element
> :first-child {
border-top-left-radius: var(--bs-border-radius);
border-bottom-left-radius: var(--bs-border-radius);
}
> :last-child {
border-top-right-radius: var(--bs-border-radius);
border-bottom-right-radius: var(--bs-border-radius);
}
}

// Bootstrap don't have btn-default anymore
Expand Down