locked
how to increase height of expander RRS feed

  • Question

  • User1454413872 posted

    hi

    i have this expander i can not create height auto when i add anew element inside it dynamically how can i do it?

    i want when i add a new element inside it  dynamically the height increase automatically 

    <button class="accordion" style="background-color:white"> MORE INFORMATION</button>
                  <div class="panel">
     
                      <br>
     
                      <form class="form-inline" style="margin-left:-15px">
                          <div class="form-group ">
                              <label style="font-familyConsolas;margin-left:25px">Website</label><br>
                              <input id="website" class="form-control" type="text" style="width350pxmargin-left20px">
                          </div>
                      </form>
                      <br>
                      <form class="form-inline" style="margin-left:-15px">
                          <div class="form-group ">
                              <label style="font-familyConsolas;margin-left:25px">Supplier Details</label><br>
                              <textarea id="supplier_detail" class="form-control" style="width850pxheight:200pxmargin-left20px"></textarea>
                          </div>
     
                      </form>
     
                      <br>
                      <form class="form-inline" style="margin-left:15px">
                          <div class="form-group ">
                              <label class="contain">
                                  Is Frozen
                                  <input id="frozen" type="checkbox" style="margin-left:5px">
                                  <span class="checkmark"></span>
                              </label>
                              <input type="text" value="False" id="t_frozen" style="display:none">
     
                          </div>
                      </form>
     
                      <br>
     
     
                  </div>
     


    <script>
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function () {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
    panel.style.maxHeight = null;
    } else {
    panel.style.maxHeight = panel.scrollHeight + "px";
    }
    });
    }
    </script>

                  <!--End Fifth Row-->
     
              
    
    Friday, May 11, 2018 7:40 AM

