I am having trouble with the radio button and drop-down arrow on my project. When I try to click on them, nothing happens. It seems like something is hidden but I can't figure out what it is.
Could someone please assist me with this issue?
If anyone is willing to help, here is the link to my project: https://codepen.io/Ozubergs/pen/VdKRmd?editors=1100
enter code here
It seems like you've misused the position: relative property, which is causing the issue. I've removed it and suggested adding vertical-align: top; for labels and the submit button.
.header {
margin: 2%;
}
#survey-form {
background: #722f2d;
margin: 0 auto;
border-radius: 5px;
width: 50%;
padding: 10px;
}
.labels {
display: inline-block;
text-align: right;
width: 40%;
padding: 5px;
margin-top: 10px;
vertical-align: top;
}
.inputs {
display: inline-block;
text-align: left;
}
.fields {
width: 210px;
border-radius: 5px;
}
#submit {
vertical-align: top;
}
/* .radio-buttons {
position: relative;
bottom: 55px;
display: block;
}
.radio {
position: relative;
top: 70px;
right: 30px;
display: block;
}
.checkboxes{
position: relative;
bottom: 145px;
}
.checkbox{
position: relative;
top: 164px;
right: 30px;
}
.lbl {
position: relative;
bottom: 2px;
left: 3px;
}
textarea {
margin-top: 4%;
}
#submit {
position: relative;
bottom: 91px;
margin: 10px;
}*/<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="header">
<h1 class="text-center" id="title">Survey</h1>
<p class="text-center" id="description">Let us know how to improve this survey</p>
</div>
<form id="survey-form">
<div class="input-name">
<div class="labels">
<label for="name" id="name-label">* Name:</label>
</div>
<div class="inputs">
<input type="text" placeholder="Enter full name" id="name" class="fields">
</div>
</div>
<div class="input-email">
<div class="labels">
<label for="email" id="email-label">* Email:</label>
</div>
<div class="inputs">
<input type="text" placeholder="Enter email" id="email" class="fields">
</div>
</div>
<div class="input-age">
<div class="labels">
<label for="number" id="number-label">* Age:</label>
</div>
<div class="inputs">
<input type="number" placeholder="Age" id="number" class="fields">
</div>
</div>
<div class="labels">
<label>What are you?</label>
</div>
<div class="inputs">
<select id="dropdown">
<option>Student</option>
<option>Full time employee</option>
<option>Part time employee</option>
<option>Self-learner</option>
<option>Prefer not to say</option>
<option>Other</option>
</select>
</div>
<div class="radio-buttons">
<div class="labels">
<label>Do you like this survey?</label>
</div>
<div class="inputs">
<ul style="list-style:none">
<li class="radio"><input type="radio" id="male" value="1"><label for="male" class="lbl">Yes</label></li>
<li class="radio"><input type="radio" id="female" value="2"><label for="female" class="lbl">No</label></li>
<li class="radio"><input type="radio" id="other" value="3"><label for="other" class="lbl">Meh</label></li>
</ul>
</div>
</div>
<div class="checkboxes">
<div class="labels">
<label>How should I improve?</label>
</div>
<div class="inputs">
<ul style="list-style:none">
<li class="checkbox"><input type="checkbox" value="1" id="add"><label for="add" class="lbl">Add more detail</label></li>
<li class="checkbox"><input type="checkbox" value="2" id="clean"><label for="clean" class="lbl">Clean it up</label></li>
<li class="checkbox"><input type="checkbox" value="3" id="design"><label for="design" class="lbl">Design it better</label></li>
<li class="checkbox"><input type="checkbox" value="4" id="create"><label for="create" class="lbl">Someone else should create the survey</label></li>
<li class="checkbox"><input type="checkbox" value="5" id="confidence"><label for="confidence" class="lbl">Have confidence</label></li>
<li class="checkbox"><input type="checkbox" value="6" id="more"><label for="more" class="lbl">Add more buttons</label></li>
</ul>
</div>
</div>
<div class="text-box text-center">
<textarea rows="4" cols="30" placeholder="Enter your comments here..."></textarea>
<button type="button" id="submit">Submit</button>
</div>
</form>
</div>The issue at hand is directly related to the CSS positioning strategy you are employing. By using relative positioning, elements are being rearranged in a way that is causing overlap between your drop down menu and radio buttons, rendering them non-functional. Consider an alternative design approach that does not rely on relative positioning to achieve the desired layout.
I'm trying to loop over my SliderComponent function with different inputs within the HTML to generate multiple components, but I can't seem to get it to work. I came across a solution online that involves building a string and returning it as HTM ...
I am currently facing an issue with designing a navbar. I am aiming for Multi-Level Dropdowns, but whenever I click on More Services, it automatically closes the main dropdown menu. I have experimented with various approaches, but none of them seem to be ...
I need help with designing a responsive layout for my website. Currently, I have a simple layout with 3 elements that I want to display differently based on screen size. On larger screens, I want the elements to be arranged like the layout at the top in t ...
I have successfully implemented a method for loading output from now_playing.php (shoutcast now playing content) using a jQuery include ajax call, as recommended in this answer on Stack Overflow. Here is my code: <script> $(function(){ $("#now_ ...
I am new to working with Angular JS. Currently, I am populating an array and attempting to showcase its contents on the HTML page using ng-repeat. $scope.groupedMedia = []; // Elements are being added through a for loop. $scope.groupedMedia[year].push(r ...
Essentially, I have a situation where I am using an *ngIf condition on a div that also contains an image. This is for a login page where I need to display different versions based on the type of user. However, I'm facing an issue where the image does ...
Hey everyone, I'm currently tackling a new project and running into an issue with Bootstrap 5 nav pills. I need them to toggle between column and grid view, but they aren't behaving as expected (content displays fine on the first pill, but nothin ...
I am seeking guidance from someone with more experience to help identify the source of this margin. Your assistance is greatly appreciated! https://i.stack.imgur.com/46k7k.png Below is the CSS code in question: .logo-icon { background-image: url(&ap ...
Despite my efforts to globally override the font, I am still encountering instances where the Roboto font is not being replaced, particularly on MUI select and autocomplete components. import { createTheme } from '@material-ui/core/styles'; // A ...
var listLis=document.getElementById('list'); const addbutton=document.querySelector('.fa-plus') const inputBar=document.querySelector('.show') function showInput(e){ inputBar.classList.toggle('show') } addbutt ...
Greetings! I am not a native English speaker, so please excuse any typos in my message. I am attempting to create a menu that functions exactly like the one on the Bootstrap components page, but with the distinction of appearing on the RIGHT SIDE: http:// ...
I am exploring the possibility of creating PDF files using mkd2pdf, a tool based on wkhtmltopdf. Mkd2pdf has the ability to generate PDFs from markdown content and utilizes a CSS file for styling purposes. For example: h1 { page-break-before: always; } ...
https://i.sstatic.net/SuGiM.png I am looking to convert the grid layout shown above into the grid layout displayed below. To achieve the above layout, I have used the following grid structure: <div className="row"> <div className=&q ...
When I call an HTTP POST method to retrieve table names from the backend, I attempt to display them in the template using ngFor. However, the table names are not appearing on the screen. The tNames property is inaccessible in the template. As a beginner i ...
As a junior web master, I have a simple question to ask. I have created a single page application for a client with a contact form at the end of the page. The validation is done using Bootstrap, but the only method I know to send the form data to a mail id ...
I am working with a structure that looks like this: <div class="container"> <ul> <li> <img> </li> </ul> </div> Currently, there is a background image set for the main container. My go ...
Here is my code that successfully appends the first item: After clicking the "show count" button, a pop-up dialog box will display the count. However, to remove the appended item or refresh the page, additional steps are required. function showcount() { ...
I'm interested in incorporating a hamburger menu into my Joomla protostar template, similar to the one featured on this URL: ['https://codepen.io/PaulVanO/pen/GgGeyE'] This will provide me with a fullscreen hamburger menu for both desktop ...
For my current web project, I require a friendship/follow feature. There are two roles involved: admins and regular users. Regular users have the ability to follow other users, while admins do not possess this capability. When a user wishes to follow anot ...
Here is the HTML code snippet: <table class="table" id="myTable"> <tr> <th>Type</th> <th>Counter</th> <th>Remove</th> <th style="display:none;">TypeDistribution</t ...