I am facing an issue with a dropdown menu that I have created. The dropdown has parent and child rows to display controls, but the width of the Accordion is not stretching as expected despite being set to 100%. Using Chrome and Edge developer tools, I inspected the HTML elements to identify what might be causing this restriction on the width of my rows.
On my SharePoint page, the dropdown appears only halfway stretched across the page instead of occupying the full width. You can see how it looks currently in the following image: https://i.stack.imgur.com/JQfyl.png
To further illustrate the issue, here is a test case on 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>
<!-- More code follows -->
<div class="backbtn">
<a href="/cyber/controls.aspx" class="previous">« Go Back</a>
</div>