Skip to content

Commit 7670e7b

Browse files
committed
Fix Bootstrap buttons and table styles
1 parent 94b5b24 commit 7670e7b

File tree

2 files changed

+72
-36
lines changed

2 files changed

+72
-36
lines changed

css/ui.jqgrid.bootstrap4.css

+65-29
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@
1515
.ui-jqgrid div {
1616
}
1717
.ui-jqgrid table {
18+
border-collapse: separate;
19+
border-spacing: 0;
20+
border-width: 0;
1821
border-style: none;
1922
}
2023
.ui-jqgrid table td {
@@ -31,6 +34,9 @@
3134
.ui-jqgrid > .ui-jqgrid-view *,
3235
.ui-jqgrid > .ui-jqgrid-view *:before,
3336
.ui-jqgrid > .ui-jqgrid-view *:after {
37+
-webkit-box-sizing: inherit;
38+
-moz-box-sizing: inherit;
39+
box-sizing: inherit;
3440
}
3541

3642
/* Caption of grid and title of ui-jqdialog */
@@ -54,6 +60,12 @@
5460
/* Close/Hide button */
5561
.ui-jqgrid-titlebar > .ui-jqgrid-titlebar-close,
5662
.ui-jqdialog-titlebar > .ui-jqdialog-titlebar-close {
63+
-ms-touch-action: manipulation;
64+
touch-action: manipulation;
65+
-webkit-user-select: none;
66+
-moz-user-select: none;
67+
-ms-user-select: none;
68+
user-select: none;
5769
}
5870

5971
.ui-jqgrid-jquery-ui .ui-jqdialog-titlebar > .ui-jqdialog-titlebar-close {
@@ -78,13 +90,10 @@
7890
.ui-jqgrid .ui-jqgrid-errorbar-ltr .ui-jqgrid-error,
7991
.ui-jqdialog .ui-jqdialog-titlebar-ltr .ui-jqdialog-title {
8092
position: relative;
81-
left: .1em;
8293
}
8394
.ui-jqgrid .ui-jqgrid-caption-rtl .ui-jqgrid-title,
8495
.ui-jqgrid .ui-jqgrid-errorbar-rtl .ui-jqgrid-error,
8596
.ui-jqdialog .ui-jqdialog-titlebar-rtl .ui-jqdialog-title {
86-
position: relative;
87-
right: .1em;
8897
}
8998
.ui-jqgrid-titlebar > .ui-jqgrid-titlebar-close span {
9099
margin-top: 0;
@@ -158,6 +167,8 @@
158167
.ui-jqdialog .ui-resizable-handle > .svg-inline--fa {
159168
font-size: 12px;
160169
right: -1px;
170+
/*right: -2px;
171+
bottom: -1px;*/
161172
position: relative;
162173
}
163174
.ui-jqdialog .ui-resizable-handle > .glyphicon {
@@ -389,7 +400,14 @@
389400
.ui-jqgrid tr.jqfoot > td,
390401
.ui-jqgrid tr.ui-subgrid > td,
391402
.ui-jqgrid tr.ui-subtblcell > td {
403+
overflow: hidden;
404+
white-space: pre;
392405
vertical-align: middle;
406+
text-align: center;
407+
/*! height: 22px; */
408+
border-top: 0 none;
409+
border-bottom-width: 1px;
410+
border-bottom-style: solid;
393411
}
394412
.ui-jqgrid-jquery-ui.ui-jqgrid tr.jqgrow > td,
395413
.ui-jqgrid-jquery-ui.ui-jqgrid tr.jqgroup > td,
@@ -402,7 +420,6 @@
402420
.ui-jqgrid tr.jqfoot > td {
403421
}
404422
.ui-jqgrid tr.ui-subgrid > td {
405-
padding: 0;
406423
}
407424
.ui-jqgrid tr.jqgfirstrow > td {
408425
padding: 0 2px 0 2px;
@@ -563,14 +580,13 @@ span.ui-jqgrid-cell-wrapper {
563580
-webkit-box-sizing: border-box;
564581
box-sizing: border-box;
565582
height: auto;
583+
min-height: 22px;
566584
overflow: hidden;
585+
font-size: 11px;
567586
}
568587
.ui-jqgrid > .ui-jqgrid-pager *,
569588
.ui-jqgrid > .ui-jqgrid-pager *:before,
570589
.ui-jqgrid > .ui-jqgrid-pager *:after {
571-
-webkit-box-sizing: inherit;
572-
-moz-box-sizing: inherit;
573-
box-sizing: inherit;
574590
}
575591
.ui-jqgrid .ui-jqgrid-toppager .ui-pager-control,
576592
.ui-jqgrid .ui-jqgrid-pager .ui-pager-control {
@@ -583,8 +599,6 @@ span.ui-jqgrid-cell-wrapper {
583599
text-align: left;
584600
}
585601
.ui-pager-control .ui-jqgrid-pg-center {
586-
text-align: center;
587-
white-space: pre;
588602
}
589603
.ui-pager-control .ui-jqgrid-pg-right {
590604
text-align: right;
@@ -620,20 +634,18 @@ span.ui-jqgrid-cell-wrapper {
620634
height: auto;
621635
}
622636
.ui-jqgrid .ui-pg-button span {
637+
display: block;
638+
margin: 1px;
639+
float: left;
623640
}
624641
.ui-jqgrid .ui-pg-table .ui-pg-input,
625642
.ui-jqgrid .ui-pg-table .ui-pg-selbox {
626-
height: auto;
627643
width: auto;
628-
margin: 0;
629-
line-height: inherit;
630644
}
631645
select.form-control.ui-pg-selbox:not([size]):not([multiple]) {
632646
height: auto;
633647
}
634648
.ui-jqgrid .ui-pg-table .ui-pg-selbox {
635-
display: block;
636-
padding: 1px;
637649
}
638650
.ui-jqgrid .ui-separator {
639651
height: 12px;
@@ -649,6 +661,9 @@ select.form-control.ui-pg-selbox:not([size]):not([multiple]) {
649661
display: inline;
650662
}
651663
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div {
664+
padding: 1px 0;
665+
float: left;
666+
position: relative;
652667
}
653668
.ui-jqgrid .ui-jqgrid-pager .ui-pg-button {
654669
cursor: pointer;
@@ -660,8 +675,11 @@ select.form-control.ui-pg-selbox:not([size]):not([multiple]) {
660675
.ui-jqgrid td input,
661676
.ui-jqgrid td select,
662677
.ui-jqgrid td textarea {
678+
/*! margin: 0; */
663679
}
664680
.ui-jqgrid td textarea {
681+
width: auto;
682+
height: auto;
665683
}
666684
.ui-jqgrid > .ui-jqgrid-view > .ui-jqgrid-toppager {
667685
border-left: 0 none;
@@ -692,6 +710,8 @@ select.form-control.ui-pg-selbox:not([size]):not([multiple]) {
692710
vertical-align: middle;
693711
}
694712
.ui-jqgrid .navtable .ui-pg-div span.ui-pg-button-text {
713+
padding-left: 0.2em;
714+
padding-right: 0.2em;
695715
}
696716
.ui-pg-button:hover > .ui-pg-div > .ui-pg-button-text,
697717
.ui-pg-button.ui-state-hover > .ui-pg-div > .ui-pg-button-text {
@@ -763,13 +783,9 @@ select.form-control.ui-pg-selbox:not([size]):not([multiple]) {
763783
left: 45%;
764784
width: auto;
765785
z-index: 101;
766-
padding: 6px;
767-
margin: 5px;
768786
text-align: center;
769787
font-weight: bold;
770788
display: none;
771-
border-width: 2px;
772-
font-size: 11px;
773789
}
774790
.ui-jqgrid .jqgrid-overlay {
775791
display: none;
@@ -839,6 +855,8 @@ select.form-control.ui-pg-selbox:not([size]):not([multiple]) {
839855
margin: 0;
840856
}
841857
.ui-jqdialog-content .EditTable {
858+
width: 100%;
859+
margin-bottom: 0;
842860
}
843861
.ui-jqdialog-content .DelTable {
844862
width: 100%;
@@ -854,11 +872,16 @@ select.form-control.ui-pg-selbox:not([size]):not([multiple]) {
854872
height: auto;
855873
}
856874
.ui-jqdialog-content td.EditButton {
857-
padding-left: .25rem;
875+
border-top: 0 none;
876+
border-left: 0 none;
877+
border-right: 0 none;
878+
padding: 5px 0;
858879
}
859880
.ui-jqdialog-content td.EditButton-ltr {
881+
text-align: right;
860882
}
861883
.ui-jqdialog-content td.EditButton-rtl {
884+
text-align: left;
862885
}
863886
.ui-jqdialog-content td.navButton {
864887
text-align: left;
@@ -922,12 +945,22 @@ select.form-control.ui-pg-selbox:not([size]):not([multiple]) {
922945
width: auto;
923946
}
924947
.ui-jqdialog .fm-button {
948+
display: inline-block;
949+
padding: .4em .5em;
950+
text-decoration: none;
951+
cursor: pointer;
952+
position: relative;
953+
text-align: center;
954+
zoom: 1;
955+
margin-left: 0.25rem;
925956
}
926957
.ui-jqdialog.ui-jqgrid-bootstrap .navButton .fm-button {
927958
padding: .375em .75em;
928959
margin-left: .125em;
929960
}
930961
.ui-jqdialog .fm-button > span {
962+
display: inline-block;
963+
vertical-align: middle;
931964
}
932965
.ui-jqdialog .fm-button .fm-button-text {
933966
padding: 0 .2em;
@@ -1224,9 +1257,9 @@ a.clearsearchclass {
12241257

12251258
/* Bootstrap style support */
12261259
.ui-jqgrid.ui-jqgrid-bootstrap {
1227-
border: 1px solid #ddd;
1260+
/*border: 1px solid #ddd;
12281261
-ms-border-radius: 6px;
1229-
border-radius: 6px;
1262+
border-radius: 6px;*/
12301263
}
12311264
.ui-jqgrid.ui-jqgrid-bootstrap > .ui-jqgrid-view > .ui-jqgrid-toppager {
12321265
border-bottom-left-radius: 0;
@@ -1237,12 +1270,12 @@ a.clearsearchclass {
12371270
}
12381271
.ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-hdiv,
12391272
.ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-legacy-subgrid > thead {
1273+
background-color: #e5e5e5;
12401274
}
12411275
.ui-jqgrid.ui-jqgrid-bootstrap > .ui-jqgrid-view > .ui-jqgrid-sdiv td {
12421276
background-color: #f9f9f9
12431277
}
12441278
.ui-jqdialog.ui-jqgrid-bootstrap > .modal-dialog {
1245-
margin-top: 0;
12461279
}
12471280
.ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-titlebar .ui-jqgrid-title,
12481281
.ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-errorbar .ui-jqgrid-error,
@@ -1255,6 +1288,7 @@ a.clearsearchclass {
12551288
}
12561289
.ui-jqgrid.ui-jqgrid-bootstrap > .ui-jqgrid-view .fa,
12571290
.ui-jqgrid.ui-jqgrid-bootstrap > .ui-jqgrid-pager .fa {
1291+
font-size: 14px;
12581292
}
12591293
.ui-jqdialog.ui-jqgrid-bootstrap {
12601294
}
@@ -1306,7 +1340,6 @@ a.clearsearchclass {
13061340
height: auto;
13071341
}
13081342
.ui-jqdialog.ui-jqgrid-bootstrap .modal-dialog {
1309-
width: auto;
13101343
}
13111344
.ui-jqdialog.ui-widget {
13121345
overflow: hidden;
@@ -1319,6 +1352,7 @@ a.clearsearchclass {
13191352
}
13201353
.ui-jqdialog.ui-jqgrid-bootstrap .modal-content {
13211354
overflow: hidden;
1355+
padding: 0;
13221356
}
13231357
.ui-jqdialog.ui-jqgrid-bootstrap .modal-content > .ui-resizable-handle.fa {
13241358
bottom: 1px;
@@ -1331,8 +1365,6 @@ a.clearsearchclass {
13311365
}
13321366

13331367
.ui-jqgrid.ui-jqgrid-bootstrap .disabled {
1334-
opacity: .35;
1335-
filter: Alpha(Opacity=35);
13361368
}
13371369
.ui-jqgrid-bootstrap.ui-jqgrid-resize-mark {
13381370
border: 1px solid #aaaaaa;
@@ -1356,6 +1388,7 @@ a.clearsearchclass {
13561388
margin: 0;
13571389
}
13581390
.ui-jqgrid.ui-jqgrid-bootstrap .ui-pg-table .ui-pg-button {
1391+
margin: .25rem .25rem .25rem 0;
13591392
}
13601393
.ui-search-input .form-control:not([size]):not([multiple]) {
13611394
height: auto;
@@ -1399,13 +1432,12 @@ a.clearsearchclass {
13991432
border: 1px solid #333;
14001433
}
14011434
.ui-jqdialog.ui-jqgrid-bootstrap .ui-jqdialog-content {
1402-
border-top-left-radius: 0;
1403-
border-top-right-radius: 0;
14041435
}
14051436
.ui-jqgrid.ui-jqgrid-bootstrap .ui-pager-control .ui-pg-input {
14061437
display: inline-block;
14071438
}
14081439
.ui-jqgrid.ui-jqgrid-bootstrap > .ui-jqgrid-pager {
1440+
font-size: 14px;
14091441
}
14101442
.ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-bootstrap-corner-top {
14111443
border-top-left-radius: 6px;
@@ -1416,8 +1448,6 @@ a.clearsearchclass {
14161448
border-bottom-right-radius: 6px;
14171449
}
14181450
.ui-jqgrid.ui-jqgrid-bootstrap .ui-pager-control .ui-pg-selbox {
1419-
font-size: 12px;
1420-
padding: 0;
14211451
}
14221452
.ui-jqdialog.ui-jqgrid-bootstrap .FormData .CaptionTD {
14231453
font-size: 14px;
@@ -1448,10 +1478,13 @@ a.clearsearchclass {
14481478
.searchFilter .form-control:not([size]):not([multiple]) {
14491479
}
14501480
.searchFilter .btn {
1481+
margin-left: .25em;
14511482
}
14521483
.ui-jqgrid .searchFilter table.group td {
1484+
padding: 0.25em;
14531485
}
14541486
.ui-jqgrid .searchFilter table {
1487+
border-spacing: 0px;
14551488
}
14561489
.ui-jqdialog.ui-jqgrid-bootstrap .modal-header .close {
14571490
}
@@ -1470,6 +1503,9 @@ a.clearsearchclass {
14701503
.ui-jqgrid .ui-pg-button span.glyphicon {
14711504
display: inline-block;
14721505
text-align: center;
1506+
/*margin-left: auto;
1507+
margin-right: auto;
1508+
padding: 0 .1em;*/
14731509
vertical-align: middle;
14741510
}
14751511
.ui-jqgrid-actions .glyphicon {

js/grid.base.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -981,19 +981,19 @@
981981
toolbarBottom: "",
982982
pager: {
983983
pager: "card-footer",
984-
pagerButton: "btn btn-sm",
985-
pagerInput: "form-control",
986-
pagerSelect: "form-control"
984+
pagerButton: "btn btn-sm btn-secondary",
985+
pagerInput: "form-control form-control-sm",
986+
pagerSelect: "form-control form-control-sm"
987987
},
988988
navButton: "btn btn-sm",
989989
searchDialog: {
990-
operator: "form-control",
991-
label: "form-control",
992-
elem: "form-control",
990+
operator: "form-control form-control-sm",
991+
label: "form-control form-control-sm",
992+
elem: "form-control form-control-sm",
993993
operationGroup: "form-inline",
994994
addRuleButton: "btn btn-sm btn-secondary",
995995
deleteRuleButton: "btn btn-sm btn-primary",
996-
operationSelect: "form-control",
996+
operationSelect: "form-control form-control-sm",
997997
addGroupButton: "btn btn-sm btn-secondary",
998998
deleteGroupButton: "btn btn-sm btn-primary"
999999
},

0 commit comments

Comments
 (0)