CODEWITHSUNDEEP
html-tablebootstrap-4eonasdan-datetimepicker
Bernard Polman
Bernard Polman

Reputation: 855

Bootstrap 4 datetimepicker inside table incorrect design

I have a problem with Bootstrap 4 by displaying calendar on input field that is inside a table - the whole design is looking weird and doesn't display correctly. If the input field is outside the table, the design is good.

enter image description here

How it should look:

enter image description here

CSS file is included in BundleConfig.cs

EDIT: This is the CSS styling for tables:

    .table thead:not(.domispicker) {
    background: linear-gradient(to bottom, #187D99 0%,#145F75 1%,#145F75 26%,#187D99 100%);
    color: white;
}

.table tbody tr:not(.domispicker), .table tbody tr:not(.domispicker) input, .table tbody tr:not(.domispicker) select, .table tbody tr:not(.domispicker) textarea {
    background: linear-gradient(to bottom, #f2f2f2 0%,#feffe8 100%) !important;
}

th:not(.domispicker), td:not(.domispicker) {
    vertical-align: middle !important;
}

I'm using 'domispicker' in class for input element but the style is still overriden.

The table html looks like this:

<tbody data-bind="foreach: documentData">
    <tr data-bind="click :$parent.documentDataSelectRow.bind($data,$index()),
                        css: { 'row-selected': $parent.documentDataSelectedRowPosition() != null && $index() == $parent.documentDataSelectedRowPosition() && ForDelete() == false, 'for-delete': ForDelete() == true }">
        <td class="checkbox-column"><span class="fa fa-upload" style="color:darkgreen" data-bind="visible: Id() == 0"></span></td>
        <td>
            <input type="text" class="form-control input-sm" data-bind="value: Description, attr : {'disabled' :  (ForDelete() == true|| OnlyRead() == true) }, event:{ change: $parent.documentDataModified}">
        </td>
        <td data-bind="text: Id() != 0 ? TypeName : '@SharedResources.Index.MedicalDocument', attr : {'disabled' : ForDelete }"></td>
        <td style="position: relative">
            <input id="Doc`enter code here`umentDate" type="text" class="form-control search-input searching-date-from-to picker domispicker" data-bind="datePicker: DocumentDate, maxDate: new Date(), valueUpdate: 'afterkeydown',
                                       attr : {'disabled' : (ForDelete() == true || OnlyRead() == true) }, event:{ click: $parent.documentDataModified}" placeholder="@SharedResources.Index.Date" />
        </td>
        <td id="btnDownload" class="action-column">
            <a style="text-decoration:none;" class="fa fa-download download-nohover" title="@SharedResources.Index.Download" data-bind="attr: { href: DownloadLink },visible: Id() != 0 && ForDelete() == false, click: function(){window.location.href=DownloadLink();}"></a>
        </td>
        <td class="action-column">
            <div class="row-delete fa fa-share icon-flip" title="@SharedResources.Index.Undo" style="color: #096224; cursor: pointer;" data-bind="click: $parent.documentDataUndoRemove, visible: ForDelete() == true"></div>
            <div class="row-delete fa fa-minus-circle" title="@SharedResources.Index.Delete" style="color: #9E0101;cursor: pointer;" data-bind="click: $parent.documentDataRemove, visible: ForDelete() == false, css: { 'icon-disabled': OnlyRead() }"></div>
        </td>
    </tr>
</tbody>

Upvotes: 1

Views: 1329

Answers (1)

max
max

Reputation: 8687

Add custom class to your main table and style only direct children of that table using child combinator (also remove your current CSS code). This will prevent from styling tables which are used inside picker.

HTML:

<table class="table my-table...

CSS:

.my-table > thead {
  background: linear-gradient(to bottom, #187d99 0%, #145f75 1%, #145f75 26%, #187d99 100%);
  color: white;
}
.my-table > tbody > tr,
.my-table > tbody > tr input,
.my-table > tbody > tr select,
.my-table > tbody > tr textarea {
  background: linear-gradient(to bottom, #f2f2f2 0%, #feffe8 100%) !important;
}
.my-table > thead > th,
.my-table > thead > td,
.my-table > tbody > th,
.my-table > tbody > td {
  vertical-align: middle !important;
}

Upvotes: 2

Related Questions