Checkbox is hard to click with ripple disabled #4696

rgalaxy · 2018-07-23T18:15:29Z

Versions and Environment

Vuetify: 1.1.8
Vue: 2.5.2
Browsers: Chrome
OS: Windows 10

Steps to reproduce

Click the checkbox

Expected Behavior

Will trigger toggle checkbox by clicking anywhere inside the checkbox

Actual Behavior

Only trigger when clicked on the top left side of the checkbox.

Reproduction Link

https://codepen.io/RGALAXY/pen/rrmNPp

Additional Comments:

It happens because, there is <input> that is too small. only 13x13 px.
while the checkbox is 24x24px.
today i overwrite it via css (but i think it's ugly, but worked)
the DOM is v-input--checkbox > v-input__control > v-input__slot > v-input--selection-controls__input > input

addition (by @jacekkarczmarczyk ):
it happens only when ripple prop is false

The text was updated successfully, but these errors were encountered:

ackushiw · 2018-08-06T04:34:49Z

I've found the same issue even with the ripple. Additionally the icon doesn't register any clicks. I fixed it with the following CSS:

.v-input--checkbox i {
   pointer-events: none;
}
.v-input--checkbox input {
   height: 24px;
   width: 24px;
}

pegiadise · 2018-08-07T08:30:26Z

This also happens with VSwitch when :ripple="false".

* Filter comments to count actual rendered elements * Remove unnecesary conditional * Filter out VNodes with empty text * fix(VImg): allow transition to be disabled * fix(v-combobox): update onEnterDown logic should let v-select-list handle the update if user is selecting index fixes vuetifyjs#5008 * fix(v-slider): remove duplicate change event onMouseUp is already triggered by v-input, our mouseUp usage is more internal for slider, just renamed method fixes vuetifyjs#4996 * fix(v-combobox): prevent default action when using a combobox, enter should be treated differently and not invoke a form submit fixes vuetifyjs#4974 * fix(VMenu): make detached provide reactive fixes vuetifyjs#5010 * fix(VBreadcrumbs): add Themeable classes fixes vuetifyjs#4986 * Fix vuetifyjs#3904: dividers are not shown in dynamic vertical stepper (vuetifyjs#4767) * Fix vuetifyjs#4696: Checkbox is hard to click with ripple disabled (vuetifyjs#4776) * test(v-stepper-ccontent): add provide * [release] 1.2.2

* Filter comments to count actual rendered elements * Remove unnecesary conditional * Filter out VNodes with empty text * fix(VImg): allow transition to be disabled * fix(v-combobox): update onEnterDown logic should let v-select-list handle the update if user is selecting index fixes vuetifyjs#5008 * fix(v-slider): remove duplicate change event onMouseUp is already triggered by v-input, our mouseUp usage is more internal for slider, just renamed method fixes vuetifyjs#4996 * fix(v-combobox): prevent default action when using a combobox, enter should be treated differently and not invoke a form submit fixes vuetifyjs#4974 * fix(VMenu): make detached provide reactive fixes vuetifyjs#5010 * fix(VBreadcrumbs): add Themeable classes fixes vuetifyjs#4986 * Fix vuetifyjs#3904: dividers are not shown in dynamic vertical stepper (vuetifyjs#4767) * Fix vuetifyjs#4696: Checkbox is hard to click with ripple disabled (vuetifyjs#4776) * test(v-stepper-ccontent): add provide * [release] 1.2.2 * fix(v-footer): fix applicationProperty update add new value for inset footer to applicationable fixes vuetifyjs#4686 * [release] 1.1.16 * [release] 1.2.3

* Filter comments to count actual rendered elements * Remove unnecesary conditional * Filter out VNodes with empty text * fix(VImg): allow transition to be disabled * fix(v-combobox): update onEnterDown logic should let v-select-list handle the update if user is selecting index fixes vuetifyjs#5008 * fix(v-slider): remove duplicate change event onMouseUp is already triggered by v-input, our mouseUp usage is more internal for slider, just renamed method fixes vuetifyjs#4996 * fix(v-combobox): prevent default action when using a combobox, enter should be treated differently and not invoke a form submit fixes vuetifyjs#4974 * fix(VMenu): make detached provide reactive fixes vuetifyjs#5010 * fix(VBreadcrumbs): add Themeable classes fixes vuetifyjs#4986 * Fix vuetifyjs#3904: dividers are not shown in dynamic vertical stepper (vuetifyjs#4767) * Fix vuetifyjs#4696: Checkbox is hard to click with ripple disabled (vuetifyjs#4776) * test(v-stepper-ccontent): add provide * [release] 1.2.2 * fix(v-footer): fix applicationProperty update add new value for inset footer to applicationable fixes vuetifyjs#4686 * [release] 1.1.16 * [release] 1.2.3 * fix(VMenu): inherit light/dark from v-app playground: https://pastebin.com/raw/jtLrtVtP * fix(DatePicker): Title spacing when month === August (vuetifyjs#5027) * fix(v-autocomplete): add conditional for single-line fixes vuetifyjs#5076 * fix(v-list-tile-action): add support for v-html fixes vuetifyjs#5037 * feat(v-carousel): convert to ts * refactor(v-carousel): update review items * chore(v-carousel): update type * refactor(v-carousel): update feedback items * feat(filterable): convert to ts * feat(returnable): convert to ts * feat(components-index): convert to ts * feat(colorable): convert to ts * refactor(colors.d.ts): move file * fix(translatable): partially revert 5f661a3 reverted back to original logic to correct scrolling bug fixes vuetifyjs#4847 * [release] 1.2.4 * Fix unit tests after merging 1.2.4 by updating snapshot.

* Filter comments to count actual rendered elements * Remove unnecesary conditional * Filter out VNodes with empty text * fix(VImg): allow transition to be disabled * fix(v-combobox): update onEnterDown logic should let v-select-list handle the update if user is selecting index fixes vuetifyjs#5008 * fix(v-slider): remove duplicate change event onMouseUp is already triggered by v-input, our mouseUp usage is more internal for slider, just renamed method fixes vuetifyjs#4996 * fix(v-combobox): prevent default action when using a combobox, enter should be treated differently and not invoke a form submit fixes vuetifyjs#4974 * fix(VMenu): make detached provide reactive fixes vuetifyjs#5010 * fix(VBreadcrumbs): add Themeable classes fixes vuetifyjs#4986 * Fix vuetifyjs#3904: dividers are not shown in dynamic vertical stepper (vuetifyjs#4767) * Fix vuetifyjs#4696: Checkbox is hard to click with ripple disabled (vuetifyjs#4776) * test(v-stepper-ccontent): add provide * [release] 1.2.2 * V-Autocomplete: hide-no-data also controls opening menu upon item update fixes vuetifyjs#4663 * fix(v-footer): fix applicationProperty update add new value for inset footer to applicationable fixes vuetifyjs#4686 * [release] 1.1.16 * [release] 1.2.3 * fix(VMenu): inherit light/dark from v-app playground: https://pastebin.com/raw/jtLrtVtP * fix(DatePicker): Title spacing when month === August (vuetifyjs#5027) * fix(v-autocomplete): add conditional for single-line fixes vuetifyjs#5076 * fix(v-list-tile-action): add support for v-html fixes vuetifyjs#5037 * fix(v-navigation-drawer): pull in Dependent mixin for click-outside * feat(v-carousel): convert to ts * refactor(v-carousel): update review items * chore(v-carousel): update type * refactor(v-carousel): update feedback items * feat(dependent): convert to ts * feat(filterable): convert to ts * feat(returnable): convert to ts * feat(components-index): convert to ts * feat(colorable): convert to ts * refactor(colors.d.ts): move file * fix(translatable): partially revert 5f661a3 reverted back to original logic to correct scrolling bug fixes vuetifyjs#4847 * [release] 1.2.4 * style(v-pagination): button cutting the page number When props:length is a very large number, the number of the button protrudes. # <type>: (If applied, this commit will...) <subject> (Max 50 char) # |<---- Using a Maximum Of 50 Characters ---->| Hard limit to 72 -->| # Explain why this change is being made # |<---- Try To Limit Each Line to a Maximum Of 72 Characters ---->| # Provide links to any relevant issues, articles, commits, or other # pull requests # Example: See #23, fixes vuetifyjs#58 # --- COMMIT END --- # <type> can be # feat (new feature) # fix (bug fix) # refactor (refactoring production code) # style (formatting, missing semi colons, etc; no code change) # test (adding or refactoring tests; no production code change) # chore (updating npm scripts etc; no production code change) # -------------------- # Remember to # Capitalize the subject line # Use the imperative mood in the subject line # Do not end the subject line with a period # Separate subject from body with a blank line (comments don't count) # Use the body to explain what and why vs. how # Can use multiple lines with "-" for bullet points in body # # If you can't summarize your changes in a single line, they should # probably be split into multiple commits # -------------------- # For more information about this template, check out # https://gist.github.com/adeekshith/cd4c95a064977cdc6c50 * fix(iterable): rows-per-page selector not inheriting theme * [release] 1.2.5 * fix(VStepperStep): use colorable mixin fixes vuetifyjs#5183 * test for vuetifyjs#5183 * Fix vuetifyjs#4760: show next pagination page if current page is last * [release] 1.2.6

* Filter comments to count actual rendered elements * Remove unnecesary conditional * Filter out VNodes with empty text * fix(VImg): allow transition to be disabled * fix(v-combobox): update onEnterDown logic should let v-select-list handle the update if user is selecting index fixes vuetifyjs#5008 * fix(v-slider): remove duplicate change event onMouseUp is already triggered by v-input, our mouseUp usage is more internal for slider, just renamed method fixes vuetifyjs#4996 * fix(v-combobox): prevent default action when using a combobox, enter should be treated differently and not invoke a form submit fixes vuetifyjs#4974 * fix(VMenu): make detached provide reactive fixes vuetifyjs#5010 * fix(VBreadcrumbs): add Themeable classes fixes vuetifyjs#4986 * Fix vuetifyjs#3904: dividers are not shown in dynamic vertical stepper (vuetifyjs#4767) * Fix vuetifyjs#4696: Checkbox is hard to click with ripple disabled (vuetifyjs#4776) * test(v-stepper-ccontent): add provide * [release] 1.2.2 * V-Autocomplete: hide-no-data also controls opening menu upon item update fixes vuetifyjs#4663 * fix(v-footer): fix applicationProperty update add new value for inset footer to applicationable fixes vuetifyjs#4686 * [release] 1.1.16 * [release] 1.2.3 * fix(VMenu): inherit light/dark from v-app playground: https://pastebin.com/raw/jtLrtVtP * fix(DatePicker): Title spacing when month === August (vuetifyjs#5027) * fix(v-autocomplete): add conditional for single-line fixes vuetifyjs#5076 * fix(v-list-tile-action): add support for v-html fixes vuetifyjs#5037 * fix(v-navigation-drawer): pull in Dependent mixin for click-outside * feat(v-carousel): convert to ts * refactor(v-carousel): update review items * chore(v-carousel): update type * refactor(v-carousel): update feedback items * feat(dependent): convert to ts * feat(filterable): convert to ts * feat(returnable): convert to ts * feat(components-index): convert to ts * feat(colorable): convert to ts * refactor(colors.d.ts): move file * fix(translatable): partially revert 5f661a3 reverted back to original logic to correct scrolling bug fixes vuetifyjs#4847 * [release] 1.2.4 * style(v-pagination): button cutting the page number When props:length is a very large number, the number of the button protrudes. # <type>: (If applied, this commit will...) <subject> (Max 50 char) # |<---- Using a Maximum Of 50 Characters ---->| Hard limit to 72 -->| # Explain why this change is being made # |<---- Try To Limit Each Line to a Maximum Of 72 Characters ---->| # Provide links to any relevant issues, articles, commits, or other # pull requests # Example: See #23, fixes vuetifyjs#58 # --- COMMIT END --- # <type> can be # feat (new feature) # fix (bug fix) # refactor (refactoring production code) # style (formatting, missing semi colons, etc; no code change) # test (adding or refactoring tests; no production code change) # chore (updating npm scripts etc; no production code change) # -------------------- # Remember to # Capitalize the subject line # Use the imperative mood in the subject line # Do not end the subject line with a period # Separate subject from body with a blank line (comments don't count) # Use the body to explain what and why vs. how # Can use multiple lines with "-" for bullet points in body # # If you can't summarize your changes in a single line, they should # probably be split into multiple commits # -------------------- # For more information about this template, check out # https://gist.github.com/adeekshith/cd4c95a064977cdc6c50 * fix(iterable): rows-per-page selector not inheriting theme * [release] 1.2.5 * fix(VStepperStep): use colorable mixin fixes vuetifyjs#5183 * test for vuetifyjs#5183 * Fix vuetifyjs#4760: show next pagination page if current page is last * [release] 1.2.6 * fix(v-radio): remove bottom margin if only or last child, do not add margin fixes vuetifyjs#5162 * fix(v-autocomplete): allow setSearch for numeric 0 fixes vuetifyjs#5110 * [v-tab] Fix anchor hash routing (vuetifyjs#5124) * fix(v-messages): change assigned key fixes vuetifyjs#4880 * fix(v-select): remove change event for external changes fixes vuetifyjs#5006 * fix(v-text-field): change mouseup focus to conditional should only focus the input if the originating mousedown was on the element fixes vuetifyjs#5018 * fix(VLinearProgress): invalid class applied when using css color * fix(VEditDialog): apply theme classes to content (vuetifyjs#5152) * fix(VEditDialog): apply theme classes to content fixes vuetifyjs#5127 * test: update snapshots * [release] 1.2.7 * Update snapshots after merge.

* Filter comments to count actual rendered elements * Remove unnecesary conditional * Filter out VNodes with empty text * fix(VImg): allow transition to be disabled * fix(v-combobox): update onEnterDown logic should let v-select-list handle the update if user is selecting index fixes vuetifyjs#5008 * fix(v-slider): remove duplicate change event onMouseUp is already triggered by v-input, our mouseUp usage is more internal for slider, just renamed method fixes vuetifyjs#4996 * fix(v-combobox): prevent default action when using a combobox, enter should be treated differently and not invoke a form submit fixes vuetifyjs#4974 * fix(VMenu): make detached provide reactive fixes vuetifyjs#5010 * fix(VBreadcrumbs): add Themeable classes fixes vuetifyjs#4986 * Fix vuetifyjs#3904: dividers are not shown in dynamic vertical stepper (vuetifyjs#4767) * Fix vuetifyjs#4696: Checkbox is hard to click with ripple disabled (vuetifyjs#4776) * test(v-stepper-ccontent): add provide * [release] 1.2.2 * V-Autocomplete: hide-no-data also controls opening menu upon item update fixes vuetifyjs#4663 * fix(v-footer): fix applicationProperty update add new value for inset footer to applicationable fixes vuetifyjs#4686 * [release] 1.1.16 * [release] 1.2.3 * fix(VMenu): inherit light/dark from v-app playground: https://pastebin.com/raw/jtLrtVtP * fix(DatePicker): Title spacing when month === August (vuetifyjs#5027) * fix(v-autocomplete): add conditional for single-line fixes vuetifyjs#5076 * fix(v-list-tile-action): add support for v-html fixes vuetifyjs#5037 * fix(v-navigation-drawer): pull in Dependent mixin for click-outside * feat(v-carousel): convert to ts * refactor(v-carousel): update review items * chore(v-carousel): update type * refactor(v-carousel): update feedback items * feat(dependent): convert to ts * feat(filterable): convert to ts * feat(returnable): convert to ts * feat(components-index): convert to ts * feat(colorable): convert to ts * refactor(colors.d.ts): move file * fix(translatable): partially revert 5f661a3 reverted back to original logic to correct scrolling bug fixes vuetifyjs#4847 * [release] 1.2.4 * style(v-pagination): button cutting the page number When props:length is a very large number, the number of the button protrudes. # <type>: (If applied, this commit will...) <subject> (Max 50 char) # |<---- Using a Maximum Of 50 Characters ---->| Hard limit to 72 -->| # Explain why this change is being made # |<---- Try To Limit Each Line to a Maximum Of 72 Characters ---->| # Provide links to any relevant issues, articles, commits, or other # pull requests # Example: See #23, fixes vuetifyjs#58 # --- COMMIT END --- # <type> can be # feat (new feature) # fix (bug fix) # refactor (refactoring production code) # style (formatting, missing semi colons, etc; no code change) # test (adding or refactoring tests; no production code change) # chore (updating npm scripts etc; no production code change) # -------------------- # Remember to # Capitalize the subject line # Use the imperative mood in the subject line # Do not end the subject line with a period # Separate subject from body with a blank line (comments don't count) # Use the body to explain what and why vs. how # Can use multiple lines with "-" for bullet points in body # # If you can't summarize your changes in a single line, they should # probably be split into multiple commits # -------------------- # For more information about this template, check out # https://gist.github.com/adeekshith/cd4c95a064977cdc6c50 * fix(iterable): rows-per-page selector not inheriting theme * [release] 1.2.5 * fix(VStepperStep): use colorable mixin fixes vuetifyjs#5183 * test for vuetifyjs#5183 * Fix vuetifyjs#4760: show next pagination page if current page is last * [release] 1.2.6 * fix(v-radio): remove bottom margin if only or last child, do not add margin fixes vuetifyjs#5162 * fix(v-autocomplete): allow setSearch for numeric 0 fixes vuetifyjs#5110 * [v-tab] Fix anchor hash routing (vuetifyjs#5124) * fix(v-messages): change assigned key fixes vuetifyjs#4880 * fix(v-select): remove change event for external changes fixes vuetifyjs#5006 * fix(v-text-field): change mouseup focus to conditional should only focus the input if the originating mousedown was on the element fixes vuetifyjs#5018 * fix(VLinearProgress): invalid class applied when using css color * fix(VEditDialog): apply theme classes to content (vuetifyjs#5152) * fix(VEditDialog): apply theme classes to content fixes vuetifyjs#5127 * test: update snapshots * [release] 1.2.7 * fix(v-ripple): decrease click target size on selection control ripple (vuetifyjs#5250) hopefully removes instances where click targets overlap between adjacent inputs closes vuetifyjs#2661 * fix(v-stepper): add registrable mixin fixes vuetifyjs#3330 * fix(v-select): change isDisabled conditional should use regular text color when readonly fixes vuetifyjs#5051 * fix(v-dialog): always remove scrollbar when fullscreen fixes vuetifyjs#3101 * fix(v-ripple): only modify position if current one is static (vuetifyjs#5249) * fix(v-ripple): only modify position if current one is static solves problems when using for example position sticky closes vuetifyjs#2573 * chore(ripple): ignore eslint for max-statements * [release] 1.2.8

jacekkarczmarczyk added T: bug Functionality that does not work as intended/expected T: regression Something that used to work but we broke labels Jul 23, 2018

KaelWD changed the title ~~Checkbox is hard to click when used without label.~~ Checkbox is hard to click with ripple disabled Jul 29, 2018

sjohnson18 mentioned this issue Aug 2, 2018

Fix #4696: Checkbox is hard to click with ripple disabled #4776

Merged

9 tasks

KaelWD mentioned this issue Aug 11, 2018

[Bug Report] v-switch with ripple false has almost no click space #4837

Closed

johnleider closed this as completed in c236f66 Sep 4, 2018

lock bot locked as resolved and limited conversation to collaborators Sep 4, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Checkbox is hard to click with ripple disabled #4696

Checkbox is hard to click with ripple disabled #4696

rgalaxy commented Jul 23, 2018 •

edited

ackushiw commented Aug 6, 2018

pegiadise commented Aug 7, 2018

Checkbox is hard to click with ripple disabled #4696

Checkbox is hard to click with ripple disabled #4696

Comments

rgalaxy commented Jul 23, 2018 • edited

Versions and Environment

Steps to reproduce

Expected Behavior

Actual Behavior

Reproduction Link

Additional Comments:

ackushiw commented Aug 6, 2018

pegiadise commented Aug 7, 2018

rgalaxy commented Jul 23, 2018 •

edited