flatlogic / awesome-bootstrap-checkbox Goto Github PK

There are should be a separate branch of awesome-bootstrap-checkbox based on Bootstrap 4 version.

Don't know should I post this issue here or for https://github.com/nghuuphuoc/bootstrapvalidator but either ways, these two don't work together, atleast not for me.

1st improvement:

.checkbox input[type=radio],
.checkbox input[type=checkbox] {
        position: absolute;
        left: -1000px;
}

I think using this method instead of display: none; is better, but correct me if I'm wrong. Atleast in my case, this made bootstrapValidator validate my checkboxes/radiobuttons also.

2nd "improvement":
This should probably be reported for bootstrapValidator, instead of here?
I had change every sibling selectors from + into ~ to make this work (not the best possible way to make it work though):

...
...
.checkbox input[type=checkbox]:checked ~ label:after {
    font-family: 'FontAwesome';
    content: "\f00c"; }
.checkbox input[type=checkbox]:disabled ~ label {
    opacity: 0.65; }
.checkbox input[type=checkbox]:disabled ~ label:before {
    background-color: #eeeeee;
...
...

Reason why I had to do this change is because bootstrapValidator places feedback icons () immediately after elements:

<div class="form-group has-feedback">
  <div class="col-sm-8 col-sm-offset-3">
    <div class="checkbox">
      <input type="checkbox" name="terms" id="terms" value="1" required="" data-bv-field="terms" />
      <i class="form-control-feedback" data-bv-field="terms" style="display: none;"></i>
      <label for="terms">I accept the terms of use</label>
    </div>
  <small data-bv-validator="notEmpty" class="help-block" style="display: none;">You must accept the terms of use</small></div>
</div>

Hi there,
I downloaded the zip and opened the index.html under the demo directory. The page looks exactly like your online demo with the exception that the checkmark boxes show a square instead of the checkmark.

Not sure what I am doing incorrectly
Jeff

Styles don't include checkbox-inline. I may tinker with things and do a pull request when I get time.

Is there a way we could incorporate the BS sizes

such as checkbox-xs, checkbox-sm, checkbox-lg etc and refactor the size of the checkbox accordingly?

Thanks

On Safari (mac, 8.0.3 and later), if you click on a radio button all what is below blinks (very quickly). You can see it on the demo page when clicking on one of the radio buttons at the end. You don't have this effect on Firefox or Chrome.

I'm trying to remove the blue glow on a focused checkbox but nothing is working so far. I'm trying something like:

#checkbox1:focus {
  outline: 0px !important;
  -webkit-appearance:none !important;

  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

But I still get the glow. Any suggestions?

Thanks

Its not uncommon for the checkbox html to look like this:

<label><input type='checkbox'> Foo</label>

this does not work with current css.

Great job though, ill keep an eye out for improvements :)

