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.

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

[v2.0] Image Picker - An image is shifted to the next line even though there is enough space to render it on the same line #9524

Closed
JaneSjs opened this issue Feb 26, 2025 · 0 comments · Fixed by #9527
Assignees
Labels

Comments

@JaneSjs
Copy link
Contributor

JaneSjs commented Feb 26, 2025

To reproduce the issue, run the following survey:

{
  "pages": [
    {
      "name": "page1",
      "elements": [
        {
          "type": "imagepicker",
          "name": "animals",
          "title": "Which animals would you like to see in real life?",
          "description": "Please select all that apply.",
          "isRequired": true,
          "choices": [
            {
              "value": "lion",
              "text": "Lion",
              "imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg"
            },
            {
              "value": "giraffe",
              "text": "Giraffe",
              "imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/giraffe.jpg"
            },
            {
              "value": "red-panda",
              "text": "Red panda",
              "imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/panda.jpg"
            },
            {
              "value": "camel",
              "text": "Camel",
              "imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/camel.jpg"
            }
          ],
          "showLabel": true,
          "multiSelect": true
        },
        {
          "type": "matrixdropdown",
          "name": "question1",
          "columns": [
            {
              "name": "Column 1"
            },
            {
              "name": "Column 2"
            },
            {
              "name": "Column 3"
            }
          ],
          "choices": [
            1,
            2,
            3,
            4,
            5
          ],
          "rows": [
            "Row 1",
            "Row 2"
          ]
        }
      ]
    }
  ]
}

The fourth image appears on a new line even though there is enough space for it to be rendered on the same line:

Image

The following survey produces the expected output:

{
  "pages": [
    {
      "name": "page1",
      "elements": [
        {
          "type": "imagepicker",
          "name": "animals",
          "title": "Which animals would you like to see in real life?",
          "description": "Please select all that apply.",
          "isRequired": true,
          "choices": [
            {
              "value": "lion",
              "text": "Lion",
              "imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg"
            },
            {
              "value": "giraffe",
              "text": "Giraffe",
              "imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/giraffe.jpg"
            },
            {
              "value": "red-panda",
              "text": "Red panda",
              "imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/panda.jpg"
            },
            {
              "value": "camel",
              "text": "Camel",
              "imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/camel.jpg"
            }
          ],
          "showLabel": true,
          "multiSelect": true
        },
        {
          "type": "matrixdropdown",
          "name": "question1",
          "columns": [
            {
              "name": "Column 1"
            },
            {
              "name": "Column 2"
            },
            {
              "name": "Column 3"
            }
          ],
          "choices": [
            1,
            2,
            3,
            4,
            5
          ],
          "rows": [
            "Row 1",
            "Row 2"
          ]
        },
        {
          "type": "matrixdropdown",
          "name": "question2",
          "columns": [
            {
              "name": "Column 1"
            },
            {
              "name": "Column 2"
            },
            {
              "name": "Column 3"
            }
          ],
          "choices": [
            1,
            2,
            3,
            4,
            5
          ],
          "rows": [
            "Row 1",
            "Row 2"
          ]
        },
        {
          "type": "matrixdropdown",
          "name": "question3",
          "columns": [
            {
              "name": "Column 1"
            },
            {
              "name": "Column 2"
            },
            {
              "name": "Column 3"
            }
          ],
          "choices": [
            1,
            2,
            3,
            4,
            5
          ],
          "rows": [
            "Row 1",
            "Row 2"
          ]
        }
      ]
    }
  ]
}

Image

@JaneSjs JaneSjs added the bug label Feb 26, 2025
@dk981234 dk981234 self-assigned this Feb 26, 2025
@dk981234 dk981234 linked a pull request Feb 26, 2025 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants