La superposition Ajax s'étend au-delà du parent

Le site sur lequel je travaille contient plusieurs panneaux sur une page et dans le corps de chaque panneau, les données sont triées en cliquant sur l'en-tête de la colonne. Chaque panneau a sa propre superposition div qui s'affiche lorsque la requête ajax est envoyée. Un exemple de page rendue peut être trouvé à https://jsfiddle.net/rorourke/phnwqs0w/ Cet exemple a l'un des recouvrements activés ( display: block; ) comme le fait le code du script ajax. Lorsque la superposition est affichée par l'appel ajax, elle s'étend au-delà des limites de la div parente.

HTML

<div class="row" id="main">
    <div class="col-md-12">
        <div class="navbar navbar-light-page navbar-light-text">
            <div>
                <div class="navbar-header navbar-header-spacer">
                     

Accounts w/ Active Units

                </div>
            </div>
            <div class="navbar-collapse collapse">
                
            </div>
        </div>
        <div class="container-fluid container-border col-sm-8">
            <div class="panel panel-default">
                <div class="panel-heading panel-heading-collapsible panel-section" data-toggle="collapse" data-target="#collapse17"> Vectra 123

                </div>
                <div class="panel-collapse collapse in" id="collapse17" style="box-sizing: border-box;">
                    <div class="center-block" id="divLoading17" style="width: 100%; height: 100%; color: orange; font-size: larger; display: block; position: absolute; opacity: 0.4; background-color: dimgray; box-sizing: border-box;">Loading ....</div>
                    <div class="panel-body">
                        <form id="form4" action="/Report/Data/17" method="post" data-ajax-update="#balanceResults17" data-ajax-mode="replace" data-ajax-loading="#divLoading17" data-ajax="true">
                            <div id="balanceResults17">
                                <table class="table table-condensed">
                                    <thead>
                                        <tr class="info">
                                            <th class="col-sm-2">
                                                <button name="sortColumn" class="btn btn-link btn-link-header" type="submit" value="Name">Unit Id</button>
                                            </th>
                                            <th class="col-sm-2">
                                                <button name="sortColumn" class="btn btn-link btn-link-header" type="submit" value="CommNumber">Comm #</button>
                                            </th>
                                            <th class="col-sm-2">
                                                <button name="sortColumn" class="btn btn-link btn-link-header" type="submit" value="AccountName">Account</button>
                                            </th>
                                            <th class="col-sm-2">
                                                <button name="sortColumn" class="btn btn-link btn-link-header" type="submit" value="ChargeNumber">Charge #</button>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>IASpro1
                                            </td>
                                            <td>103069</td>
                                            <td>Overhead
                                            </td>
                                            <td>ABC130257109</td>
                                        </tr>
                                        <tr>
                                            <td>IASproX
                                            </td>
                                            <td>100154</td>
                                            <td>Overhead
                                            </td>
                                            <td>ABC130257109</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading panel-heading-collapsible panel-section" data-toggle="collapse" data-target="#collapse5"> Vectra 456

                </div>
                <div class="panel-collapse collapse in" id="collapse5">
                    <div class="center-block" id="divLoading5" style="width: 100%; height: 100%; color: orange; font-size: larger; display: none; position: absolute; opacity: 0.4; background-color: dimgray;">Loading ....</div>
                    <div class="panel-body">
                        <form id="form5" action="/Report/Data/5" method="post" data-ajax-update="#balanceResults5" data-ajax-mode="replace" data-ajax-loading="#divLoading5" data-ajax="true">
                            <div id="balanceResults5">
                                <table class="table table-condensed">
                                    <thead>
                                        <tr class="info">
                                            <th class="col-sm-2">
                                                <button name="sortColumn" class="btn btn-link btn-link-header" type="submit" value="Name">Unit Id</button>
                                            </th>
                                            <th class="col-sm-2">
                                                <button name="sortColumn" class="btn btn-link btn-link-header" type="submit" value="CommNumber">Comm #</button>
                                            </th>
                                            <th class="col-sm-2">
                                                <button name="sortColumn" class="btn btn-link btn-link-header" type="submit" value="AccountName">Account</button>
                                            </th>
                                            <th class="col-sm-2">
                                                <button name="sortColumn" class="btn btn-link btn-link-header" type="submit" value="ChargeNumber">Charge #</button>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>IASdev1
                                            </td>
                                            <td>16100160</td>
                                            <td>Overhead
                                            </td>
                                            <td>ABC130257109</td>
                                        </tr>
                                        <tr>
                                            <td>IASdev2
                                            </td>
                                            <td>16258798</td>
                                            <td>Overhead
                                            </td>
                                            <td>130257109</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.navbar-light {
    background-color: lightsteelblue;
    border-color: #080808;
}
.navbar-light-footer {
    background-color: whitesmoke;
}
.navbar-light-page {
    background-color: grey;
}
.navbar-light-text {
    color: antiquewhite;
}
.navbar-header-spacer {
    margin-left: 10px;
}

.panel {
  border: none;
}

.panel-heading-collapsible {
  cursor: pointer;
}

.panel-heading-collapsible:after {
  margin-right: 10px;

  /* symbol for "opening" panels */
  font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
  content: "\e114"; /* adjust as needed, taken from bootstrap.css */
  float: right; /* adjust as needed */
  color: grey; /* adjust as needed */
}

.panel-heading-collapsible.collapsed:after {
  /* symbol for "collapsed" panels */
  content: "\e080"; /* adjust as needed, taken from bootstrap.css */
}

.panel-body {
  border: 1px solid lightgrey;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.panel .panel-section {
  background-image: none;
  background-color: lightgrey;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}

  .panel .panel-section:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 20px 20px 0;
    border-style: solid;
    border-color: lightsteelblue #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  }

.btn-link-header {
  font-weight: bold;
  padding: 5px 5px 0;
  border-bottom: 0;
}

J'ai, avec un collègue, expérimenté avec plusieurs possibilités, y compris l'utilisation de haut/gauche au lieu de position: absolue; placer chaque panneau dans une division div (qui a "fixé" avec la largeur jusqu'à ce que j'ajoute du rembourrage ou des marges pour replacer les panneaux, mais je n'ai pas fixé la hauteur); ajuster les valeurs de largeur et de hauteur qui n'ont pas aidé sur les écrans de différentes résolutions; et déplacer le div overlay à différents endroits dans le HTML. Les recherches des raisons possibles pour lesquelles un div s'étendrait au-delà de ses parents semblaient toutes pointer vers une absence de box-sizing: border-box; sur un ou plusieurs des divs dans le HTML. Comme vous pouvez le voir dans le code fourni (et réalisé sur la page de violon), cela n'a pas fait de différence.

Je sais qu'il me manque quelque chose pour contraindre la superposition correctement, mais à ce stade, je ne suis pas sûr de ce que c'est.

Les pages de stackoverflow suivantes semblaient être les plus proches de mon scénario, mais n'ont pas été fructueuses pour résoudre le problème particulier que je vois:

Div tags extending beyond their own margins
CSS: Absolute positioned div extending beyond overflow:hidden?
Why do child divs extend beyond their parent div?
Div extends beyond wrapper div

0

1 Réponses

give position:relative; for .panel-collapse

https://jsfiddle.net/afelixj/phnwqs0w/1/

0
ajouté