In the visual provided, there is a survey with extended answer text requiring multiple rows for each response. My goal is to align these rows so that they match up with the initial row of each answer. Is this achievable?
In the visual provided, there is a survey with extended answer text requiring multiple rows for each response. My goal is to align these rows so that they match up with the initial row of each answer. Is this achievable?
To resolve this issue, simply utilize the display property in CSS. In my solution, I transformed the survey divider into a table and placed the label inside it as a table-cell, ensuring that all text stays aligned vertically.
In this example, each answer is enclosed within its own divider as I encountered difficulties in applying the display property solely to the input. Nevertheless, this approach should address the issue, and there may be an uncomplicated workaround for that or possibly not.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>List items in survey</title>
<style>
div.survey-answer {
display: table;
}
label {
display: table-cell;
padding-left: 10px;
}
</style>
</head>
<body>
<div class="survey-answer">
<input type="checkbox" id="survey-answer-1" /><label for="survey-answer-1"><b>ANSWER 1</b> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sagittis lacinia nulla, eu consequat tellus posuere at. Integer sagittis mauris quis massa tempor bibendum. Proin quam leo, tristique eu nibh non, consequat auctor risus. Pellentesque dignissim at met... (Content truncated)
</div>
<br />
<div class="survey-answer">
<input type="checkbox" id="survey-answer-2" /><label for="survey-answer-2"><b>ANSWER 2</b> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sagittis lacinia nulla, eu consequat tellus posuere at. Integer sagittis mauris quis massa tempor bibendum. Proin quam leo, tristique eu nibh non, consequat auctor risus. Pellentesque dignissim at met... (Content truncated)
</div>
</body>
</html>
Trust this information proves beneficial to you!
Within a card displaying an order, there is a sweetalert2 popup that opens when trying to cancel the order, asking for a cancellation reason. This feature works seamlessly on the orders screen. https://i.sstatic.net/RWhOA.png <Grid item md={8} sm={12}&g ...
I have created a custom toggle button component in Angular that I can reuse in different parts of my application. However, I am facing an issue that I need help resolving. I want to display only the selected toggle button and hide the others. When I click ...
When the user clicks on the first paragraph with the class "targetgo", I want the page to scroll to the element with the class "size1". The same goes for the second paragraph with the class "size2" and so on. As I will have more than 25 similar instances ...
I have a complex 2-column grid layout, and the example shown here is just one part of it. The complete code follows a similar structure. I am looking for a way to ensure that the green box always stays close to the red box in the layout, without having a ...
Exploring the world of Jasmine and Angular 4, I am aiming to write tests for a button functionality in a multi file upload feature. Below is the code snippet from my spec file: import { async, ComponentFixture, TestBed } from '@angular/co ...
Is it possible to center a form input element within a div element without it changing position when the browser window size is adjusted? I attempted using margin: auto and position: relative, but encountered issues with the element moving. How can this be ...
Hey there, I'm currently working on incorporating Google fonts into a custom Material UI theme as the global font. However, I'm facing an issue where the font-weight setting is not being applied. It seems to only display the normal weight of 400. ...
I am experiencing a small issue with this JS code... -I have multiple divs that are changing automatically in rows as they move randomly... I want to change the color of the div moving up to green. And for the div moving down, I want to change the colo ...
Just dipping my toes into the world of VueJS with my very first major project. I've incorporated 2 filters in this project for my elements - one is a search bar and the other involves checkboxes. Taking a look at my code, you'll notice a computed ...
I'm trying to adjust the height of a wysiwyg editor housed within a panel to be 200px. How can I achieve this? <div class="row"> <div class="col-xs-12 col-md-12 col-lg-8"> <panel heading="Product Des ...
Here's the issue at hand: I currently have "+" and "-" icons at the end of each row to add and delete rows as needed. However, I would like to replace the "-" icon with a trashcan symbol instead. I attempted to do this by replacing it with an image s ...
I am currently trying to set a custom image as the cursor using jQuery in this manner $(document).ready(function(){ $("body").css('cursor','url(http://affordable-glass.com/test/penguinSm.png),auto'); }); While this method works, ...
While attempting to create a checkbox using the Bootstrap form-check class, I encountered an issue with my code. Here is the snippet: <form> <div class="form-section"> <div>Title</div> <div class="form-check"> ...
https://i.sstatic.net/o4FLn.pngthis is my code which i have created this navigation bar with bootstrap and all of its drop downs but i want to add another drop down to the services drop down section inside of webdevelopment but it can't any easy solut ...
I'm currently working on a webpage with a fixed width and height. Although I'm incorporating hover effects, I'm encountering an issue where the vertical overflow of the page is not set to 100% (100vh). What could be causing this problem an ...
Looking for assistance with this code snippet: <select ng-model='item.data.choice' > <option ng-if='item.data.simple_allow_blank == false' ng-show='choice.name' ng-repeat='choice in item.data.simple_choices&ap ...
Utilizing footable in conjunction with Boostrap Responsive Tabs leads to an issue post-resize. When the page is initially loaded on a desktop, everything functions properly until the screen is resized. Once the screen is resized, the tables within the tabs ...
Recently, I created a unique php newsletter script in CakePHP that allows users to utilize an in-place editor to generate HTML content for newsletters. While the functionality works well, I have encountered some challenges with a new newsletter design that ...
I am facing a challenge with scraping data from a web page that contains a table spanning multiple pages. I am using Python with selenium for this task. The website in question is: The issue I am encountering is related to navigating through the pages of ...
I’m currently tackling a project that involves the use of two buttons with different sizes. Despite both buttons having the same specified border-radius of 6px, they seem to display differently in the browser. The smaller button appears to have a larger ...