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

Single-Select Matrix columns' width incorrect #9377

Closed
Anonym271 opened this issue Jan 30, 2025 · 2 comments
Closed

Single-Select Matrix columns' width incorrect #9377

Anonym271 opened this issue Jan 30, 2025 · 2 comments
Assignees
@JaneSjs
Labels
question user issue An issue or bug reported by users

Comments

@Anonym271
Copy link

Describe the bug
The minimum width of individual columns for Single-Select Matrix questions is calculated too high. Overriding the minimum column width value in the SurveyDesigner UI or in the JSON data does not change anything (only if you increase it beyond the calculated value - which is the opposite of what is needed).

Steps to reproduce

  1. Create a new Survey width static width set to 800px.
  2. Add a Single-Select Matrix Question with at least 5 columns with very short titles (e.g. 1, 2, 3, 4, 5)
  3. (optional) Add some rows with long text and therefore increase row header width to 250px

Now only the first 3 columns are visible while the gap between each radio button is incredibly large.

Expected behavior
The columns should automatically be compressed to a width that allows all columns to be visible.

Screenshots
Observed:
Image
There are 5 columns defined but only 3 are visible because of the large gap between them.

Expected:
Image
All 5 columns should be visible because they can easily fit on the screen.

CSS in Firefox Dev-Tools:
Image
Researching in my browser's dev tools shows that the following CSS property is causing the problem:

.sd-table__cell:not(.sd-table__cell--empty):not(.sd-table__cell--actions):not(:empty) {
  min-width:calc(15*(var(--sjs-base-unit, var(--base-unit, 8px))));
}

Please complete the following information:

  • Browser: Firefox, Chrome, Edge (tried all 3)
  • Browser version: Firefox 134.0.2
  • JS framework/library: Vanilla JS
  • SurveyJS version: v1.12.21
  • Device: PC

Additional context
This is not just a Designer UI problem, the result stays the same if I include the produced JSON in my own webpage.

Webpage HTML for reference:

<!DOCTYPE html>
<html>
    <head>
        <!-- jQuery -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        <!-- surveyjs -->
        <link href="https://unpkg.com/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet">
        <script type="text/javascript" src="https://unpkg.com/survey-core/survey.core.min.js"></script>
        <script type="text/javascript" src="https://unpkg.com/survey-js-ui/survey-js-ui.min.js"></script>
        <!-- own stuff -->
        <script type="text/javascript" src="index.js"></script>
    </head>

    <body>
        <div id="survey-container"></div>
    </body>
</html>
@JaneSjs JaneSjs self-assigned this Feb 4, 2025
@JaneSjs JaneSjs added question user issue An issue or bug reported by users labels Feb 4, 2025
@JaneSjs JaneSjs removed their assignment Feb 4, 2025
@JaneSjs
Copy link
Contributor

JaneSjs commented Feb 4, 2025

Hi @Anonym271,
Thank you for reporting this issue. In the meantime, a matrix doesn't have an option to decrease a column's width. I'll discuss this usage scenario with our developers.
View Demo

@JaneSjs JaneSjs self-assigned this Feb 5, 2025
@JaneSjs
Copy link
Contributor

JaneSjs commented Feb 5, 2025

Hi @Anonym271,
I discussed this issue with our developers. Unfortunately, a single-select matrix doesn't have an option to decrease a column width. You can decrease the width using CSS.

@JaneSjs JaneSjs closed this as completed Feb 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@JaneSjs JaneSjs

Labels
question user issue An issue or bug reported by users
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@JaneSjs @Anonym271