AngularJS is used to vertically collapse three different div elements. This feature

I am facing an issue with the design of my page that contains three panels. Two of these panels have tables, and when viewing the page on a smaller display, it disrupts the layout. I am wondering if there is a way to add collapsible buttons to the panels so users can collapse the ones they do not need on smaller screens.

Below is my HTML code:

<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>

I would appreciate it if the collapse button could be located in the panel-heading at the right place. When clicked, it should hide the panel, and clicking again should open it up. I have searched online for solutions but haven't found anything helpful yet. P.S. I am using AngularJS, which might be crucial for this problem. Can someone please assist me with resolving this issue?

htmlcssangularjs

Answer №1

I have embedded the tr tag and td tag within the table tag

Additionally, I have applied CSS (margin-top or margin-bottom) to the respective Div

You can review the code below:

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

My Tailwind CSS toggle button disappears in dark mode, why is that happening?

<button aria-label="Toggle Dark Mode" type="button" className="lg:inline-flex lg:w-40 md:w-screen p-3 h-12 w-12 order-2 md:order-3" onClick={() => setTheme(theme === 'dark' ? &ap ...

javascripthtmlreactjsnext.jstailwind-css

Creating a CSS circle spinner with a half moon shape is an innovative way to add a unique touch

Image: Circular spinner rotating along the border rim of other solid circle For more details, please visit: https://codepen.io/sadashivjp/pen/oqqzwg I have created a UI codepen here and welcome any modifications or solutions. The code snippet is provided ...

javascriptjquerycsshtml

Highcharts - Troubleshooting the chart reflow feature

Take a look at the fiddle I created. I encountered an issue with the chart width when toggling the sidebar. After seeking help on Stack Overflow from this post, I was able to solve it. Now, I'm facing another bug where adding transitions while togg ...

javascriptjqueryhtmlcsshighcharts

Enhancing PHP Markdown to Support Custom CSS Classes

Markdown is a tool I use frequently in my PHP projects, but sometimes I find its output to be too simplistic. I wish I had more control over the layout and design of my content. For example, when inserting an image: <p> <img src="path/to/image. ...

phpcssmarkdown

Discover the steps to modify the input field type with just a keypress in angularjs

I need help changing an input field type from text to password. Currently, I am able to change the input field type from text to password when clicking on it. However, I also want the type to change from text to password when tab is pressed. Any assistan ...

cssangularjs

Is it possible to have Protractor utilize the IEDriverServer.exe that was updated by webdriver-update in the node_modules folder?

Currently, I am in the process of writing acceptance tests for my angular web application project. These tests are executed using protractor and everything is working smoothly on Chrome. However, when attempting to run the tests on Internet Explorer 11, an ...

angularjsnode.jsinternet-explorerselenium-webdriverprotractor

Improving the efficiency of rendering multiple objects on a canvas

I'm currently working on developing a simulation for ants using the basic Javascript canvas renderer. Here is a snippet of the rendering code: render(simulation) { let ctx = this.ctx; // Clearing previous frame ctx.clearRect(0, ...

javascripthtmlcanvasrenderingpixi.js

Optimal practices for localization

Looking to translate our site into multiple languages starting with one language but planning for more in the future. Considering the most effective way to accomplish this. The plan is to use subdirectories to organize the html files, with shared files su ...

phphtml

jQuery and CSS3 for importing and customizing text files

I successfully customized the file input utilizing jQuery and CSS3. However, there is one aspect I couldn't quite figure out. After the user selects an image or file, I want to display the selected file's text at the very bottom of the text like ...

javascriptjqueryhtmlcss

an li element is accompanied by a visible box

In my possession is a container: #box1 { height:100px; width:208px; } along with a series <li id="first"><strong>FIRST</strong> </li> <li id="second"><strong>SECOND</strong&g ...

jquerycss

Creating a Parent Container to Maintain the Height of the Tallest Offspring

I've been searching online for solutions, but so far I haven't found one that meets all the requirements. <div class="parent"> <div class="child1">I am 60px tall and always visible; my parent is 100px tall</div> <div ...

javascriptjquerycss

Unique calculation for rotational movement

I am currently developing a unique compass application. Although the project is progressing well, I am facing a significant challenge with one aspect: My code calculates degree angles within the range of -360 and 360: -318°, -29°, 223°, -163°, ... ...

javascripthtmlmathrotationcompass

I am having difficulty accessing specific data in JSON using Searchkit's RefinementListFilter

Utilizing searchkit for a website, I am encountering issues accessing previously converted data in json format. The structure of my json directory is as follows: (...) hits: 0: _index: content _type: content _source: ...

javascripthtmljsonreactjssearchkit

Tips for displaying form data in a boostrap modal

One issue I am facing involves a form that collects a user's first and last name, along with a button that activates a bootstrap modal. When the button is clicked, the goal is to display the inputted data from the form within the modal window. The use ...

phphtmlbootstrap-4

What is the method to switch between radio buttons on a webpage?

Here is an example of HTML code: <input type="radio" name="rad" id="Radio0" checked="checked" /> <input type="radio" name="rad" id="Radio1" /> <input type="radio" name="rad" id="Radio2" /> <input type="radio" name="rad" id="Radio4" /& ...

javascriptjqueryhtml

Choose a column and apply filters to the values using Select2 in AngularJS

Hello, I am new to working with AngularJS and I have come across a situation where I need to filter data in a table based on the column and value selected. Here is my approach: <tr ng-repeat="f in filters"> <td> <select ng ...

angularjsangularjs-select2

Why isn't it possible to send POST data to a JSON file using JQuery/AJAX?

I'm currently learning how to use JQuery/Ajax from a helpful tutorial on YouTube. To watch the video, simply click here. While I can successfully retrieve data from the order.json file, I encounter an error whenever trying to send POST requests. Bel ...

javascriptjqueryhtmljsonajax

What is the best way to pinpoint particular text within a paragraph that includes numerous line breaks?

So here is the puzzling situation I'm grappling with. Here's a peek at the HTML snippet: <p>This paragraph has <br><br> two unusual line breaks <br><br> and it happens TWICE!</p> The problem arises when tryi ...

htmlcsscss-selectorsline-breaks

Jquery Parallax causing scrolling problems across different browsers

Could you please take a look at the following link in both Chrome and Firefox? I am encountering some unusual issues. Primary Concern The scrolling function works smoothly in Firefox, but it seems to be malfunctioning in Chrome. Secondary Problem Whe ...

jqueryhtmlcss

What is the best way to ensure the width of the div is adjusted to fit the table it contains?

What is the best way to adjust the width of a div containing a potentially wider-than-screen table? Despite setting padding: 10px for the div, the right padding disappears when the table exceeds the screen width. Below is an example code snippet: <div ...

htmlcss