Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add padding to checkbox input when necessary inside form fields

See original GitHub issue

Feature Request

Description

Sometimes I like to have checkboxes inside .ui.form>.fields>.field layouts, but currently it has no padding and puts the checkbox at the top of the field. I think it should pad the checkbox’s top so it lines up with the inputs better.

Example

I used the following CSS to make it look better:

.ui.form .fields .field:not(:only-child) .ui.checkbox {
  margin-top: 2.25em;
}
.ui.form .fields .field:not(:only-child) .ui.toggle.checkbox {
  margin-top: 2.15em;
}
.ui.form .fields .field:not(:only-child) .ui.slider.checkbox {
  margin-top: 1.35em;
}

The :not(:only-child) selector ensures that the checkbox will not have the extra padding if it is the only field in the fields div.

Testcase

https://jsfiddle.net/bha06ugz/

Screenshot

Issue Analytics

State:
Created 4 years ago
Reactions:2
Comments:8 (8 by maintainers)

Top GitHub Comments

1reaction

GammaGamescommented, Apr 2, 2019

Oops I had to go out of town and forgot, I’ll set a reminder to work on it tonight. Thank you for the reminder!

1reaction

GammaGamescommented, Mar 27, 2019

Oops, I forgot about the inline fields! https://jsfiddle.net/fb861xk4/ I’ll try to get something that’s hopefully pr worthy tomorrow

Top Results From Across the Web

Add padding to checkbox input when necessary inside form ...

Sometimes I like to have checkboxes inside .ui.form>.fields>.field layouts, but currently it has no padding and puts the checkbox at the top of ......

Padding between checkbox and label - css - Stack Overflow

Use margin-right . padding is inside the element, and often acts funny with input elements because they are rendered using the OS's native...

<input type="checkbox"> - HTML: HyperText Markup Language

A checkbox allows you to select single values for submission in a form (or ... <input> elements of type checkbox are rendered by...

How to Align a Checkbox and Its Label Consistently Cross ...

Checkbox is one of HTML forms that is used on every website. This tutorial will show how to align checkboxes and their labels...

How to Customize the Style of Individual Form Fields - WPForms

In this tutorial, we'll provide a list of nearly any selector you might need to style individual fields on your forms. Note: This...