Checkbox customization that shifts position when clicked

I seem to be missing something as I can't seem to find a solution for this particular issue.

I have implemented custom checkboxes on a list of sentences. Initially, they appear fine, but once you check the first checkbox, it shifts its position. I am puzzled as to why the checkboxes move after being checked?

Here is a fiddle for reference: https://jsfiddle.net/Hodor_/vhhj7huv/
Upon changing content: "/2714"; to content: "";, I noticed that the checkbox no longer moves upon being clicked.

I find it perplexing how the content property affects the checkbox's position.

I have read suggestions to use vertical-align:middle in similar queries, but it doesn't resolve the issue in my case.

Any insights or ideas on how to resolve this?

cssangularjscheckbox

Answer №1

Your current use of display: flex in combination with position: absolute is causing some issues.

To resolve this issue, you just need to make 3 simple adjustments:

1) Eliminate position: absolute from your label:before

2) Get rid of padding: 0 0 0 50px; from your label

3) Include a margin-right: 20px (or any value you prefer) to the label:before.

It's that simple. Your final code will resemble this - Fiddle here

label{
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 30px;
  cursor:pointer;
  color black;
}

label:before{
  /* position:absolute; */
  content:"";
  display:flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 30px;
  left: 25px;
  text-align:center;
  font-size: 20px;
  color: white;
  border: 1px solid #9b9b9b;
  border-radius: 4px;
  transition: all 0.5s ease;
  margin-right: 20px;
}

Remember: With flexbox, you have a "flexible" way to control your elements, allowing for flexible positioning based on your needs.

On the contrary, position: absolute takes a rigid approach by removing the element from the document and letting you place it precisely using directional properties like left, right, top, bottom.

Answer №2

To conceal the content, I employed the text-indent property, ensuring that the content remains in place without affecting the checkbox's position.

Check out the live demonstration on this link.

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

Having trouble with animating the background color of an input button using jQuery?

I'm completely confused as to why the background color isn't changing despite investing a significant amount of time into it: <input type="button" class="front-consultation-btn" value="Get A Free Consultation"> <script> $(' ...

jqueryhtmlanimationcssjquery-animate

Setting up default values for AngularJs and JqueryUI slider

Just making my debut post here, hoping it covers everything. I'm working with AngularJs and I've incorporated a JqueryUI slider using an angular directive. I've come across numerous examples on how to do this, but none of them explain how t ...

jquery-uiangularjsangularjs-directive

What is the best way to create a series of synchronous HTTP requests using $http in AngularJS?

I am facing the challenge of uploading a list of video objects with different attributes and links. Currently, I have set up a loop to go through each object in the list and upload the videos one by one since the service I am using does not support multipl ...

javascriptangularjsajax

I encountered the issue: "The specified resource is not a valid image for /public/logoicon/logoOrange.png, it was received as text/html; charset=utf-8."

I encountered an issue when trying to incorporate a PNG or SVG file into my code. What steps should I take to correct this error and enable the images to display properly? import Head from 'next/head' import Image from 'next/image' impo ...

javascripthtmlcssbrowsernext.js

Utilize flexbox to create a list that is displayed in a column-reverse layout

I am facing a challenge in displaying the latest chat person in the 1st position (active) using Firebase. Unfortunately, Firebase does not have a date field which makes it difficult to achieve this. I have attempted converting the date into milliseconds an ...

javascripthtmlcssfirebaseflexbox

Photo attached at the bottom of each container

Here is the link to my code snippet: fiddle. I am struggling with aligning shopping bag icons at the bottom of each box on my webpage. I want all boxes to have the same height, so I used display: table-cell; in the box_left div. However, placing the shopp ...

htmlcss

Troubleshooting a configuration problem with Mean-cli

Recently, I've ventured into developing mean based apps. I'm currently following the steps outlined here to configure the app. Despite installing all necessary prerequisites as instructed in the link, I encountered an error while working on Windo ...

angularjsnode.jsmongodbexpressmean-stack

container dimensions for images

Is there a way to make an image adjust its size according to the container? For example, if the container is 100x100 pixels and the image within it is 90x80 pixels, can we make sure that the smaller property of the image (height in this case) adjusts to f ...

htmlcss

What is the process for updating button text upon clicking in Angular?

To toggle the text based on whether this.isDisabled is set to false or true, you can implement a function that changes it when the button is clicked. I attempted to use this.btn.value, but encountered an error. import { Component } from '@angular/core ...

javascriptcssangular

Does anyone know of a CSS/JavaScript framework that can be used to replicate the look and functionality of the iOS home

I'm wondering if there is a CSS/JavaScript framework that replicates the layout of an iOS home screen. I want to create a kiosk website with a grid layout similar to Android/iOS where apps can be displayed as icons. ...

javascripthtmlcssioshomescreen

Bizarrely rapid transitions from standard to hovering appearance in CSS

After creating a custom styled button with a hover effect, I noticed an issue where if you happen to hover over a specific spot on the button, it quickly switches between its normal and hover states. https://i.sstatic.net/uPq1F.gif This is my code: but ...

htmlcss

AngularJS: dual occurrence of stateChangeStart without stateChangeSuccess

I encountered a challenge while developing a simple code for managing user roles. There are certain parts of my back-office that are restricted for guests but accessible to admins. The issue arises with the "stateChangeStart" function in the run code. Lo ...

angularjs

What is the best way to set up unique body backgrounds for each page in WordPress?

My website consists of various pages named as : page-X.php page-Y.php page-Z.php These three pages mentioned above require unique background colors. However, the remaining pages/posts on my site inherit their background-color from the style.css file. ...

htmlcsswordpresswordpress-theming

Utilize a dual-color gradient effect on separate words within the <li> element

I am attempting to display the fizz buzz function in an unordered list, with each word being a different color ('fizz'-- green, 'buzz'--blue) as shown here: https://i.sstatic.net/Yvdal.jpg I have successfully displayed "fizz" and "buz ...

javascripthtmlcss

Having trouble getting the CSS animation to work properly with the text

Update: The direct link is working fine, unlike the rocketscript version. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> I have been attempting to animate word rotati ...

javascriptjqueryhtmlcss

A step-by-step guide to implementing the PUT function in AngularJS using Mongoose

My attempt to send a GET request to the Mongo works fine, but I'm having trouble getting the PUT request to work. My suspicion is that there might be an issue with the path from the controller to the router. I've already tried using both update() ...

javascriptangularjsmongodbmongoosecrud

Oops! An error has occurred with the module in angular1

I recently integrated ui-router into my Angular 1 application and set up the route state. However, I encountered an error when trying to access the page mentioned in the title of this post. Below is the code snippet for reference. Can anyone point out wher ...

angularjsangular-ui-router

Align the items at the center of a Vue Router Link

I am looking to design a navigation bar that includes router-link items, with each item displaying an icon on the left side and text on the right side. An example of this design can be seen in the Firebase navigation bar. https://i.sstatic.net/eg328.png ...

cssvue.js

PrimeFaces: Achieving Conditional Coloring Based on Status (Passed/Failed)

Attempting to dynamically change the color of a column based on its status value (Passed/Failed/InProgress) using jQuery. I tried copying and pasting the table into jsfiddle, where it worked. However, when implemented in the actual XHTML file, the jQuery ...

jquerycssprimefaces

Strategies for extracting value from getCurrentUserSync in AngularJS

Can anyone help me retrieve this value from the Profile variable? I have been unsuccessful in my attempts to get it. When I check the data console.log(this.Profile), it displays the data shown in the image below: this.Profile = Auth.getCurrentUserSync(); ...

angularjsangularjs-directiveangularjs-ng-repeat