Mam trzy elementy div (panele) na jednej stronie. W dwóch panelach są tabele i kiedy otwieram tę stronę na mniejszym wyświetlaczu, psuje projekt. Zastanawiam się więc, czy można dodać przycisk na panelach do zwijania, aby użytkownik mógł zwinąć panele, których nie potrzebuje, gdy otwiera się stronę na mniejszym wyświetlaczu.

Oto mój kod HTML:

<div class="row">
    <div class="col-md-2">
        <div class="hpanel hblue">
            <div class="panel-heading" translate>
                Factory
            </div>
            <div class="panel-body">

                <img file-url="logo" thumbnail="true" class="img-logo" ng-show="logo"/>
            </div>
        </div>
    </div>


    <div class="col-md-4">
        <div class="hpanel hblue">
            <div class="panel-heading" translate>
                Factory centers
            </div>
            <div class="panel-body">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered table-hover" ng-table="centersTable">

                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6">
            <div class="hpanel hblue">
                    <div class="panel-heading" translate>
                        Factory services
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover nowrap" ng-table="servicesTable">

                            </table>
                        </div>
                    </div>
                </div>
        </div>
</div>

Byłoby wspaniale, gdyby ten przycisk znajdował się w nagłówku panelu we właściwym miejscu, a gdy użytkownik go kliknie, ukryje ten panel, a jeśli kliknie ponownie, otwórz panel. Szukałem czegoś w internecie, ale nie mogłem znaleźć niczego, co mogłoby mi pomóc. P.S. Używam AngularJS, jeśli jest to ważne. Czy ktoś mógłby mi pomóc z tym problemem?

0
kavkax 20 listopad 2019, 14:26
Wygląda na to, że używasz też biblioteki Bootstrap? Jeśli tak, możesz użyć Zwiń getbootstrap.com/docs/4.3/components/collapse
 – 
MikeS
20 listopad 2019, 14:56
Tak, trochę to jest do zwinięcia w poziomie, potrzebne jest zwinięcie w pionie, po kliknięciu przesuń panel na lewą stronę
 – 
kavkax
20 listopad 2019, 15:26

1 odpowiedź

Dołączam tagi tr i td wewnątrz tagu tabeli

Dodając również CSS (margin-top lub margin-bottom) dla odpowiedniego Div

Możesz sprawdzić poniższy kod!

var app = angular.module('myApp', []);
app.controller('customersCtrl', function() {

});
table, th , td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
.marginTop{
margin-top:25px;
}
.marginBottom{
margin-bottom:25px;
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>
    <div ng-app="myApp" ng-controller="customersCtrl">
        <div class="row">
            <div class="col-md-2">
                <div class="hpanel hblue">
                    <div class="panel-heading" translate>
                        Factory
                    </div>
                    <div class="panel-body">
                        <img file-url="logo" thumbnail="true" class="img-logo" ng-show="logo" />
                    </div>
                </div>
            </div>
            <div class="col-md-4 marginTop">
                <div class="hpanel hblue">
                    <div class="panel-heading" translate>
                        Factory centers
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover nowrap" ng-table="servicesTable">
                                <tr>
                                    <td>your table1 data1</td>
                                    <td><button>button1</button></td>
                                </tr>
                                <tr>
                                    <td>your table1 data2</td>
                                    <td><button>button2</button></td>
                                </tr>
                                <tr>
                                    <td>your table1 data3</td>
                                    <td><button>button3</button></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 marginTop">
                <div class="hpanel hblue">
                    <div class="panel-heading" translate>
                        Factory services
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover nowrap" ng-table="servicesTable">
                                <tr>
                                    <td>your table2 data1</td>
                                    <td><button>button1</button></td>
                                </tr>
                                <tr>
                                    <td>your table2 data2</td>
                                    <td><button>button2</button></td>
                                </tr>
                                <tr>
                                    <td>your table2 data3</td>
                                    <td><button>button3</button></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
1
Hasansab Takked 20 listopad 2019, 15:05