The Ipad web application is unable to display the left line of a checkbox

Environment:

Using Cordova for an iPad web app

My HTML source code:

<div style="text-align: right; font-size: 15px;">
   <input type="checkbox" disabled>
   space
</div>

When the checkbox is disabled, the left line of the checkbox is not displayed. For reference see image below:

Here

Answer №1

In my opinion, using text-align for styling input checkboxes is not ideal. To fix this issue, I removed text-align and instead applied a left margin:

<div style="margin-left: 100px; font-size: 15px;">
   <input type="checkbox" disabled>
   space
</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

Adjust the size and position of the text input field

I'm struggling to find a way to both resize and move the box without one action interfering with the other. Whenever I attempt to change the size of the box, it triggers the move event at the same time. Clicking on the box should make it resizable, bu ...

Using two divs, each containing different content, with one incorporating a tinymce editor, in order

There are two div elements in my code: <div id="ing" style="position:relative;"> <div id="comm" style="position: absolute; width: 27% !important; height: 141px; right: 18px; top: 1px; "> </div> </div> After that, I set T ...

Verify if the input field is blank

I've successfully used this code in other parts of my website, but for some reason it's not working here. The issue is that it keeps displaying an alert message. Here is the HTML section: <form action="processForms.php" method="post" id="joi ...

What could be causing the extra gap at the top of my div element?

BEFORE MAKING ASSUMPTIONS, READ THIS I have already attempted using margin-top: 0px; <html> <head> <style> html, body { padding: 0px; margin: 0px; } body { font: 22px trebuchet ms; } button { ...

Having trouble inserting a new row into the AngularJS table?

Having trouble adding a new row to the table in angularjs when clicking the add button. Here is the link to the Plunkr example -https://plnkr.co/edit/s7XAaG4JbvbTTxiZ0V2z?p=preview The HTML code snippet is as follows: <html> <head> <script ...

Load up as an auto-fading pop-up on its own

Is there a way to have the popup set to automatically open without needing to click on anything? <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ // Automa ...

Allow children to fit seamlessly in Bootstrap while enabling scrolling for other children

Is there a way to make the height of my container fit the content in the left column, while allowing the right column to scroll if it overflows? Here is an example of what I am working with: <div class="container"> <div class="row"> & ...

Exclude the UL hierarchy from removing a class in jQuery

Check out this fiddle to see the code snippet: http://jsfiddle.net/3mpire/yTzGA/1/ I am using jQuery and I need to figure out how to remove the "active" class from all LIs except for the one that is deepest within the hierarchy. <div class="navpole"&g ...

Tips on maintaining the consistent color of an active link until selecting a different link

Is it possible to make a link change color when clicked, and have that color stay until another link is clicked? How can I achieve this using the "active" attribute? I attempted it, but the link reverts back to its original color after clicking. &l ...

Show and hide a division based on the status of a checkbox

I have a specific requirement regarding authentication modes. When selecting a single factor, only one type of authentication mode can be chosen at a time and the corresponding div will be displayed. However, when selecting multiple factors, I should be ab ...

``The text overlay feature on the image appears to be malfunctioning

I'm facing an issue with overlaying text on an image - the text is getting pushed underneath the image and not displaying as intended. I can't figure out what's causing this problem. Any assistance would be greatly appreciated. Below is the ...

Replacing a predefined label in Volusion (for language translations)

I am currently working on a project using the Volusion platform, which unfortunately does not provide full interface editing capabilities. As a result, I am attempting to edit certain hardcoded labels in the HTML to display them in Spanish. After trying v ...

What is the best way to change the inner text of an HTML element without causing it to resize or impacting its overflow?

Is it possible to change the text content of an HTML element without affecting its size? I am using Bootstrap and the card component. I want to dynamically update the card text without impacting the overflow that I have already set. Here is a sample of t ...

Adding a Nested Object to a JSON Data Structure

Recently, I had to modify the field type of a column, altering the data layout to a multiple choice field type. The original JSON fetched looked like this: d: { "results": [ { "MajorTasks": null, "DeliverablesSub ...

Display the HTML content once the work with AJAX and jQuery has been successfully finished

Below are the codes that I have created to illustrate my question. It's not a complete set of code, just enough to explain my query. The process goes like this: HTML loads -> calls ajax -> gets JSON response -> appends table row with the JSO ...

Tips for customizing the appearance of the react-stripe-checkout form

Could someone please provide guidance on applying custom styles to the react-stripe-checkout form component, such as changing the background color? Visit this link for more information ...

Conceal the href element within a designated UL using JavaScript

Is there a way to only hide the href element in a specific UL element, rather than hiding all href elements with the same class name? Let's consider an example HTML code: <ul class="UL_tag"> <li>Text 1</li> <li>Text 2< ...

Adaptable layout: Utilize fancybox thumbnail gallery to automatically resize and position images at the center of the wrapper, ensuring they are both vertically

I have noticed that there are many questions like mine on SO, but I haven't found a single solution that fully meets my needs. Currently, I am utilizing the fancybox jQuery plugin to create a thumbnail gallery (non-responsive version: here - the gall ...

Having trouble implementing CSS on Google AppEngine platform

As a beginner, I am struggling to get my CSS to work in Google App Engine. In my YAML file, the configuration looks like this: application: helloworld27dec version: 1 runtime: python27 api_version: 1 threadsafe: true handlers: - url: /stylesheets/ sta ...

Styling Radio Buttons based on "Checked" Status

Is there a way to apply a CSS style to the image within this Radio button when the checked attribute is present? <div id="edit-attributes-24-42-wrapper" class="form-item"> <label for="edit-attributes-24-42" class="option"> <input type ...