search

creativetimofficial / ct-light-bootstrap-dashboard-pro

14 stars 4 forks source link

Popovers are covered by table header when using data tables / bootstrap-table #4

Closed creative-timzye closed 8 years ago

creative-timzye commented 8 years ago

When using data tables / bootstrap-table in combination with the bootstrap-table extension editable (https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/editable) the popover is not visible / covered by the table head. See screenshots:

Here it is OK (I added drop-shadow to the popover for better visibility): lg-app - wareneingang 2016-02-24 17-38-39

Here it is partly covered: lg-app - wareneingang 2016-02-24 17-39-57

Here it is totally covered: lg-app - wareneingang 2016-02-24 17-40-35

The data-table is with fixed height.

alexandru-paduraru commented 8 years ago

@creative-timzye We've checked and couldn't replicate the issue. We added the editable extension and everything seems to work fine. Check these screens:

screen shot 2016-02-25 at 16 17 26 screen shot 2016-02-25 at 16 17 11

If I have to guess the issue is caused by the overflow: scroll property of the table, the solution that we gave you for scrolling inside the table. It is hiding everything that is outside of the table so you can scroll inside. So as a solution to this I recommend you to use the data-editable-mode="inline" for each th. This will give the same functionality but inline, so you will not have any issues with the Scrollable part that you need.

Please let me know if that was working fine.

creative-timzye commented 8 years ago

@alexandru-paduraru To replicate the issue you have to use a bootstrap-table with fixed-height and the overflow: scroll you gave me. I tried data-editable-mode="inline" which works, but it is not a "great" solution. data-editable-mode="popup" looks a lot better and more stylish. We are using ligh-bootstrap-dashboard-pro because it has a great look. Can you find a better solution, so we can still work with fixed-height and popup? Thanks!!

alexandru-paduraru commented 8 years ago

@creative-timzye I will follow the same configuration that you have. We will think about a solution but from the experience, for that situation when you have an element which have the overflow:scroll or overflow:hidden, nothing cannot go out of it, that's a basic rule that the browser respect. The current 2 options are:

  1. you use the table with pagination, without scrolling and the popup will appear
  2. you use the table with scroll and fixed height and you use the edit inline.

I hope we will find a trick for your case.

Keep in touch, Alex

alexandru-paduraru commented 8 years ago

@creative-timzye we tried different tricks in order to make a combination between the options 1 and 2 and unfortunately it is not possible to have the table with scroll area and to have inside it the popup which appear outside of the scrolling area. The browser doesn't allow this.

We added in the latest update V1.2 some bug fixes which include also the fixes for the table with fixed height which was moving the labels. We also added a scrollbar library for Windows users, so the ugly scrollbar is not visible anymore.

Hope you understand the situation. If you have any other ideas for the table please let us know, we would be glad to test them.

Best, Alex

novamix commented 8 years ago

how do you have installed the plugin ?, because I do not get it to work.

alexandru-paduraru commented 8 years ago

@novamix the plugin doesn't need to be "installed", it is just a plain JS file: here is the full documentation -> http://bootstrap-table.wenzhixin.net.cn/ And you can find how we initialized it in your downlaoded archive examples/tables/datatable.html

Please let us know if you found the plugin. Or please let us know what is not working.

Best, Alex

novamix commented 8 years ago

I add the code on footer and add 

<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script src="extensions/editable/bootstrap-table-editable.js"></script>

and the column

<th data-field="name" data-editable="true" data-sortable="true">Name</th>

and finally my all code

`<!doctype html>

``` Light Bootstrap Dashboard PRO by Creative Tim ```
ID Name Salary Country City Actions
1 Dakota Rice $36,738 Niger Oud-Turnhout
2 Minerva Hooper $23,789 Curaçao Sinaai-Waas
3 Sage Rodriguez $56,142 Netherlands Baileux
4 Philip Chaney $38,735 Korea, South Overland Park
5 Doris Greene $63,542 Malawi Feldkirchen in Kärnten
6 Mason Porter $78,615 Chile Gloucester
7 Alden Chen $63,929 Finland Gary
8 Colton Hodges $93,961 Nicaragua Delft
9 Illana Nelson $56,142 Heard Island Montone
10 Nicole Lane $93,148 Cayman Islands Cottbus
11 Chaim Saunders $5,502 Romania New Quay
12 Josiah Simon $50,265 Christmas Island Sint-Jans-Molenbeek
13 Ila Poole $67,413 Montenegro Pontevedra
14 Shana Mejia $58,566 Afghanistan Ballarat
15 Lana Ryan $64,151 Martinique Portobuffolè
16 Daquan Bender $91,906 Sao Tome and Principe Walhain-Saint-Paul
17 Connor Wagner $86,537 Germany Solihull
18 Boris Horton $35,094 Laos Saint-Mard
19 Winifred Ryan $64,436 Ireland Ronciglione
``` ``` ``` ```

`

alexandru-paduraru commented 8 years ago

@novamix on the Full Code I see that you added the CSS for the X-editable inside the but you didn't add it in the javascript section. Please add it like this:

1.
<!--  Datatable Plugin    --> 
<script src="../../assets/js/bootstrap-table.js"></script>

2.
<script src="extensions/editable/bootstrap-table-editable.js"></script>

3.
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>

You can see in this example how the files are called added: https://github.com/wenzhixin/bootstrap-table-examples/blob/master/extensions/editable.html

Please let us know if that was working.

Best, Alex

novamix commented 8 years ago

Hello, now works, thanks.

husnixs commented 8 years ago

I'm using this and work prefectly

"fnDrawCallback": function ( oSettings ) {

            $(".edit").editable({
                mode : 'popup',
                container: 'body',
                emptytext : '-',
                ajaxOptions : {
                    type : 'post'
                },
                success: function() {
                    //
                }
            });
}