Combining several position-aligned classes into a single div instead of each having their own individual div

http://jsfiddle.net/58arV/

Trying to create a question component where users can choose the correct answer out of 4 options.

I planned to use 4 input styles with a checkmark "radio" DIV on the right. When a user clicks on an option, it should display a checkmark while others show a red "x".

<div class="answer">
<input type="text" autocomplete="off" name="answer" id="answer-1" placeholder="Answer 1" class="form-control input" value="" />
<button type="radio" class="btn btn-success answer-type" style="" value="1">
<i class="glyphicon glyphicon-ok"></i>
<div class="left-check"></div>
</button>
</div>

Facing an issue where all boxes are positioned at the top-right corner of the first input field.

Any suggestions or solutions would be greatly appreciated. Thank you!

jqueryhtmlcsstwitter-bootstrap

Answer №1

Simply add the following CSS code to your existing stylesheet:

.answer { position:relative; }

Check out the updated example here: http://jsfiddle.net/58arV/1/

Remember, according to CSS specifications, an absolutely positioned element is placed relative to its nearest parent that is either relative or absolute.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Divide the <ul> element into two columns with CSS only if the number of <li> items is more than 5

Is it feasible to divide a list into two columns using pure CSS if there are more than 5 child <li> elements? In the scenario I have in mind, this is the desired outcome: <li>1</li> <li>2</li> <li>3</li> ...

csssass

Floating a DIV causes it to shift down in a responsive layout at specific window sizes

My issue lies with a fluid layout that works well for the most part. However, at specific window widths, one of four floating div-elements unexpectedly shifts down. This inconsistency happens at nearly 20 different widths, differing by only one pixel. For ...

csshtml

Adjusting HTML image sizes

How can I prevent large images from extending off the edge of the screen when using HTML img tags? Is there a way to scale them to fit within the browser window or specify a set percentage for their width and height? I've noticed that using the width ...

htmlimage-scaling

"Learn the process of customizing the border color of a drop-down menu using

Is there a way to add validation to a drop-down menu so that the border color turns red if an option is not selected? $("#MainContent_ddlSuppliers option:selected'").css("border", "1px solid #F78181"); ...

jquerycssdrop-down-menucolors

Tips for enabling selection of list items in an input tag

Below is the code I have written to create an InputFilter. MyFilter = function(args) { var dataUrl = args.url; var divID = args.divID; var div = document.getElementById(divID); var myTable = '<input type="text" id="myInput" on ...

javascripthtmlcss

The CSS show and hide feature is effective across all browsers except for Safari. What steps can be taken to address this issue

My toggle trigger works perfectly in Chrome, but I'm having trouble getting it to work in Safari. Any suggestions? <a href='#show'class='show'>see more --></a> <a href='#hide'class='hide&apos ...

htmlcsssafari

Utilize C# code behind to manage the opening and closing of a jQuery dialog

I am encountering an issue with a jQuery dialog. The problem is that the dialog opens on every page load and has a close button. $(document).ready(function () { $("#dialog").dialog({ title: "Create your free showcase profile", ...

c#jqueryjquery-dialog

Effortlessly adjust the top margin of the div element

I have been attempting to smoothly move a div (circle), but I'm facing difficulties. The div instantly jumps to the final position instead of moving smoothly. In an effort to simulate the process of a ball falling, I tried using the animate method wi ...

javascriptjquery

Problem with (click) event not triggering in innerHtml content in Angular 4

For some reason, my function isn't triggered when I click the <a... tag. Inside my component, I have the following code: public htmlstr: string; public idUser:number; this.idUser = 1; this.htmlstr = `<a (click)="delete(idUser)">${idUser}&l ...

htmlangulartypescript

html scroll to the flickering page

Why is it that when a user clicks on a link in the list, the browser flickers? This issue becomes especially noticeable if a user clicks on the same 'link' twice. Is there a solution to prevent this from occurring? The problem also seems to aris ...

javascriptjqueryhtmlcss

What is the proper way to utilize the name, ref, and defaultValue parameters in a select-option element in React Meteor?

I recently developed a Meteor project using ReactJS. I have a Create/Edit page where I use the same input field for various form elements. Here is an example of code snippet that I currently have: <FormGroup> <ControlLabel>Province</Control ...

javascripthtmlreactjsmeteorreact-bootstrap

What is the most effective way to align Django form CharFields side by side on a single line?

Currently, I am utilizing the Django Form class to construct a form. My goal is to have each CharField field occupy its own row, with the exception of certain ones that I want to share a row. The following are the CharFields I am currently working with: c ...

pythonhtmlcssdjangoforms

How far apart are two surfaces when they are rotated along the Y-axis

Access Code: Click here to access the code I am trying to make sure that the red surface lies completely flat on top of the gray surface. However, there seems to be a gap (marked ??) between the two surfaces when I rotate 'modifier1'. How can I ...

javascripthtmlcssfamo.us

Ways to divide the value of an input text box using Angular

Given the value "<HR>*10/100", how can I split it into three parts: "HR", "*", and "10/100"? HTML <input type='text' ng-model='value' ng-change="GetAngValue(value)"> {{Result}} Angular $scope.GetAngValue = function (val ...

htmlangularjs

[Vue alert]: "Maximum" property or method is not declared in the instance but is being referenced during the rendering process

Here is my custom Vue component: Vue.component("product-list", { props: ["products", "maximum-price"], template: ` <div> <div class="row d-flex mb-3 align-items-center p-3 rounded-3 animate__animate ...

javascripthtmlvue.jsfrontendcomponents

The dataTable plugin is malfunctioning, displaying all records on a single page when it should only show 10 per page

I utilized the dataTable plugin to format my HTML table, but unfortunately it is not displaying the results as expected. Instead of showing 10 records per page, it is displaying all records at once. I even tried setting "iDisplayLength: 10" but it didn&apo ...

javascriptphpjqueryhtmlcss

Using JQUERY to create a smooth sliding transition as images change

Currently, I have set up three images (1.jpg, 2.jpg, 3.jpg) along with an image using the code: <img id="add" src="1.jpg"></img>. The width, height, and position of this additional image are adjusted as needed and are functioning correctly. Fur ...

javascriptjquerycssajaxhtml

Guide to transforming plain text into HTML format using Angular 4

In my Angular application, I am facing the task of adding a value to an array where the value itself needs to be in HTML format. This means that when the value is displayed, it should render as HTML text. For instance, if someone hovers over the text, I ...

htmlangulartooltip

Eliminate the white background from the modal image

I'm facing an issue with an image displayed in a modal. The image has a white background that I want to remove so only the image itself is visible. https://i.stack.imgur.com/CG9Ne.png Here's the code snippet: <div id="myModal" class ...

htmljquerycssbootstrap-modal

HTML DOM parser in PHP with simple space handling

Currently, I am utilizing PHP Simple HTML DOM Parser to extract text that lies between specific div tags using $html->find(div.divname) Everything runs smoothly until the divname contains a space. I've experimented with [div name] and "div name ...

phphtmlparsingdom