VyLala commited on
Commit
1cb3515
·
verified ·
1 Parent(s): 655ee38

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +14 -4
app.py CHANGED
@@ -119,13 +119,22 @@ css = """
119
  #nps-container h3 {
120
  color: #fff;
121
  margin-bottom: 20px; /* Space between question and buttons */
 
122
  }
123
 
124
- /* This is the key change: Target the radio group directly and force its layout */
125
- #nps-container > .gr-row > div > div {
 
 
 
 
 
 
 
 
 
126
  display: flex !important;
127
  justify-content: space-between !important;
128
- width: 100% !important;
129
  }
130
 
131
  /* Styling for each individual button */
@@ -142,6 +151,7 @@ css = """
142
  cursor: pointer;
143
  transition: background-color 0.2s ease;
144
  font-size: 14px;
 
145
  }
146
 
147
  #nps-radio-container .gr-radio-label:hover {
@@ -279,7 +289,7 @@ with gr.Blocks() as interface:
279
  with gr.Group(elem_id="nps-container"):
280
  gr.Markdown("### How likely are you to recommend this tool to a colleague or peer?")
281
  # # Use gr.Radio to create clickable buttons
282
- with gr.Column(elem_id="nps-buttons-container"):
283
  nps_radio = gr.Radio(
284
  choices=[str(i) for i in range(11)],
285
  label="Select score:",
 
119
  #nps-container h3 {
120
  color: #fff;
121
  margin-bottom: 20px; /* Space between question and buttons */
122
+ text-align: center; /* Center the question text */
123
  }
124
 
125
+ /* Flexbox container for the radio buttons */
126
+ #nps-radio-container {
127
+ width: 100%;
128
+ display: flex;
129
+ justify-content: space-between;
130
+ align-items: center;
131
+ }
132
+
133
+ /* Ensure the inner Gradio radio group stretches to fill the container */
134
+ #nps-radio-container > div.gr-radio-group {
135
+ width: 100% !important;
136
  display: flex !important;
137
  justify-content: space-between !important;
 
138
  }
139
 
140
  /* Styling for each individual button */
 
151
  cursor: pointer;
152
  transition: background-color 0.2s ease;
153
  font-size: 14px;
154
+ margin: 0; /* Remove default button margins */
155
  }
156
 
157
  #nps-radio-container .gr-radio-label:hover {
 
289
  with gr.Group(elem_id="nps-container"):
290
  gr.Markdown("### How likely are you to recommend this tool to a colleague or peer?")
291
  # # Use gr.Radio to create clickable buttons
292
+ with gr.Column(elem_id="nps-radio-container"):
293
  nps_radio = gr.Radio(
294
  choices=[str(i) for i in range(11)],
295
  label="Select score:",