#javascript #html #jquery #css #sharepoint
#javascript #HTML #jquery #css #sharepoint
Вопрос:
Я создал выпадающее меню с родительскими и дочерними строками для отображения определенных элементов управления. Я не могу получить ширину аккордеона (которая установлена на 100%), чтобы фактически растянуть все целиком. Я использовал встроенные в Chrome и Edge инструменты разработчика, чтобы проверить HTML и выяснить, какой элемент имеет заданную ширину, которая препятствует росту моих строк.
Вот как в настоящее время выглядит выпадающий список на моей странице SharePoint. Я хочу, чтобы он и его содержимое растягивались по всей странице, но вместо этого он растягивается только наполовину? 
Вот мой тестовый пример JSFiddle: https://jsfiddle.net/tb36jsew/2 /
$(document).ready(function(){
$('.retro').accordion();
}); .ui.styled.accordion .accordion .title, .ui.styled.accordion .title {
color: black;
background-color: #eee;
cursor: pointer;
padding: 18px;
width: 200%;
height: auto;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.5s;
}
.title{
width: 200%;
height: auto;
}
.title.drop{
width: 100%;
}
.content{
width: 100%;
height: auto;
}
.ui.styled.accordion {
width: 200%;
height: auto;
}
.ui.stackable.grid.container.retro{
width: 200%;
height: auto;
}
.one.column.row{
width: 200%
height: auto;
}
.ui.styled.accordion .accordion .title, .ui.styled.accordion .title:hover {
color: #f2711c;
}
a.previous {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}
a:link, a:visited {
color: #b3ab7d;
}
a.previous:hover {
background-color: #104723;
color: #b3ab7d;
}
.backbtn{
padding-left: 0px;
padding-top: 10px;
}
.previous {
background-color: #104723;
color: #b3ab7d;
text-decoration: none;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.css">
<div class="ui stackable grid container retro">
<div class="one column row">
<div class="column">
<div class="ui styled accordion"> <!-- Accordion parent -->
<div class="title"><i class="dropdown icon"></i>Level 2</div>
<div class="content">
<div class="ui divider"></div>
<div class="ui stackable grid container">
<div class="one column row">
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.041 Ensure that the actions of individual system users can be uniquely traced to those users so they can be held accountable for their actions.</div>
<div class="content">
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.042 Create and retain system audit logs and records to the extent needed to enable the monitoring, analysis, investigation, and reporting of unlawful or unauthorized system activity.</div>
<div class="content">
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.043 Provide a system capability that compares and synchronizes internal system clocks with an authoritative source to generate time stamps for audit records.</div>
<div class="content">
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.044 Review audit logs.</div>
<div class="content">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="one column row">
<div class="column">
<div class="ui styled accordion"> <!-- Accordion parent -->
<div class="title"><i class="dropdown icon"></i>Level 3</div>
<div class="content">
<div class="ui divider"></div>
<div class="ui stackable grid container">
<div class="one column row">
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.3.045 Review and update logged events.</div>
<div class="content">
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.3.046 Alert in the event of an audit logging process failure.</div>
<div class="content">
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.3.048 Collect audit information (e.g., logs) into one or more central repositories.</div>
<div class="content">
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.3.049 Protect audit information and audit logging tools from unauthorized access, modification, and deletion.</div>
<div class="content">
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.3.050 Limit management of audit logging functionality to a subset of privileged users.</div>
<div class="content">
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.3.051 Correlate audit record review, analysis, and reporting processes for investigation and response to indications of unlawful, unauthorized, suspicious, or unusual activity.</div>
<div class="content">
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.3.052 Provide audit record reduction and report generation to support on-demand analysis and reporting.</div>
<div class="content">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="backbtn">
<a href="/cyber/controls.aspx" class="previous">amp;laquo; Go Back</a>
</div> Комментарии:
1. Это то, что вы пытаетесь сделать?: jsfiddle.net/yvbenitah/xed78qac/8
2. Если это то, что вы пробовали, я отвечу на это — html не был хорошим, и в css есть несколько вещей, которые нужно исправить. Если это не то, что вы пытались сделать, попробуйте отредактировать свой вопрос, чтобы было понятнее
3. Очень похоже, в чем была проблема?
4. круто! поэтому, пожалуйста, сделайте одолжение и примите ответ 🙂
5. @Israg только что сделал, большое спасибо за вашу помощь!
Ответ №1:
Прежде всего, вам нужно добавить закрытие div перед .backbtn в html
</div>
<div class="backbtn">
затем в css:
- добавить
width: auto;в.ui.styled.accordion .accordion .title, .ui.styled.accordion .title - удалить всю ширину:
200; height: auto - самое главное, добавьте следующее в конце вашего css
.ui.styled.accordion{
width: auto !important;
}
Вам это нужно, чтобы переопределить semantic-ui