Purchasing a Checkbox alongside its corresponding label

I have been working with the Oracle CPQ tool and am faced with the challenge of creating a checkbox attribute within it.

Upon inspecting the UI, I came across the following:

https://i.sstatic.net/xE5aH.png

Upon examining the browser source code (generated by the CPQ tool), I found the following HTML snippet:

<div class="form-item clearfix null" id="attr_wrapper_1_chkmembershipFeePayment_t" style="display: table;">
<label class="form-label" for="chkmembershipFeePayment_t" style="width: 100px">
    <span style="padding-right: 5px;display: table-cell;">Membership Fee</span>
</label>
<div class="form-element field-wrapper" id="field_wrapper_1_chkmembershipFeePayment_t" style="padding-left:100px">
    <div class="boolean-wrapper field" message="" style="display: table-cell;">
        <div class="boolean-wrapper-inner"><input value="false" class=" form-input  cm-attr-value " name="chkmembershipFeePayment_t" onclick="if (this.checked) { this.value='true'; } else { this.value='false'; }" data-is-boolean="true" type="checkbox">
        </div>
        <input value="true" name="_boolean_present_chkmembershipFeePayment_t" type="hidden">
    </div>
    <div id="msg_1_chkmembershipFeePayment_t" class="error-hover" data-action-message="" message=""></div>
</div>
::after</div>

I am looking to rearrange the checkbox and the label, specifically placing the checkbox before the 'Membership Fee' label using CSS or JavaScript. However, I am unable to directly alter the HTML due to restrictions within the CPQ tool attribute. Is there a workaround for this?

Following an update by Sagar V

https://i.sstatic.net/HaqMO.png

Answer №1

Updating JavaScript Function

  • locate the label element
  • detach it from its original position
  • insert it after the input element

labelElement = document.querySelector('label[for=chkmembershipFeePayment_t]');

inputTarget = document.querySelector("input[type=checkbox]");

labelElement.parentNode.removeChild(labelElement);

inputTarget.parentNode.insertBefore(labelElement, inputTarget.nextSibling);
<label class="form-label" for="chkmembershipFeePayment_t" style="width: 100px">
<span style="padding-right: 5px">Membership Fee</span>
</label>
<div class="form-element field-wrapper" id="field_wrapper_1_chkmembershipFeePayment_t" style="padding-left:100px">
  <div class="boolean-wrapper field" message="">
    <div class="boolean-wrapper-inner">
      <input value="false" class=" form-input  cm-attr-value " name="chkmembershipFeePayment_t" onclick="if (this.checked) { this.value='true'; } else { this.value='false'; }" data-is-boolean="true" type="checkbox">
    </div>
    <input value="true" name="_boolean_present_chkmembershipFeePayment_t" type="hidden">
  </div>
  <div id="msg_1_chkmembershipFeePayment_t" class="error-hover" data-action-message="" message=""></div>

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

Press the "Load More Categories" button in Wordpress to display additional categories

I am looking for a way to implement a "Load More" button on my website. Currently, I am using the get_categories function to display categories on my TV show website. Each category represents a series and the posts within each category are episodes. You c ...

Navigating production mode in nuxtjs and uncovering errors

There seem to be numerous inquiries regarding this matter. Unfortunately, there doesn't appear to be a definitive solution. Is there any way to view detailed error logs in production mode? https://i.stack.imgur.com/prXUt.jpg ...

Switching images dynamically using Flask and JavaScript

I'm currently working on Flask and encountering a perplexing issue. I'm attempting to update an image using JavaScript, but I am getting these errors from Flask: ... 12:05:34] "GET / HTTP/1.1" 200 - ... 12:05:38] "GET /img/pictur ...

Navigating the complexities of integrating Rollup, ES modules, TypeScript, and JSX can be a challenging endeavor due to

Lately, I've been learning about the tools mentioned in the title. However, I've encountered some bumps along the way, so I'm turning to StackOverflow for help. My Requirements I need something like Rollup to pack my stuff For bare module ...

"Encountering an error of undefined index when dealing with multiple file

