Share via

Checkbox Not showing in browser, even though the class is there when inspecting it

Claudia Pinson 46 Reputation points
2022-10-23T17:31:22.54+00:00

Hi,

I am building an ASP.NET MVC web application, and am adding some checkboxes to a page, with a certain class "css-checkbox" applied to the <input> element for the checkbox.

For some reason, as soon as I add this particular class "css-checkbox", the checkbox itself does not show.

Meaning: before I add this class to this <input> element, there is a checkbox showing, as I use bootstrap ui. After I add this particular class, I expect the styling of the checkbox to change, so it has a different appearance, but somehow, this checkbox will disppear altogether, and no checkbox is showing.

I inspected this element in the browser, and this particular class does show up in the css panel.

I suspected the some js file is interfering with this class, so I commented out all the js files on this page, 1 by 1, but none of this made any difference.

I searched around and tried different suggestions, like adding "display: inline-block; visibility: visible" etc. to this >input> element, but nothing I tried has worked.

So I'd like to ask for some ideas: how can I find out why this does not show, and how to fix it? Basically when I inspect the element, the class is there, but the checkbox ieself does not show in the browser.

Here is my html code:

<input type="checkbox" name="TicketCategories[0].Checked" value="false" id="TicketCategories_0__Checked" class="css-checkbox" />

Here is the class:

input[type=checkbox].css-checkbox {
position: absolute;
z-index: -1000;
left: -1000px;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
/-webkit-appearance: checkbox !important;/
}

On this page, I have these js files, in the <head>:

<script src="/backend/js/modernizr.custom.js" type="text/javascript"></script>
<script src="/backend/js/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="/backend/js/jquery-ui-1.11.2.min.js" type="text/javascript" ></script>
<script src="/backend/js/modernizr.custom.js" type="text/javascript"></script>

Then at the bottom of this page, I have the following js files, and some other javascript specifically for this page, but have nothing to do with the checkbox:

<script src="/backend/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/backend/js/accordion.js"></script>
<script type="text/javascript" src="/frontend/js/data_tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="/frontend/js/data_tables/dataTables.responsive.js"></script>
<script type="text/javascript" src="/frontend/js/data_tables/shCore.js"></script>

As mentioned, I have commented out these js files, but none fixed the problem.

Any idea/suggestion will be appreciated! I have spent a few days on this, and searched around; but have not found anything that helped.

Thanks,
Claudia

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,452 questions
0 comments

3 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Deepak-MSFT 2,196 Reputation points Microsoft Vendor
    2022-10-24T07:04:52.307+00:00

    Hi @Claudia Pinson ,

    I have tried to check your sample code and found that the issue is related to your CSS code.

    CSS properties Position, Left, Height and Width are causing the issue here.

    I would suggest you check the usage of those properties in the documentation.

    With the Position absolute, you could place the element anywhere on the page.

    when you pass the negative value for Left then it might put the element out of screen and with absolute position it might generate this kind of issue.

    You have set height and width as 1 px. If you render an element with the 1px size then it appear as a small dot on the screen. You could increase the size of the height and width.

    when I try to uncheck the Position: absolute , left:-1000px , height:1px , width:1px then you could see the checkbox.

    253445-14.gif

    Best Regards,
    Deepak

    ----------

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments
  2. Claudia Pinson 46 Reputation points
    2022-10-26T13:49:07.853+00:00

    Hi Deepak,

    Thanks for the response. However, with the changes you suggested, the checkbox shown in the UI is NOT what it should be...Let me explain:

    1. the checkbox shown in your image is the "original" checkbox, not the "New" checkbox that this css-checkbox class intends to show;
    2. In my question, I said "before I add this class to this <input> element, there is a checkbox showing, as I use bootstrap ui. After I add this particular class, I expect the styling of the checkbox to change, so it has a different appearance,"

    What you have shown is the "original" checkbox - which will show if I do not apply this "css-checkbox" class at all.

    After this class is added, the new checkbox should look different - please see attached screenshot.

    Also a related question: I'm trying to build this page modeling after an existing application, which has the new checkbox. It uses the exact same class and it works; meaning, the new checkbox UI is displayed correctly.

    Meaning, if I open my application and this existing application side-by-side in browser, use "inspect" on the checkbox, I would see the same classes being applied to the <input>element, but somehow in my app, this checkbox would not show.

    I want to share this as I want to inform you: this class "css-checkbox", in its current definition, works on an existing page already.

    Please let me know if you have any new suggestions?

    Thanks,
    Claudia

    254356-checkbox-new.png

    0 comments
  3. Claudia Pinson 46 Reputation points
    2022-10-26T13:52:17.72+00:00

    Hi Deepak,

    For more info - 254358-checkbox-checked-new.pngI also wanted to provide the screenshot for the NEw checkbox UI that I want to achieve, after you check it. Please see screenshot attached.

    As you can, this is every different that the one you have shown, which is the original/default one.

    Thanks,
    Claudia

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.