pbds-checkbox misaligned in table row

Question

pbds-checkbox misaligned in table row

jrnorrisjr opened this issue 8 years ago · 5 comments

The attached screenshot shows the issue where the checkbox is not aligned with the text in the table row. The actual code:
<td class="text-center" style="padding-left: 0px; padding-right: 0px;"> <pbds-checkbox disabled="(job.deleted == true) || (job.mailed == true)" ng-model="job.deleteFlag" ng-change="psJobsCtrl.deleteJobChanged(job)"></pbds-checkbox> </td>
Screenshot:

Answer 1 · 2017-03-27T20:30:15.000Z

Bootstrap adds 10px margin above and below an element with class="checkbox"

For now, see https://plnkr.co/edit/a9swQdW1fghvCuYNf8DG?p=preview

I added a class on the td and added a class to the css:

.checkbox-cell .checkbox {
  margin: 0;
}

We will look at a better solution in the next release.

Answer 2 · 2017-03-27T20:34:50.000Z

Thanks Steve. You are quick! Jim On Mar 27, 2017 16:30, "Steve Lombardi" <notifications@github.com> wrote: Bootstrap adds 10px margin above and below something with class="checkbox" For now, see https://plnkr.co/edit/a9swQdW1fghvCuYNf8DG?p=preview I added a class on the td and added a class to the css: .checkbox-cell .checkbox { margin: 0; } We will look at a better solution in the next release. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#24 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHv2UZ26q3jcs2KyUaALXgWzWQPhY-Ikks5rqBxYgaJpZM4Mqv8e> .

Answer 3 · 2017-03-28T11:49:15.000Z

Hi Steve, That made it worse. The checkbox is now at the bottom of the row. Screenshot attached. Jim

…

On Mon, Mar 27, 2017 at 4:34 PM, Jim Norris ***@***.***> wrote: Thanks Steve. You are quick! Jim On Mar 27, 2017 16:30, "Steve Lombardi" ***@***.***> wrote: Bootstrap adds 10px margin above and below something with class="checkbox" For now, see https://plnkr.co/edit/a9swQdW1fghvCuYNf8DG?p=preview I added a class on the td and added a class to the css: .checkbox-cell .checkbox { margin: 0; } We will look at a better solution in the next release. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#24 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHv2UZ26q3jcs2KyUaALXgWzWQPhY-Ikks5rqBxYgaJpZM4Mqv8e> .

Answer 4 · 2017-03-28T13:51:28.000Z

Follow what's in the plunker. It works fine there.

Answer 5 · 2017-03-28T14:12:50.000Z

I did follow what's in the plunker which you can see in the screenshot. Checkboxes moved down so something else must be affecting it.

…

On Mar 28, 2017 9:51 AM, "Steve Lombardi" ***@***.***> wrote: Follow what's in the plunker. It works fine there. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#24 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHv2UYuiXxND0VTKy3HSdm84zuc8hzMPks5rqRBggaJpZM4Mqv8e> .