locked
Floating Buttons in Boostrap table RRS feed

  • Question

  • User1308732545 posted

    Hi All , 

    I have a  bootstrap responsive table in a  bootstrap panel.

    I am trying to add two buttons on  the top of the headers of the table which should float right and as when I scroll the table it should move along with the scroll .

    I have fixed one button , and trying to fix the other one , but I dont't get what wrong I am doing , could anyone please help

    Here is the table what it should look like and here is the code

                    <div id="switchGrid" class="panel-collapse collapse table-responsive" style="max-height: 600px">@*creating a css class wouldn't work*@
                        @if (Model.SelectedId != 1)
                        {
                            <div class="row">
                                <div class="pull-right">
                                    <button style=";right:95px" class="btn btn-default" data-bind="click: switchTaskByDateTableUnits.bind($data,false), css: { active: !taskByDateTableShowUnits()}">@Strings.Hours</button>
                                </div>
                                <button style="left:10px;" class="btn btn-default" data-bind="click: switchTaskByDateTableUnits.bind($data,true), css: { active: taskByDateTableShowUnits }">@Strings.Items</button>
                            </div>
                        }
                        <table class="table table-bordered text-nowrap">
                            <thead>
                            <tr class="small">
                                <th>
                                    @Model.TaskByDate.TaskColumnHeader &nbsp;
                                    @if (Model.SelectedId != 2)
                                    {
                                        <i class="fa fa-caret-down" style="color: #CCCCCC" data-bind="visible: sortByTaskAscending(), click: sortTask(false)"></i>
                                        <i class="fa fa-caret-up" style="color: #CCCCCC" data-bind="visible: !sortByTaskAscending(), click: sortTask(true)"></i>
                                    }
                                </th>
                                <!-- ko foreach: dateHeader -->
                                <th class="text-right" data-bind="text: $data"></th>
                                <!-- /ko -->
                                <th class="text-right">@Model.TotalLabel</th>
                            </tr>
                            </thead>
                            <tbody>
                            <!-- ko foreach: taskTotals -->
                            <tr class="small" data-bind="attr:{id:$data.task()!=='@Strings.Total:'?'row_' +$data.task():'row_Total'}">
                                <td data-bind="text:$data.task()!=='@Strings.Total:'?$data.task:null"></td> @*cannot use Index here as this grid is used for other KPI's as well. *@
                                <!-- ko foreach: $parent.getHoursForTask($data.task()) -->
                                <td class="text-right" data-bind="visible: !$parents[1].taskByDateTableShowUnits(),text: $data.hours"></td>
                                <td class="text-right" data-bind="visible: $parents[1].taskByDateTableShowUnits(),text: $data.units"></td>
                                <!-- /ko -->
                                <td class="text-right" data-bind="visible: !$parent.taskByDateTableShowUnits(),text: $data.task()!=='@Strings.Total:'?$data.hours:null"></td>
                                <td class="text-right" data-bind="visible: $parent.taskByDateTableShowUnits, text: $data.units"></td>
                            </tr>
                            <!-- /ko -->
                            <tr class="grey">
                                @if (Model.SelectedId != 3)
                                {
                                    <td>@Strings.Total:</td>
                                    foreach (var date in Model.TaskByDate.DateTotals)
                                    {
                                        <td class="text-right" data-bind="visible: !taskByDateTableShowUnits()">@date.Hours</td>
                                        <td class="text-right" data-bind="visible: taskByDateTableShowUnits">@date.Units</td>
                                    }
                                    <td class="reportGridTotalvalue text-right" data-bind="visible: !taskByDateTableShowUnits()">@Model.TaskByDate.GrandTotalHours</td>
                                    <td class="reportGridTotalvalue text-right" data-bind="visible: taskByDateTableShowUnits">@Model.TaskByDate.GrandTotalUnits</td>
                                }
                                else
                                {
                                    <tr class="grey">
                                        <td >@Strings.Total:</td>
                                        @foreach (var value in Model.TaskByDate.TaskValues.Where(v => v.Task == @Strings.Total + ":").Select(v => v))
                                        {
                                            <td class="text-right">@value.Hours</td>
                                        }
                                        <td class="reportGridTotalvalue text-right">@Model.TaskByDate.GrandTotalHours</td>
                                    </tr>
                                }
                            </tr>
                            </tbody>
                        </table>
                    </div>
    Friday, December 1, 2017 2:23 PM

All replies

  • User-832373396 posted

    Hi gowrifor.net,

    add two buttons <g class="gr_ gr_104 gr-alert gr_gramm gr_inline_cards gr_run_anim Style multiReplace" id="104" data-gr-id="104">on  the</g> top of the headers of the table which should float right and as when I scroll the table it should move along with the <g class="gr_ gr_105 gr-alert gr_gramm gr_inline_cards gr_run_anim Style multiReplace" id="105" data-gr-id="105">scroll .</g>

    Sir, I tested a working example and add these two buttons to a tr in a table :

       <table class="table table-bordered text-nowrap">                      
                     <tr colspan="3">
                  
                                    <button style=";right:95px" class="btn btn-default"> Strings.Hours</button>
                         
                                <button style="right:10px;" class="btn btn-default"> Strings.Items</button>
                     </tr>
                            <!-- /ko -->
                            <tr class="grey">      

    With regards, Angelina Jolie

    Monday, December 4, 2017 7:44 AM
  • User1308732545 posted

    Hi,

    Thanks for the reply , but I want the table to look like this below and the two buttons should be placed in the first row  and I have a horizontal scroll bar . so when the scroll bar is

    horizontally scrolled , the buttons should be visible throughout.

    Many Thanks

    Monday, December 4, 2017 1:48 PM