I've encounter an issue with this code but can't seem to figure out what's wrong. Any help would be greatly appreciated. Kindly refrain from marking it as a duplicate too quickly; I've already gone through similar questions without find ...

Object.assign versus the assignment operator (i.e. =) when working with React components

Just a quick question: I've come across some answers like this one discussing the variances between Object.assign and the assignment operator (i.e. =) and grasp all the points made such as object copying versus address assignment. I'm trying to ...

I possess a compilation of URL links and I am seeking to identify the specific HTML div that corresponds to each URL within a webpage

Could you please help me figure out which HTML div each URL belongs to on a webpage using Java? I have a list of URLs that need to be matched with their respective HTML divs. ...

The functionality of a button within a web component is restricted to only trigger the click event once after it has been

I am facing an issue with my class that includes three buttons for navigating the app. The event listeners I add to these buttons in the connectedCallback method only work once. When I click one of the buttons, like the next button, it changes the attribut ...

Aligning text in the middle of two divs within a header

Screenshot Is there a way to keep the h4 text centered between two divs? I want it to stay static regardless of screen resolution. Currently, the icon and form remain in place but the h4 text moves. How can I ensure that it stays in one spot? <!doctyp ...

Tips for extracting innerHTML or sub-string from all elements that have a specific class name using JavaScript

When it comes to shortening the innerHTML of an element by its Id, I have found success using either slice or substring. While I'm not entirely clear on the differences between the two methods, both accomplish what I need them to do. The code snippet ...

Unable to center div container with margin set to auto

I'm struggling to center my container on the website. My goal is to have it centered and take up about 80% of the page so I can incorporate an image slider and text inside. Using margin: 0 auto doesn't seem to be achieving what I want. The backgr ...

Incorrect placement of rectangle on a dynamic canvas

After clicking on two different positions on the canvas rectangle, I noticed that it was being drawn in the wrong location due to issues with the responsive canvas size. Despite attempting to scale the pointer position based on both the canvas and window w ...

Bringing in Sequentially Arranged HTML Content using Asynchronous JavaScript Integration

I have a collection of separate HTML files with small content snippets that are loaded through AJAX and .get(). I want to display the content in an orderly fashion without relying on async: false in my AJAX call, as it is no longer recommended. With the si ...

Can you provide guidance on utilizing the Login Event within the Electron Framework?

I need some assistance in understanding the functionality of the Event: 'login' feature within the Electron Framework. Is this similar to the Password Autofill/Remember Password feature typically found in web browsers? I'm interested in util ...

transferring documents using multer

As a novice in JavaScript, I am exploring the use of multer for file uploads. Below is my current code: let express = require('express'); let im = require('imagemagick'); let gm = require("gm").subClass({ imageMagick: true }); let ...

The issue with NGX-Bootstrap/Angular Pagination arises when attempting to adjust the maxSize input while the screen view (width) is being altered

Currently, I am utilizing the Pagination component from Valor Software (click here to access). I am interested in adjusting the maxSize input dynamically based on changes in screen width. For reference, please see this example: Click to view example. It ...

The integration of Express server with static ejs files, CSS, and JavaScript is experiencing technical difficulties

I am currently working on a website using node.js and have created two routes: /home and /contact. Everything was functioning properly until I added CSS and JS files to both routes. For some reason, the second call does not work as expected. When I access ...

Enhance Your NextJs Website with Interactive Tooltips using @tippyjs/react

<Link href="/company/add" > <a title="My New Title" data-toggle='tooltip' className="btn btn-primary">My Link</a> </Link> Trying to integrate a Tippy tooltip component with a Nextjs Link do ...

Mysterious line appearing beneath alternate rows in Table with border-collapse and border-spacing applied. Unable to pinpoint the culprit property causing the issue

After searching for a solution to add space between the rows in my table, I finally found the answer on Stack Overflow. The implementation seemed to work fine at first glance, but upon closer inspection, I noticed an issue depicted in the screenshot below: ...

Creating a column in CSS that maximizes width without utilizing 100% or causing text wrap

Trying to keep a three-column div from spilling over the page can be tricky. The first two columns must not exceed 200px, while the third column should be at least 280px wide. The issue arises when there is a table in the third column with long sentences i ...