Editor Template Formatting Help

ITDATAG

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

allan

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

ITDATAG

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>

allan

Try:

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

Allan