У меня есть семейное дерево css3, которое, когда вы нажимаете на поле, появляется раскрывающееся меню.
Элементы div в раскрывающемся меню по какой-то причине имеют разный размер.
Например:
При открытии меню подотдела отдела 3 опция редактирования больше, чем добавить. С другой стороны, если вы откроете меню объекта или отдела 3. Похоже, он будет того же размера.
Как я могу это исправить?
HTML:
<div class="col-md-12">
<div class="tree d-flex justify-content-center">
<!-- BEGIN ORGANIGRAM-->
<ul>
<li>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Entity<hr>User 1<br> User2</a>
<div class="dropdown-menu">
<div>
<a title="Add new" data-toggle="modal" href="#modal_organigram" data-id="1" data-type="1" data-select="undefined" data-title="Entity">
<i class="fas fa-plus"></i>
</a>
</div>
<div class="mt-1">
<a title="Modify" data-toggle="modal" href="#modal_modify" data-id="1" data-type="1" data-parent="undefined" data-select="undefined" data-title="Entity">
<i class="fas fa-pencil-alt"></i>
</a>
</div>
</div>
</div>
<ul>
<li>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Department 3<hr>User 1<br></a>
<div class="dropdown-menu">
<div>
<a title="Add new" data-toggle="modal" href="#modal_organigram" data-id="4" data-type="2" data-select="3" data-title="Department 3">
<i class="fas fa-plus"></i>
</a>
</div>
<div class="mt-1">
<a title="Modify" data-toggle="modal" href="#modal_modify" data-id="4" data-type="2" data-parent="1" data-select="3" data-title="Department 3">
<i class="fas fa-pencil-alt"></i>
</a>
</div>
</div>
</div>
<ul>
<li>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Subdepartment<hr>User 6 <br> User 3</a>
<div class="dropdown-menu">
<div>
<a title="Add new" data-toggle="modal" href="#modal_organigram" data-id="6" data-type="3" data-select="" data-title="Subdepartment">
<i class="fas fa-plus"></i>
</a>
</div>
<div class="mt-1">
<a title="Modify" data-toggle="modal" href="#modal_modify" data-id="6" data-type="3" data-parent="4" data-select="" data-title="Subdepartment">
<i class="fas fa-pencil-alt"></i>
</a>
</div>
</div>
</div>
</li>
</ul>
</li>
<li>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Department 4<hr>User 7<br></a>
<div class="dropdown-menu">
<div>
<a title="Add new" data-toggle="modal" href="#modal_organigram" data-id="5" data-type="2" data-select="4" data-title="Department 4">
<i class="fas fa-plus"></i>
</a>
</div>
<div class="mt-1">
<a title="Modify" data-toggle="modal" href="#modal_modify" data-id="5" data-type="2" data-parent="1" data-select="Futbol" data-title="Department 4">
<i class="fas fa-pencil-alt"></i>
</a>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
<!-- END ORGANIGRAM-->
</div>
</div>
CSS:
.tree ul {
display: flex;
overflow-x: unset;
padding-top: 20px;
position: relative;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.tree li {
float: left;
text-align: center;
list-style-type: none;
position: relative;
padding: 20px 6px 0 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
/*We will use ::before and ::after to draw the connectors*/
.tree li::before,
.tree li::after{
content: '';
position: absolute;
top: 0;
right: 50%;
border-top: 1px solid #ccc;
width: 50%;
height: 20px;
}
.tree li::after{
right: auto;
left: 50%;
border-left: 1px solid #ccc;
}
/*We need to remove left-right connectors from elements without
any siblings*/
.tree li:only-child::after,
.tree li:only-child::before {
display: none;
}
/*Remove space from the top of single children*/
.tree li:only-child{
padding-top: 0;
}
/*Remove left connector from first child and
right connector from last child*/
.tree li:first-child::before,
.tree li:last-child::after{
border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
border-right: 1px solid #ccc;
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
}
/*Time to add downward connectors from parents*/
.tree ul ul::before{
content: '';
position: absolute; top: 0; left: 50%;
border-left: 1px solid #ccc;
width: 0; height: 20px;
}
.tree li a{
border: 1px solid #ccc;
padding: 6px 10px;
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: 11px;
display: inline-block;
cursor: pointer;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover,
.tree li div:hover+ul li a {
background: #c8e4f8;
color: #000 !important;
border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li div:hover+ul li::after,
.tree li div:hover+ul li::before,
.tree li div:hover+ul::before,
.tree li div:hover+ul ul::before{
border-color: #94a0b4;
}
.tree li a hr{
margin-top:0.5rem;
margin-bottom:0.5rem;
}
.tree div.dropdown {
display:inline-block;
}
.tree .dropdown-toggle::after{
content:none;
}
.tree div.dropdown-menu{
border: none;
background-color: unset;
box-shadow: none;
min-width: 0;
padding: 0;
margin: 0;
left: unset !important;
right: -37px;
transform: translate3d(0, 0, 0) !important;
}
CodePen
Спасибо
ОБНОВЛЕНИЕ:
Добавление стиля min-width: к тегам a решает проблему.