Hi, I love this script. I'd love to see possilbility of rendering radios as checkboxes. I understand if you don't want to implement it (as it's 50% css filesize more), but still - it would be awesome.

Thanks

Hi guys, I had difficulties using your library when building a web app. I had no unique ID for checkboxes and radios to pair them with labels. Only solution was to generate random ID and then use it.

I've found a solution to design checkboxes and radios in your way using your library with checkboxes (radios) nested inside of a label (no "for" and "id" attribute needed). I wish to present it to others. What's the best way to do it? Should I modify your files, or create new files or just fork your whole project and make a new one?

This could be my first contribution so I am sorry I don't know exactly, how it works :-)

Could you please do a check on IE8, the checkbox and radio are all invisible. Can you update to fix this issue? or this plugin doesn't support IE8?

Forget this issue, posted in wrong project.

The link to your demo returns a 404 error.

I use VS2015 and been working with MVC6. I installed this via Bower but noticed it doesnt have the pre-compiled CSS like almost all other bower repos do

Hello,
please can you add this project package to npm as you did in bower?
Thank you.

Well, they kind of do, but the tick does appear correctly centred.

Would be nice if you could create a maintained less version for every version, since bootstrap official repo also uses less and I would like to be able to customize bootstrap and awesome bootstrap checkbox in one workflow.

If you tab through checkboxes and hit enter the checkbox won't be selected.

I use awesome-bootstrap-checkbox without font-awesome (I actually use bootstrap's glyphicon font instead) and I think this might be interesting for others. As far as I can see awesome-bootstrap-checkbox uses only one (!) icon from font-awesome.

I simply add the following to my less code after the @import of awesome-bootstrap-checkbox:

@import "../bower_components/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.less";

@font-family-icon: 'Glyphicons Halflings';
@fa-var-check: "\e013";

.checkbox label::after {
  font-size: 10px;
}

Maybe you could add this to the documentation or even add some kind of configuration option for choosing the icon font.

When I use html from example and add a class to the checkbox, I can't get Jquery change event to fire. Any solution to this problem?

$('.checkboxSort').change(function () {
alert("Checkbox clicked");
});

The html helpers in the razor syntax generate an additional hidden input which causes this checkbox library to not work

Aligning vertically in the middle does not seem to work, no matter what I've tried.
Any suggestions are appreciated

Thanks!

Would be nice to support single controls without displaying the label (useful for checkboxes in tables for example).

Here's what I used:

.checkbox.checkbox-single {
    label {
        width: 0;
        height: 16px;
        visibility: hidden;
        &:before, &:after {
            visibility: visible;
        }
    }
}

As per #26 discussion

Hi Guys
First, Thank You
Have a problem
how check and uncheck with jquery ?
with jquery, when uncheck checkboxs , yet checkboxs are selected

MyCode

        if($(this).is(':checked')){
            $("#pages-result input[type='checkbox']").each(function(){
                $(this).attr("checked","checked");
            });
        }else{
            $("#pages-result input[type='checkbox']").each(function(){
                $(this).removeAttr("checked");
            });
        }

Is there a browser compatibility list/table somewhere?

If not, there should be such a thing in the documentation... hint hint! :-)

Great piece of work!

Is there any workaround to include the use of keyboard?
When I press TAB it just jumps to the next input after the radio, the radiobuttons won't hold focus.

Hi! First of all: Great work! Unfortunately, the checkboxes do not seem to work with Spring MVC JSTL. There seems to be a problem with the hidden input field that is inserted by the form:checkbox tag automatically after the checkbox input field. Here is an example of how the generated HTML looks like:

When I remove the hidden field or move it after the label it works fine (but this is of course not really an option here). I tested this with both Chrome and Firefox.

It's unclear to me what the preferred way to build this is. I used sass/less via command line to build it with the build scripts in the demo directory but I was wondering if that is the "right" way you intended to do it. It'd be nice if the sass or less file was the master copy and built into the other two formats using a tool like gulp or grunt.

Example:

<div class="checkbox" >
                        <input class="inline-block" data-val="true" data-val-required="'Restricted Use Product' must not be empty." id="RestrictedUseProduct" name="RestrictedUseProduct" type="checkbox" value="true">
                        <input name="RestrictedUseProduct" type="hidden" value="false">
                        <label for="RestrictedUseProduct">Restricted Use Product</label>
</div>

The example shows the html generated from html helpers in .net MVC or Ruby on Rails. I fixed my problem by using the ~ selector in the file instead of the + selector. Not sure if this is the best solution in the long run though.

it's already BS 3.3 available and FA 4.0. Please update

I have spent days to try integrating your css into the simple_form gem, however, with no success.
I tried adding a class into the input column, but it seems not working.

f.input :options, as: :boolean, inline_label: 'Option 1', label: false, :class => "checkbox  checkbox-primary"

Please advise.

Impossible to have a label on the left and the checkbox on the right?
What could I do to change that?

Have not found any way to fix the css myself. IE-checkboxes ticks are slightly lower.

Hello,

Looks like there is an actual, existing dependency on font-awesome but fa isn't in the bower.json. I see PR #26 addresses this but just wanted to make sure there was an issue for this as well.

The demo appears to correctly link to bower_components so my guess is that a --save just got missed at some point.

Cheers.

In Django's form templating language, you can either lay out your HTML like so:

<label>
    <input> Foo
</label>

which is generated by the templating syntax:

{{ form.field }}

or you can do:

<label>Description</label>
<input> Foo

which is generated by the templating syntax:

{{ form.field.label_tag }}
{{ form.field }}

but you can't put a <label> tag after an <input> tag (which is required for this library to function):

<input> Foo
<label>Description</label>

because if you try to use the following templating syntax:

{{ form.field }}
{{ form.field.label_tag }}

you will get this instead:

<label>
    <input> Foo
</label>
<label>Description</label>

Something strange is going on, the "checked" mark is invisible. My import order is 1. css, 2. js, 3. initialize js

Hey,

since your demo/bootstrap.css references nonexistent font files, django-pipeline breaks.

Please fix it.

How to revalidate Awesome Bootstrap Checkbox using Formvalidation.IO ..Revalidate is not Working ...
How to fire revalidate event in Formvalidatio.IO for Awesome Bootstrap Checkbox.
Can Anyone Help me??

Hi;
In Less file there is this variable: @fa-var-check.
Where is it defined? Do I need to have font-awesome less package?

Thanks

I have some project with Bootstrap 2.3.x. So I was required to change this lines to make it works:

.checkbox label::after {
    left: 1px;
    top: -1px;
}

.radio label::after {
    left: 4px;
    top: 4px;
}

Maybe there's another workaround?

Hi,

the version currently deployed on npm ( https://www.npmjs.com/package/awesome-bootstrap-checkbox) is 0.3.6.

Unfortunately this version produces build errors concerning @fa-var-check that are fixed in 0.3.7.

Is there any reason 0.3.7 is not puplished on npm?

Regards,

Lucas

Seems like opera has some issues with complicated selectors like that:

.checkbox input[type="checkbox"]:checked + label::after {
    font-family: 'FontAwesome';
    content: "\f00c"; 
}

Checked in Opera 12.17, Windows

It makes much more sense just to use @input-color to color the checkboxes. Currently, it uses @gray which does map out to @input-color but when I am customizing my bootstrap variables, I don't want to change my @lighter-gray, I change the @input-color for my inputs.

Current styles doesn't support the indeterminate states. I know that css can't handle the indeterminate property, but you can support indeterminate states with additional css classes. For ex. when checkbox is indeterminate I can add the checkbox-indeterminate class to wrapper. Just need style this class.

I encountered a problem where mouse events were not passing through the pseudoelement to the underlying checkbox. (Firefox 34 and Safari 8 on MacOS 10.10.)

I was able to fix it by adding "pointer-events: none;" to the .checkbox label::before/after selectors. Not sure if this is a good fix, though!

In the documentation there is a reference to radio-single, however this is nowhere to be found in the css file.

I ran into problem since this library is binding itself directly into "checkbox" class of bootstrap. I had existing code, which is using checkbox (part of that inside library which I cannot change), and applying a-b-c into use broken all checkboxes in this context.

My workaround (and proposed fix) is to add "aw-" prefix into all styles and a-b-c and and have it used something like this "checkbox aw-checkbox aw-checkbox-primary".