Checkbox with no label or ID

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Checkbox with no label or ID

mcnugget asked 9 years ago

Hi, I have a table where I want to put a checkbox in one column in every row. There is a header at the top, so I want no text next to the checkboxes. It seems like I have to have a label element or else the checkbox does not appear. I can create an empty label, but the problem is this still takes up space even when empty and throws off the column alignment. The second issue is that the table is auto-generated, and the checkboxes do not have IDs. It seems like checkboxes in MDB do not work unless they have an ID. Without an ID, I am not able to check any of the checkboxes. Therefore my questions are: 1. How can I create a checkbox with no text/label, without having an empty label that still takes up space? 2. How can I get the checkboxes working when they do not have IDs? Normal checkboxes are not required to have IDs to work. Thanks.

Rey Aquino commented 6 years ago

I have the same problem, I just find another way, I tried to remove and change my 4.5.0/css/mdb.min.css to 4.7.4/css/mdb.min.css version and it works, but my design change a lot. I just need the checkbox work.

Piotr Glejzer staff commented 6 years ago

From version 4.5.0 to version 4.7.4, we changed a lot of components and HTML/CSS/js syntax, we migrated to new FA5 so if you updated from 4.5.4 to 4.7.4 is normally that you have errors and some bugs in your project with design ( CSS/HTML) and probably with JavaScript. We always recommend updating projects systematically to get rid off some unpredictable bugs. Do you have some console errors or something?

Michal Szymanski staff pro premium priority answered 9 years ago

Can you send me a sample of your code? m.szymanski@mdbootstrap.com

mcnugget answered 9 years ago

Sure. Here's an example: 
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Approved?</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Joe Blow</td>
            <td><input type="checkbox" /></td>
        </tr>
        <tr>
            <td>John Doe</td>
            <td><input type="checkbox" /></td>
        </tr>
    </tbody>
</table>
When this is rendered, it doesn't show the checkboxes. I can change the td's to 
<td>
    <input type="checkbox" />
    <label></label>
</td>
Now the checkboxes show up, but the empty label tags still take up space and push the checkboxes over so they are no longer properly aligned in the column. I tried adding "style='display:none;" to the labels, but for some reason hiding the labels makes the checkboxes disappear as well. Also, the checkboxes are not clickable, almost as if they were readonly. Clicking them does not check them. I can solve this by changing the code to 
<td>
    <input type="checkbox" id="checkbox1" />
    <label for="checkbox1"></label>
</td>
Now the checkboxes function correctly. However, as stated in my original post, the checkboxes are atuo-generated and I can't add id's to them. Usually checkboxes should function correctly without requiring an id attribute, but how do I get this working in MDB?

Michal Szymanski staff pro premium priority answered 9 years ago

I'm afraid there isn't easy workaround, because MDB hides standard html checkboxes and overwrite it with the new one, which required both checkbox and label. And because you need 2 elements for MDB checkboxes you also need to set an corresponding ID to connect them. But even if they are auto-generated why cannot you use javascript to iterate through your checkboxes and add a corresponding id to labels and checkboxes itself?

jdyken pro commented 7 years ago

I was searching for this same concern. It would be very helpful in certain circumstances to be able to revert back to having the regular checkbox. Are there any plans to do that in the future?

Michal Szymanski staff pro premium priority commented 7 years ago

Yes, we've added it to ideas. Nevertheless, I cannot tell any specific date right now.

Larry White commented 5 years ago

If you use an empty string for a label you can kinda work around this.

Piotr Glejzer staff commented 5 years ago

thanks for your message! Have a nice day.

LEP answered 5 years ago

Hello,

We're having the same issue as previous posts, we're using a CMS with edition popins.

As you implemented your code to hide each and every checkbox by default, our edition checkboxes do not show (unless we modify the CMS core just because of using MDB ?!)

Why not processing checkboxes with specific classes only ?

Any updates on this ? It doesn't look like a detail to me.

Thank you.

(By the way, I don't think that your answer asking to create additional JS to iterate through existing DOM is a really "serious" workaround...)

Piotr Glejzer staff commented 5 years ago

Hi,

yes, you are totally right. There is a big problem with that. I have no idea why this is working like that. I suggest to our jQuery team to change this behaviour as soon as possible. Sorry about that.

Best,Piotr

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Closed

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
mcnugget
9Support score
1Questions 1Answers
0Snippets likes 0Snippets