Form Editor: radio/checkbox values table align / distance in Bootstrap Theme

[Timo-Breumelhof]

When editing the values of a set of checkbox or radio inputs the inputs for the values are very narrow. This show especially when you use a DNN Bootstrap Theme.

[Timo-Breumelhof]

Note to self: See _alpaca-table.less

.ModOpenContentC, .ModOpenFormC {

div { // The first div, of which we cannot predict the base class 100% .alpaca-field { .table {

            // For the icons at the end, hide the word actions as it takes up too much space
            th {
                &:last-child {
                    font-size: 0em !important;
                }
            }

            // Make the action bar buttons smaller
            .actionbar {
                button {
                    font-size: 0.9em;
                    padding: 0.3em 0.5em;
                }
            }

            .alpaca-field-tablerow {

                .form-group {
                    // This gets a bootstrap row margin which we don't need
                    margin: 0 !important;
                }

                // Make font-size and padding aroiund tabel cells smaller
                >td {
                    font-size: 0.8em !important;
                    padding: 0;

                    &:last-child {
                        min-width: 0;
                    }

                    >div {
                        padding: 0.3em;

                        // Make the column full width (not sure why it's used here)
                        .col-sm-9 {
                            max-width: 100%;
                            width: 100%;
                            padding: 0 !important;
                            margin: 0;
                        }
                    }
                }

            }
        }
    }

// For the Fourm builder
&.form-builder {

    .alpaca-container-item {
        border-bottom: solid 1px @GreyLight;

            border: none;
    }

    .table {

        .alpaca-field-tablerow {

            border-bottom: solid 1px @GreyLight;

            input{ // The Inputs have a large padding
                &.form-control{
                    padding: 0.3em;
                }
            }

            // Make sure the buttons stay next to each other
            .btn-group {
                white-space: nowrap;

                >.btn {
                    float: none;
                }

            }
        }

    }

}

// Only for the editor tables, not for the form builder 
&:not(.form-builder) {
    .alpaca-field {
        .table {

            // Make the columns equal width 
            .alpaca-field-tablerow {
                >td {
                    min-width: 120px;

                    &:last-child {
                        min-width: 0;
                        width: 0;
                        background: #fff;
                        border: solid 1px #ddd;
                    }
                }

                // And the action button column vertical
                .actionbar {
                    button {
                        display: block;
                        margin: 0.3em;
                    }
                }

                // Hide the Title above a filed as it's only a repatition of the columns headers
                legend {
                    font-size: 0.7em;
                }
            }
        }

    }

    // Remove padding of the icon bar of CKEditor
    .cke_top {
        padding: 0;
    }

    // Correct for the padding isnide the body of CKEditor, hack as we cannot reacht the body itself from this style sheet
    .cke_contents {
        iframe {
            margin: -15px;
        }
    }

}

}

}