Hello,


I appreciate this may be hard to answer because I cannot share the oml because of dependencies with other applications but... 


I Have a page which is made up of different Section Expandables (please see below) These all work great and the sections collapse fully. 

However my issue comes in this "Actions" section, where I have a list of actions and their sub actions. The information seems to display ok when everything is expanded but unfortunately when trying to close the Sections they do not seem to collapse the whole way (see close up below)

Below I have also included the widget trees of this particular section:


I have inspected the page to see where the issues might lie, and there seems to be a Padding inherited from the widget itself and doesnt seem to be with any custom CSS I have used here (it mostly relates to colors)


Any help would be greatly appreciated

Christopher Kennedy wrote:

Hello,


I appreciate this may be hard to answer because I cannot share the oml because of dependencies with other applications but... 


I Have a page which is made up of different Section Expandables (please see below) These all work great and the sections collapse fully. 

However my issue comes in this "Actions" section, where I have a list of actions and their sub actions. The information seems to display ok when everything is expanded but unfortunately when trying to close the Sections they do not seem to collapse the whole way (see close up below)

Below I have also included the widget trees of this particular section:


I have inspected the page to see where the issues might lie, and there seems to be a Padding inherited from the widget itself and doesnt seem to be with any custom CSS I have used here (it mostly relates to colors)


Any help would be greatly appreciated

Can you provide the CSS op .SectionExpandable? Depending on the theme you use.


Martin Rozeboom wrote:

Can you provide the CSS op .SectionExpandable? Depending on the theme you use.



SyntaxEditor Code Snippet - From Patterns_SilkUI

/* SectionExpandable **************************/

.Panel .SectionExpandable {
    margin-top: 0;
}

.Panel_content.nopadding {
    padding: 0;
}

.SectionExpandable_header {
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    display: table;
    margin-top: 0;
    padding: 0 0 5px 0;
    width: 100%;
}

.SectionExpandable.expanded .SectionExpandable_header {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.SectionExpandable__title.Heading2 {
    display: table-cell;
    min-width: 100px;
    text-align: left;
    vertical-align: middle;
}

.SectionExpandable__title.Heading2 span.fa {
    margin-right: 5px;
}

.SectionExpandable__icon.Heading2 {
    display: table-cell;
    text-align: right;
    vertical-align: middle;
    width: 16px;
}

.SectionExpandable.expanded .SectionExpandable__icon {
    -webkit-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
            transform: rotate(-180deg);
}

.SectionExpandable_content {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top: none;
    box-sizing: content-box;
    height: 0;
    margin-top: 0;
    overflow: hidden;
    padding: 0 10px;
    -webkit-transition: all 500ms cubic-bezier(.420, .000, .580, 1.000);
            transition: all 500ms cubic-bezier(.420, .000, .580, 1.000);
    visibility: visible;

    -servicestudio-height: auto;
}


.SectionExpandable.autoheight .SectionExpandable_content {
    display: block;
    height: auto !important;
    -webkit-transition: 0;
            transition: 0;
}


.SectionExpandable.expanded .SectionExpandable_content {
    display: block;
    height: auto;
    overflow: visible;
    padding: 10px;
    visibility: visible;
}


From Patterns_Lisbon

/* SectionExpandable **************************/
.SectionExpandable {
    background-color: #fff;
    border: 1px solid #dadbde;
    box-shadow: 0 1px 3px rgba(211, 211, 211, .5);
}

.SectionExpandable .SectionExpandable_header {
    padding: 10px;
}

.SectionExpandable .SectionExpandable_header .Heading2 {
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
}

.SectionExpandable.expanded .SectionExpandable_header .Heading2 {
    color: #dab702;
}

.SectionExpandable .SectionExpandable_header .Heading2.SectionExpandable__icon {
    font-size: 24px;
}


From My Theme

.expanded .SectionExpandable__icon.Heading2 > .fa {
    color: #006732; /*primary-color*/
}

.Panel .SectionExpandable__icon.Heading2 > .fa {
    color: #006732; /*primary-color*/
}
.SectionExpandable.expanded .SectionExpandable_header .Heading2 {
    color: #006732; /*primary-color*/
}

Hope that helps!


Thanks