Customize your radio buttons to display as stylish boxes with Bootstrap

Check out my Fiddle here...

The radio buttons are displaying correctly in the fiddle.

<div class="element-radio" title="Do you want to float the text to the left, right, or not at all?"><h4 class="title" style="font-weight: bold;">Float (left, right or none)</h4>       
    <div class="column column3">
        <label>
            <input type="radio" name="radio" value="Left" />
                <span>Left</span>
        </label>
    </div>
    <span class="clearfix"></span>
    <div class="column column3">
        <label><input type="radio" name="radio" value="Right" />
            <span>Right</span>
        </label>
    </div>
    <span class="clearfix"></span>
    <div class="column column3">
        <label>
            <input type="radio" name="radio" value="None" />
                <span>None</span>
        </label>
    </div>
    <span class="clearfix"></span>
    </div>

However, when I view the website I'm working on, located here, the radio buttons appear as small boxes and are unresponsive.

This is the Bootstrap CDN that I am using -

Strange thing is, the website functions properly locally but not once it's uploaded to the server.

Any solutions or suggestions?

Answer №1

Sorry, but the reference you are using to load this file is invalid.

file:///C:/Users/jnewnam/Documents/EDMC%20App%20Portal%20Redo/Formoid/html/logi‌​n_files/formoid1/formoid.ttf`

Answer №2

To make the radio buttons visible on your webpage, simply remove the opacity: 0.01; line from the specified class in your styles.css file:

.formoid-metro-cyan input[type="checkbox"], .formoid-metro-cyan input[type="radio"] {
    z-index: 1;
    position: absolute;
    float: left;
    width: 1em;
    height: 1em;
    font-size: 1em;
    /* Removing opacity will show the radio buttons */
    margin: 0px;
    cursor: pointer;
}

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

Interactive search tool for toggling visibility of elements

Hello everyone, this is my initial post on StackOverflow. Keeping my fingers crossed that it goes smoothly! <input type="Text" id="filterTextBox" placeholder="Filter by name"/> <script type="text/javascript" src="/resources/events.js"></scr ...

Once the save operation is finished, I retrieve the collection from the server. However, since the fetch is asynchronous, the view is rendered before the fetch is fully complete

When making a fetch call on a collection, I then perform another fetch inside the success methods to retrieve a separate collection. Once both collections have been obtained, I combine them and render them to the view. However, after saving a new item in ...

How can you create a unique custom border for an image and display it on another image?

I am working towards achieving a specific output similar to the one shown in this https://i.stack.imgur.com/ejiYC.png image. Currently, I have successfully created the border section. Now, my next challenge is how to overlap images and apply borders as de ...

Achieving a single anchor link to smoothly scroll to two distinct sections within a single page using React

There is a sidebar section alongside a content section. The sidebar contains anchor links that, when clicked, make the corresponding content scroll to the top on the right-hand side. However, I also want the sidebar link that was clicked to scroll to the ...

Wrapbootstrap offers dynamic design options for Java-based web applications

I recently obtained a bootstrap theme from the website wrapbootstrap to use in my Java web application. However, I am unsure of where to begin with it. Despite having already added the bootstrap css to my application, I now wish to remove it and replace it ...

Bootstrap 3.2.0 Grid Column Creation Problem Identified

On my webpage using Bootstrap 3.2.0, I have a layout that includes dynamic column generation and content within those columns. However, I am facing an issue with this setup. Can anyone advise me on how to resolve it? Your help is greatly appreciated. ...

Installation and execution of TypeScript jQuery / Bootstrap definition file on a local machine using npm typings: A step-by-step guide

Struggling to set up TypeScript jQuery and Bootstrap definition files in my new project using npm typings. Below are the steps I followed: 1- Open cmd, navigate to my project folder, and enter the following commands: npm install typings --global typings ...

Automatically adapt the height of a bootstrap button based on the dimensions of other bootstrap buttons

First and foremost, my objective is to centrally align a glyphicon both vertically and horizontally within a button. Despite attempting CSS attributes like position: relative; and position: absolute;, my efforts have been in vain. You can check out the sam ...

Is there a way to potentially utilize window.open() to open a specific section of a webpage?

My HTML page consists of 2 div blocks and 2 links. I want to open the content of the first div in a new window when the first link is clicked, and the content of the second div in another new window when the second link is clicked. You can find the code h ...

Countdown Clock in JavaScript for Automatic Logout

I am currently working on creating a countdown timer in JavaScript that should decrement the value of a field by one every minute (for example, starting at 20 and then changing to 19, 18, 17, and so on). However, I am facing issues with its functionality ...

React - Separate colors for different containers

I have been struggling with this issue repeatedly, yet I still haven't found the most efficient solution for it. Imagine having 2 DIVs, A and B, both nested inside a container with columns assigned to each. What would be the optimal way to fill a back ...

The presence of ng-show dynamically adjusts the minimum height of a div element

I am encountering an issue with a div that has the class of wrapper. Inside this div, there is a parent div with the class of content-wrapper. The wrapper div includes a conditional directive ng-show which toggles between displaying or hiding its content. ...

Is it advisable to perform unit testing on my JavaScript code?

I'm interested in exploring the potential value of using QUnit. However, I am completely new to testing, especially with JS, and don't know where to begin. I would appreciate any guidance on starting unit testing for an application that already ...

I'm attempting to access a PHP file by clicking a button using AJAX and jQuery

I am just starting to learn the basics of jQuery and AJAX. I have already attempted to solve this problem by checking previous answers on Stackoverflow, but the code provided did not work for me. I have created two pages, index.php and testing.php, with a ...

The method of altering a menu link in WordPress using jQuery varies according to whether the user is logged in or not

I need to update the last link on my menu. When a user is logged in, it should display a profile link; otherwise, it should show a sign-up link. ...

Encountering issues with implementing bootstrap-datepicker on cloned rows, as the values remain locked to the first date field

Encountered an issue with cloning rows using bootstrap-datepicker and bootstrap. To reproduce the problem: 1. Select a date in the first input field (id_form-0-expense_date_item). 2. Add another row and select a date in the second input field, which shoul ...

How can I pass the dynamically generated ID from PHP to AJAX/jQuery using an anchor tag?

I'm seeking help with jQuery and Ajax as I am new to it. My issue is that I have multiple 'edit' buttons in a table, one for each row's data. When I click on an edit button to modify the data, they all open at once instead of just the s ...

The div element fails to display even after invoking a JavaScript function to make it visible

As a newcomer to JavaScript & jQuery, please bear with me as I ask a very basic question: I have created the following div that I want to display when a specific JavaScript function is called: <div id='faix' class="bg4 w460 h430 tac poa ...

Collapsible Rows in Material-UI Table seamlessly integrated with regular rows

While using material-ui v4, I encountered an issue where my collapsible row columns are not aligning properly with my regular columns. Below is a photo and the code snippet for reference. As you can see in the image, when I expand the Frozen Yogurt row, th ...

Masking of the Navigation Button

I designed a responsive navigation bar, but in mobile view, the menu icon is being hidden by the menu headings when displayed. Check out the scenario below with a provided CodePen link. I attempted to adjust padding and float properties without success. An ...