All replies

  • User36583972 posted


    Hi zhyan.ise,

    i have this expander i can not create height auto when i add anew element inside it dynamically how can i do it?

    i want when i add a new element inside it  dynamically the height increase automatically 

    From your description. We can't get a clear understanding of your problems. Please include all necessary code snippets for anyone else to be able to reproduce your issue from scratch along with a detailed description about the results including any exception messages or you can upload your demo that We can download it and debugging. This will help us quickly analyze your problem.


    Best Regards,

    Yong Lu

    Monday, May 14, 2018 3:11 AM
  • User1454413872 posted

    my full codes i just want to make height of expander auto when i add a new element inside it dynamically

    @{
        Layout = null;
    }
     
    <!DOCTYPE html>
     
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Subscription</title>
     
     
        <link href="~/CSS/ItemStyle.css" rel="stylesheet" />
        <link href="~/bootstrapp/css/bootstrap.min.css" rel="stylesheet" />
        <link href="~/bootstrapp/css/bootstrap.css" rel="stylesheet" />
        <link href="~/bootstrapp/css/bootstrap-theme.css" rel="stylesheet" />
        <link href="~/bootstrapp/css/bootstrap-theme.min.css" rel="stylesheet" />
        <script src="~/Scripts/jquery-1.10.2.min.js"></script>
     
     
    </head>
    <body>
     
     
        <div class="div_item_header" style="positionfixedtop0background-colorwhite ;width:1360px">
            <br>
            <label class="account_title">Subscription</label>
            <input type="button" id="save" class="btn btn-primary btn btn-outline-success" value="Save" style="margin-left:1200px;margin-top:-60px" />
     
     
        </div>
     
     
        <div class="div_content_border" style="heightautowidth900pxmargin-left170pxmargin-top60px">
     
     
     
            <!-------First Row Content----->
            <br>
            <div class="container">
                <div class="row">
     
                    <table>
                        <tr>
                            <td>
                                <form class="form-inline">
                                    <div class="form-group ">
                                        <label style="font-familyConsolas;margin-left:25px">Reference Document</label><br>
                                        <input class="form-control" type="text" style="width350pxmargin-left20px">
                                    </div>
                            </td>
     
                            <td>
                                
                                <div class="form-group col-md-offset-2" style="margin-top:15px;margin-left:200px">
                                    <label style="font-familyConsolas;margin-left:-35px">Start Date</label><br>
                                    <input id="start_date" class="form-control" type="date" style="width350pxmargin-left-40px">
                                </div>
                                </form>
                            </td>
                        </tr>
     
                        <tr>
                            <td>
                                <form class="form-inline">
                                    <div class="form-group ">
                                        <label style="font-familyConsolas;margin-left:25px">Reference Doctype</label><br>
                                        <input id="ref_doctype" list="doctype" class="form-control" type="text" style="width350pxmargin-left20px">
     
                                        <datalist id="doctype">
                                            <option>Quotation</option>
                                            <option>Delivery Note</option>
                                            <option>Payment Entry</option>
                                            <option>Purchase Invoice</option>
                                            <option>Purchase Order</option>
                                            <option>Purchase Receipt</option>
                                            <option>Journal Entry</option>
                                            <option>Sales Invoice</option>
                                            <option>Sales Order</option>
                                            <option>Supplier Quotation</option>
                                        </datalist>
     
                                    </div>
                            </td>
     
                            <td>
                                <div class="form-group col-md-offset-2" style="margin-top:15px;margin-left:200px">
                                    <label style="font-familyConsolas;margin-left:-35px">End Date</label><br>
                                    <input id="end_date" class="form-control" type="date" style="width350pxmargin-left-40px">
                                </div>
     
                                </form>
                            </td>
                        </tr>
     
     
                        <tr>
                            <td>
                                <form class="form-inline">
                                    <div class="form-group " style="display:none">
                                        <label style="font-familyConsolas;margin-left:25px">Reference Document</label><br>
                                        <input id="ref_document" class="form-control" type="text" style="width350pxmargin-left20px">
                                    </div>
                            </td>
     
                            <td>
                                <br>
                                <div class="form-group" style="margin-left:170px">
                                    <label class="contain">
                                        Submit on Creation
                                        <input id="submit_on_creation" type="checkbox" style="margin-left:5px">
                                        <span class="checkmark"></span>
                                    </label>
     
                                    <input style="display:none" type="text" id="t_submit_on_creation" value="False">
                                </div>
                                
     
                                <div class="form-group " style="margin-left:170px">
                                    <label class="contain">
                                        Disabled
                                        <input id="disabled" type="checkbox" style="margin-left:5px">
                                        <span class="checkmark"></span>
                                    </label>
                                    <input style="display:none" type="text" id="t_disabled" value="False">
                                </div>
     
                            </td>
                        </tr>
     
                        <tr>
                            <td>
                        @*<div class="form-group " style="margin-left:20px">
                            <label class="contain">
                                Disabled
                                <input id="disabled" type="checkbox" style="margin-left:5px">
                                <span class="checkmark"></span>
                            </label>
                            <input style="display:none" type="text" id="t_disabled" value="False">
                        </div>*@
                                </td>
                            </tr>
                        </form>
                                
                        </table>
                        <br>
     
     
                        <div style="background-colorlightgraywidth898pxheight:1px">
                        </div>
     
    </div>
            </div>
            <!--End First Row--->
            <!-----Second Row Content------------->
     
            <br>
     
            <div class="container">
                <div class="row">
     
                    <form class="form-inline">
     
     
                        <div class="form-group ">
                            <label style="font-familyConsolas;margin-left:25px">Frequency</label><br>
                            <input id="frequency" class="form-control" type="text" style="width350pxmargin-left20px">
                        </div>
                    </form>
     
                    <br>
                    <br>
     
                    <div style="background-colorlightgraywidth898pxheight:1px">
                    </div>
     
                </div>
            </div>
            <!--End Second Row--->
            <!--Fourth Row Content-->
     
            <button class="accordion" style="background-color:white"> NOTIFICATION</button>
            <div class="panel">
     
                <br>
     
                <div class="form-group " style="margin-left:20px">
                    <label class="contain">
                        Notify by Email
                        <input id="notify_by_email" type="checkbox" style="margin-left:5px">
                        <span class="checkmark"></span>
                    </label>
     
                    <input style="display:none" type="text" id="t_notify_by_email" value="False">
     
                </div>
     
                <script type="text/javascript">
     
            //notify
                    $('#notify_by_email').change(function () {
                if ($(this).is(':checked'))
     
                    $("#expander_message").show();
     
                else
                    $("#expander_message").hide();
     
            });
                </script>
     
     
     
     
                <!-- second expander--->
     
     
     
     
     
                <br><br>
            </div>
     
            <button class="accordion" id="expander_message" style="background-color:whitedisplay:none"> MESSAGE</button>
            <div class="panel">
     
                <br>
     
                <form class="form-inline">
     
     
                    <div class="form-group " style="margin-left:-15px">
                        <label style="font-familyConsolas;margin-left:25px">Subject</label><br>
                        <input id="subject" class="form-control" type="text" style="width350pxmargin-left20px">
                    </div>
     
                    <div class="form-group" style="margin-left:190px">
                        <label style="font-familyConsolas;margin-left:-35px">Print Format</label><br>
                        <input id="print_format" class="form-control" type="text" style="width350pxmargin-left-40px">
                    </div>
     
                </form>
     
                <br><br>
                <form class="form-inline">
     
     
                    <div class="form-group " style="margin-left:-15px">
                        <label style="font-familyConsolas;margin-left:25px">Recipients</label><br>
                        <textarea id="recipients" class="form-control" style="width:850pxheight:200pxmargin-left:20px"> </textarea>
     
                    </div>
                </form>
     
     
                <br><br><br><br>
            </div>
     
        </div>
        <!--End Fourth Row--->
     
     
        <script type="text/javascript">
     
            //submit
            $('#submit_on_creation').change(function () {
                if ($(this).is(':checked')) $('#t_submit_on_creation').val("True");
     
                else $('#t_submit_on_creation').val("False");
            });
     
     
            //disable
            $('#disabled').change(function () {
                if ($(this).is(':checked')) $('#t_disabled').val("True");
     
                else $('#t_disabled').val("False");
            });
     
     
     
            //notify
            $('#notify_by_email').change(function () {
                if ($(this).is(':checked')) $('#t_notify_by_email').val("True");
     
                else $('#t_notify_by_email').val("False");
            });
     
     
        </script>
     
     
     
        <script>
            $(function () {
                $("#save").click(function () {
     
                    $.ajax({
     
                        type: "POST",
                        url: "/Subscription/add_Subscription",
                        data: {
     
                          reference_doctype_ID: $("#ref_doctype").val(),
                          reference_document: $("#ref_document").val(),
                          start_date: $("#start_date").val(),
                          frequency: $("#frequency").val(),
                          end_date: $("#end_date").val(),
     
                          submit_on_creation: $("#t_submit_on_creation").val(),
                          disabled: $("#t_disabled").val(),
                          notify_by_email: $("#t_notify_by_email").val(),
     
                          subject: $("#subject").val(),
                          recipients: $("#print_format").val(),
                          print_format_ID: $("#recipients").val(),
     
     
                        },
     
                        success: function (data) {
                            alert(data);
                        }
                    });
     
                });
     
            });
        </script>
     
     
     
     
     
        <script>
            var acc = document.getElementsByClassName("accordion");
            var i;
     
            for (i = 0; i < acc.length; i++) {
                acc[i].addEventListener("click"function () {
                    this.classList.toggle("active");
                    var panel = this.nextElementSibling;
                    if (panel.style.maxHeight) {
                        panel.style.maxHeight = null;
                    } else {
                        panel.style.maxHeight = panel.scrollHeight + "px";
                    }
                });
            }
        </script>
     
     
     
        <!--
        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">Right</button>
        -->
    </body>
     
    </html>
    
    Monday, May 14, 2018 10:36 AM
  • User36583972 posted


    HI zhyan.ise,

    my full codes i just want to make height of expander auto when i add a new element inside it dynamically

    I try to reproduce your issue, but failed. Could you upload a running demo that we can download it and detailed steps to reproduce the problem.

    Thank you for your understanding.

    Best Regards,

    Yong Lu

    Tuesday, May 15, 2018 9:40 AM
  • User1454413872 posted

    i forgot upload style file here is my style file for accordion 

    ItemStyle.css

    body {
     
    }
     
    .div_item_header{
     
        width:1355px;
        height:70px;
        border-stylesolid;
        border-width0px 0px 1px 1px;
        border-color:lightgray;
        margin-left:-9px;
        margin-top:-10px;
    }
     
    .div_content_border{
     
        width:950px;
        border-stylesolid;
        border-width0px 1px 1px 1px;
        border-color:lightgray;
        margin-left:200px;
     
     
    }
     
     
     
    .account_title{
     
        font-size:25px;
        margin-left:620px;
        font-weight:normal;
      
     
    }
     
    .label_content{
     
        font-weight:bold;
    }
     
     
     
    a:link {
        text-decorationnone;
        color:black;
    }
     
    a:visited {
        text-decorationnone;
        color:black;
    }
     
    a:hover {
        text-decorationunderline;
        color:black;
    }
     
    a:active {
        text-decorationunderline;
        color:black;
    }
     
    .width_ListTextbox{
     
        width:50px;
     
    }
     
     
     
     
     
     
    /* Style Checkbox */
    .contain {
         displayblock;
        positionrelative;
        padding-left25px;
        padding-bottom12px;
        cursorpointer;
        font-size13px;
        font-family:arial;
        font-weight:normal;
        -webkit-user-selectnone;
        -moz-user-selectnone;
        -ms-user-selectnone;
        user-selectnone;
    }
     
    /* Hide the browser's default checkbox */
    .contain input {
        positionabsolute;
        opacity0;
        cursorpointer;
    }
     
    /* Create a custom checkbox */
    .checkmark {
        positionabsolute;
        top0;
        left0;
        height15px;
        width15px;
        background-color#eee;
        border-radius:3px;
    }
     
    /* On mouse-over, add a grey background color */
    .contain:hover input ~ .checkmark {
        background-color#ccc;
    }
     
    /* When the checkbox is checked, add a blue background */
    .contain input:checked ~ .checkmark {
        background-color#2196F3;
    }
     
    /* Create the checkmark/indicator (hidden when not checked) */
    .checkmark:after {
        content"";
        positionabsolute;
        displaynone;
    }
     
    /* Show the checkmark when checked */
    .contain input:checked ~ .checkmark:after {
        displayblock;
    }
     
    /* Style the checkmark/indicator */
    .contain .checkmark:after {
        left5px;
        top3px;
        width4px;
        height7px;
        bordersolid white;
        border-width0 2px 2px 0;
        -webkit-transformrotate(45deg);
        -ms-transformrotate(45deg);
        transformrotate(45deg);
    }
     
     
     
     
    /* Accordion*/
     
     
    .accordion {
        background-colornone;
        colornone;
        cursorpointer;
        padding18px;
        width100%;
        bordernone;
        text-alignleft;
        outlinenone;
        font-size15px;
        transition0.4s;
    }
     
    .active.accordion:hover {
        background-color:none;
    }
     
    .accordion:after {
        content'\002B';
        colornone;
        font-weightbold;
        floatright;
        margin-left5px;
    }
     
    .active:after {
        content"\2212";
    }
     
    .panel {
        padding0 18px;
        background-colorwhite;
        max-height0;
        overflowhidden;
       
    }
     
     
     
     
     
     
     
    /* Accordion2*/
    .accordion2 {
        background-colornone;
        colornone;
        cursorpointer;
        padding18px;
        width100%;
        bordernone;
        text-alignleft;
        outlinenone;
        font-size15px;
        transition0.4s;
    }
     
    .active2.accordion2:hover {
        background-color:none;
    }
     
    .accordion2:after {
        content'\002B';
        colornone;
        font-weightbold;
        floatright;
        margin-left5px;
    }
     
    .active2:after {
        content"\2212";
    }
     
    .panel2 {
        padding0 18px;
        background-colorwhite;
        max-height0;
        overflowhidden;
       
    }
    Tuesday, May 15, 2018 10:13 AM
  • User36583972 posted


    HI zhyan.ise,

    From your further description, I suggest you can upload your demo to OneDrive(Including your test material). We can download it and debugging. This will help us quickly analyze your problem.

    Share OneDrive files and folders:

    Thank you for your understanding.

    Best Regards,

    Yong Lu

    Wednesday, May 16, 2018 1:10 AM