Skip to content
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

Jump to bottom

Advanced Header: A header image becomes too small because the header height is decreased on smartphones #8797

Closed
JaneSjs opened this issue Sep 9, 2024 · 1 comment · Fixed by #8820 or surveyjs/survey-creator#5905
Closed

Advanced Header: A header image becomes too small because the header height is decreased on smartphones #8797

JaneSjs opened this issue Sep 9, 2024 · 1 comment · Fixed by #8820 or surveyjs/survey-creator#5905
Assignees
@tsv2013
Labels
bug mobile/tablet user issue An issue or bug reported by users
Milestone
v1.12.3

Comments

@JaneSjs
Copy link
Contributor

JaneSjs commented Sep 9, 2024

T19739 - Header Height can't be set for mobile (responsive)
https://surveyjs.answerdesk.io/internal/ticket/details/T19739

View Demo
Current output on a desktop:
image

Current output on a mobile.
image

Expected output: a header has a bigger height and an image is well-distinguished on smaller screens.
(view a small W/A)

image
@JaneSjs JaneSjs added bug user issue An issue or bug reported by users mobile/tablet labels Sep 9, 2024
@JaneSjs JaneSjs changed the title Advanced Header - The backgroundImageFit: "contain" makes a header image undistinguishable on a mobile [Urgent] Advanced Header - The backgroundImageFit: "contain" makes a header image undistinguishable on a mobile Sep 9, 2024
@JaneSjs JaneSjs changed the title [Urgent] Advanced Header - The backgroundImageFit: "contain" makes a header image undistinguishable on a mobile [Urgent] Advanced Header - The header height is decreased on a mobile and a header image is undistinguishable Sep 10, 2024
@OlgaLarina OlgaLarina assigned JaneSjs and unassigned tsv2013 Sep 10, 2024
@OlgaLarina OlgaLarina changed the title [Urgent] Advanced Header - The header height is decreased on a mobile and a header image is undistinguishable Advanced Header - The header height is decreased on a mobile and a header image is undistinguishable Sep 10, 2024
@JaneSjs JaneSjs assigned tsv2013 and unassigned OlgaLarina and JaneSjs Sep 17, 2024
tsv2013 pushed a commit to surveyjs/survey-creator that referenced this issue Sep 18, 2024
Fixed surveyjs/survey-library#8797 - Advanced Header - The header hei…
ec83c75 
…ght is decreased on a mobile and a header image is undistinguishable
tsv2013 pushed a commit that referenced this issue Sep 18, 2024
Fixed #8797 - Advanced Header - The header height is decreased on a m…
2a0daee 
…obile and a header image is undistinguishable
This was linked to pull requests Sep 18, 2024
Fixed https://github.com/surveyjs/survey-library/issues/8797 - Advanced Header - The header height is decreased on a mobile and a header image is undistinguishable #8820
Merged
Fixed https://github.com/surveyjs/survey-library/issues/8797 - Advanced Header - The header height is decreased on a mobile and a header image is undistinguishable surveyjs/survey-creator#5905
Merged
dk981234 pushed a commit that referenced this issue Sep 19, 2024
@tsv2013
Fixed #8797 - Advanced Header - The header height is decreased on a m…
3123a08 
…obile and a header image is undistinguishable (#8820)

Co-authored-by: tsv2013 <tsv2013@noreply.github.com>
@OlgaLarina OlgaLarina added this to the v1.12.3 milestone Sep 19, 2024
tsv2013 added a commit to surveyjs/survey-creator that referenced this issue Sep 19, 2024
@tsv2013
Fixed surveyjs/survey-library#8797 - Advanced Header - The header hei…
5bbe9cf 
…ght is decreased on a mobile and a header image is undistinguishable (#5905)

* Fixed surveyjs/survey-library#8797 - Advanced Header - The header height is decreased on a mobile and a header image is undistinguishable

* Fixed tests

---------

Co-authored-by: tsv2013 <tsv2013@noreply.github.com>
@RomanTsukanov RomanTsukanov changed the title Advanced Header - The header height is decreased on a mobile and a header image is undistinguishable Advanced Header: A header image becomes too small because the header height is decreased on smartphones Sep 24, 2024
@JaneSjs
Copy link
Contributor Author

JaneSjs commented Sep 25, 2024 •
edited
Loading

With v1.12.3 and newer, use the mobileHeight header property to define the height of a form header in mobile mode.
A survey theme:

"header": {
   "height": 500,
   "mobileHeight": 150,

View Plunker.
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@tsv2013 tsv2013

Labels
bug mobile/tablet user issue An issue or bug reported by users
Projects
None yet
Milestone
v1.12.3
3 participants
@tsv2013 @OlgaLarina @JaneSjs