Hi Jonathan

Can you elaborate a bit more on this and provide some further details? Where have you made an overlay? Is it in a custom property editor? Or is it an overlay you're using on the frontend part of your website? Can you perhaps share some code and some screendumps in order to provide some context? That will make it a lot easier to help you out :-)

/Jan

Hi Jonathan

Thanks for posting some more details :-)

I'm wondering if you could also share the code from the "ProfileOverlay" view with us too?

/Jan

Hi, No problem - the View is:

<div ng-controller="grid.profile" class="app-container">
<div ng-class="isRequiredAndMissing(control.$uniqueId)" ng-click="openOverlay($scope.control)">
    <div ng-show="isRequiredAndMissing(control.$uniqueId)" class="app-alert"> Attention: Please complete all required fields in this block</div>
    <div class="app-table">
        <div class="app-table-row" ng-show="control.active">
            <button prevent-default
                    ng-click="openOverlay($scope.control)"
                    class="btn">
                Edit Profile block
            </button>
        </div>
            <div class="app-table-row" ng-show="!control.active">
                <div class="app-table-cell" ng-show="control.value.title">
                    <img ng-if="url" ng-click="setImage()" ng-src="{{url}}" />
                    <h3>{{control.value.title}}</h3>
                    <p>{{control.value.description}}</p>
                    <a href="" class="btn btn-primary" ng-show="control.value.cta">{{control.value.cta}}</a>
                </div>
                <div class="app-table-cell" ng-show="!control.value.title">
                    CANNOT RENDER PROFILE AT THIS TIME
                </div>
            </div>
        </div>
    </div>

<!-- Edit Overlay -->
<umb-overlay ng-if="overlay.show"
             model="overlay"
             view="overlay.view"
             position="right">
</umb-overlay>

And the Overlay view is:

<div>
<!--Type Drop Down-->
<div class="control-group umb-control-group">
    <div class="umb-el-wrap">
        <div class="controls">
            <label class="control-label" for="bannertypes">
                Type
            </label>
            <select ng-model="model.editModel.selectedtype" ng-options="option.label for option in model.bannertypes track by option.value"></select>
        </div>
    </div>
</div>
<!--Theme Drop Down-->
<div class="control-group umb-control-group">
    <div class="umb-el-wrap">
        <div class="controls">
            <label class="control-label" for="bannerthemes">
                Type
            </label>
            <select ng-model="model.editModel.selectedtheme" ng-options="option.label for option in model.bannerthemes track by option.value"></select>
        </div>
    </div>
</div>


<!-- image picker-->
<div class="umb-editor-placeholder" ng-click="model.setImage()" ng-if="!model.editModel.imgprop">
    <i class="icon icon-picture"></i>
    <div ng-id="!control.$inserted" class="help-text"><localize key="grid_clickToInsertImage">Click to insert image</localize></div>
</div>
<div ng-if="model.editModel.imgprop" class="app-image-preview">
    <img ng-if="model.editModel.imgprop" ng-click="model.setImage()" ng-src="{{model.editModel.imgprop.image}}" />
    <div ng-if="model.editModel.imgprop && control.active" class="app-options">
        Image Options:
        <a class="umb-sortable-thumbnails__action" ng-click="model.setImage()" href="javascript://">
            <i class="icon icon-edit"></i> <span>Edit</span>
        </a>
        <a class="umb-sortable-thumbnails__action -red" ng-click="model.remove()" href="javascript://">
            <i class="icon icon-delete"></i> <span>Delete</span>
        </a>
    </div>

</div>

<!-- Profile Text -->
<div class="control-group umb-control-group">
    <div class="umb-el-wrap">
        <div class="controls">
            <label class="control-label" for="title">
                Title
            </label>
            <input type="text" ng-model="model.editModel.title" name="title" />
        </div>
    </div>
</div>

<!-- Profile Description -->
<div class="control-group umb-control-group">
    <div class="umb-el-wrap">
        <div class="controls">
            <label class="control-label" for="btnLink">
                Description
            </label>
            <textarea placeholder="Description" rows="5" ng-model="model.editModel.description" class="app-input" />
        </div>
    </div>
</div>

<!-- Profile Call to Action -->
<div class="control-group umb-control-group">
    <div class="umb-el-wrap">
        <div class="controls">
            <label class="control-label" for="cta">
                Title
            </label>
            <input type="text" ng-model="model.editModel.cta" name="cta" />
        </div>
    </div>
</div>

<!-- Browse to page -->
<div>
    <a class="btn btn-default btn-lg btn-block" ng-click="model.setContentId()">Browse to Page</a>
    <span class="app-help-text">Currently links to: <i class="app-help-text-highlight">{{model.editModel.linkprop.name}} ({{model.editModel.linkprop.url}})</i></span>
</div>

is working on a reply...