Matrix question width

R/ui.R

@@ -630,6 +630,10 @@ to_snake_case <- function(text) {
 #' @param yml Character string. The name of the YAML file to load question configurations from.
 #' Defaults to `"questions.yml"`. Custom YAML files can be specified, either in
 #' the root directory or subdirectories (e.g., `"folder/custom.yml"`).
+#' @param matrix_question_width Character string. The width of the matrix question column.
+#' Defaults to `"50%"`.
+#' @param matrix_option_width Character string. The width of the matrix option column.
+#' Defaults to `NULL`.
 #' @param ... Additional arguments, often specific to different input types.
 #' Examples include `pre`, `sep`, `step`, and `animate` for `"slider"` and
 #' `"slider_numeric"` question types, etc.
@@ -705,6 +709,8 @@ sd_question <- function(
   row = NULL,
   default = NULL,
   yml = "questions.yml",
+  matrix_question_width = "50%",
+  matrix_option_width = NULL,
   ...
 ) {
   # Handle option/options alias
@@ -1292,6 +1298,21 @@ sd_question <- function(
       shiny::tags$script(htmltools::HTML(js_init))
     )
   } else if (type == "matrix") {
+    # Calculate option column widths if not provided
+    if (is.null(matrix_option_width)) {
+      # Distribute remaining width equally among option columns
+      remaining_width <- 100 - as.numeric(gsub("%", "", matrix_option_width))
+      matrix_option_width <- paste0(remaining_width / length(option), "%")
+    }
+    # Create colgroup element
+    colgroup <- shiny::tags$colgroup(
+        # First column for questions
+        shiny::tags$col(style = paste0("width: ", matrix_question_width, ";")),
+        # Remaining columns for option
+        lapply(seq_along(option), function(i) {
+            shiny::tags$col(style = paste0("width: ", matrix_option_width, ";"))
+        })
+    )
     header <- shiny::tags$tr(
       shiny::tags$th(""),
       lapply(names(option), function(opt) shiny::tags$th(opt))
@@ -1319,6 +1340,7 @@ sd_question <- function(
       shiny::tags$label(class = "control-label", label),
       shiny::tags$table(
         class = "matrix-question",
+        colgroup,
         header,
         shiny::tags$tbody(rows)
       )

inst/css/surveydown.css

@@ -290,7 +290,10 @@ a:hover {
 /* Matrix question styling */
 .matrix-question-container {
     width: 100%;
+    max-height: 70vh;
     overflow-x: auto;
+    overflow-y: auto;
+    margin-bottom: 2rem;
 }
 
 .matrix-question-container .form-group {
@@ -319,9 +322,13 @@ a:hover {
 }
 
 .matrix-question th {
-    background-color: transparent;
+    background-color: #f9f9f9;
     font-weight: bold;
     font-size: 18px;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-shadow: 0 2px 3px rgba(0,0,0,0.1);
 }
 
 .table {