Editor Template Formatting Help

Editor Template Formatting Help

ITDATAGITDATAG Posts: 18Questions: 6Answers: 1

Hello all,

I Would like to see if anyone has good suggestions on how to format an custom editor template.
The picture below shows how way my field used to look before i converted them to the editor-fields format and also how they look with the editor-field options.

Please feel free to suggest how to format the fields, I am trying to eliminate white space and also eliminate the fact that the "Select" functions seems to appear when I go over a field.

template

        <div id="MainForm">
            <fieldset>
                <div class="container">
                    <div class="row">
                        <div>

                            <div class="container">
                                <div id="accordion1">
                                    <h3>Account Name + Rep..</h3>
                                    <div class="master"><div class="row">
                                                <div style="flex: 1;" data-editor-template="CompanyName"></div>
                                                <div style="flex: 1;" data-editor-template="Status"></div>
                                            </div>
                                            <div class="row">
                                                <div style="flex: 1;" data-editor-template="EntryDate"></div>
                                                <div style="flex: 1;" data-editor-template="SalesRep"></div>

                                            </div>
                                            <div class="row">
                                                <div style="flex: 1;" data-editor-template="MainContact"></div>
                                                <div style="flex: 1;" data-editor-template="Phone"></div>
                                            </div>
                                            <div class="row">
                                                <div style="flex: 1;" data-editor-template="Address"></div>
                                            </div>
                                            <div class="row">
                                                <div style="flex: 1;" data-editor-template="City"></div>
                                                <div style="flex: 1;" data-editor-template="State"></div>
                                            </div>
                                            <div class="row">
                                                <div style="flex: 1;" data-editor-template="ZipCode"></div>
                                                <div style="flex: 1;" data-editor-template="Country"></div>
                                            </div>


                                            <div class="row">
                                                <div style="flex: 1;" data-editor-template="Notes"></div>
                                            </div>

Any suggestions would be greatly appreciated.

thanks

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    It will be caused by something in the CSS. If you right click in that area and select "Inspect element" then it will show CSS properties for the element there. My guess is it has a padding on it.

    If you need some help with that, I'd need a link to the page to be able to do that myself.

    Allan

  • ITDATAGITDATAG Posts: 18Questions: 6Answers: 1

    Hello Allan,

    Thanks for taking the time to reply. I did find that the is padding on the DTE_FIELD. Please see the pic

    i have tryed removing the padding using the following css

        div.DTE_Body div.DTE_Body_Content div.DTE_Field {
            padding-left: 0px;
        }
    

    Here is the code of the template. I am not sure what I am missing, any pointers would be appreciated.

    <div id="MainForm">
            <div id="accordion1">
                <h3>Account Name + Rep..</h3>
                <div class="master">
    
                    <div class="row">
                        <div style="flex: 1; padding-left:0px;" data-editor-template="CompanyName"></div>
                        <div style="flex: 1;" data-editor-template="Status"></div>
                    </div>
                    <div class="row">
                        <div style="flex: 1;padding-left:0px;" data-editor-template="EntryDate"></div>
                        <div style="flex: 1;" data-editor-template="SalesRep"></div>
    
                    </div>
                    <div class="row">
                        <div style="flex: 1;padding-left:0px;" data-editor-template="MainContact"></div>
                        <div style="flex: 1;" data-editor-template="Phone"></div>
                    </div>
                </div>
                <h3 class=" OtherContact">Address</h3>
                <div class=" OtherContact">
                    <div>
                        <div class="row">
                            <div style="flex: 1;padding-left:0px;" data-editor-template="Address"></div>
                        </div>
                        <div class="row">
                            <div style="flex: 1;padding-left:0px;" data-editor-template="City"></div>
                            <div style="flex: 1;" data-editor-template="State"></div>
                        </div>
                        <div class="row">
                            <div style="flex: 1;padding-left:0px;" data-editor-template="ZipCode"></div>
                            <div style="flex: 1;" data-editor-template="Country"></div>
                        </div>
                    </div>
                </div>
                <h3 class=" Activity">Activity</h3>
                <div class=" Activity">
                    <div>
                        <div class="row">
                            <div style="flex: 3;" data-editor-template="Notes"></div>
                        </div>
                    </div>
                </div>
            </div> 
        </div>
    
  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    Answer ✓

    Try:

    div.DTE_Body div.DTE_Body_Content div.DTE_Field {
      padding: 5px;
    }
    

    Allan

This discussion has been closed.