Skip to content

Disable resizing the textarea in CollectionCreate modal #2974

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
merged 4 commits into from
Jun 5, 2024
Merged

Disable resizing the textarea in CollectionCreate modal #2974

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
93b0a17
Fix : [#2973] Edited CSS to resolve the issue.
Ri-Sharma Jan 28, 2024
55df16d
Fixed max-height issue
Ri-Sharma Jan 29, 2024
810bfb0
Fix Horizontal Scroll issue
Ri-Sharma Jan 31, 2024
25a8567
Merge branch 'develop' into Issue#2973
raclim Jun 5, 2024
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 client/modules/User/components/CollectionCreate.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const CollectionCreate = () => {
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder={t('CollectionCreate.DescriptionPlaceholder')}
rows="4"
rows="6"
/>
</p>
<Button type="submit" disabled={invalid}>
Expand Down
6 changes: 6 additions & 0 deletions client/styles/components/_collection-create.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,10 @@

.collection-create {
padding: #{math.div(24, $base-font-size)}rem;

@media (max-width: 650px) {
.form__input {
min-width: unset;
}
}
}
1 change: 1 addition & 0 deletions client/styles/components/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@

.form__input-flexible-height {
height: auto;
resize: none;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

}

.form__input::placeholder {
Expand Down
6 changes: 5 additions & 1 deletion client/styles/components/_overlay.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
max-height: 80%;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the style for ALL modal, not just "create collection", so we need to tread carefully here. There are some larger modals like "keyboard shortcuts" where the max-height is required. It makes it so that the modal itself is limited in height and forces the content section of the modal to have a scrollbar if the contents won't fit.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I apologize for the oversight, I failed to consider the potential utilization of this class for other modals.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lindapaiste, we can solve this issue using the :has() pseudo-class. I have made the commit you can check it.

max-width: 80%;
position: relative;
padding-bottom: #{math.div(25, $base-font-size)}rem;
padding-bottom: #{math.div(12, $base-font-size)}rem;

@media (max-width: 650px) {
max-width: 100%;
Expand All @@ -37,6 +37,10 @@
}
}

.overlay__body:has(.collection-create){
max-height: none;
}

.overlay__header {
display: flex;
justify-content: space-between;
Expand Down
Loading