I have a custom button on the cloned "SC Catalog Item" widget in Madrid. see screenshot below.
When I shrink the screen, it goes away.
here's the html code. the button is on the <!-- bottom cart -->
<div id="sc_cat_item" ng-if="::data.recordFound" sn-atf-blacklist="IS_SERVICE_CATALOG">
<sp-widget widget="c.orderItemModal" ng-if="c.orderItemModal"></sp-widget>
<div class="row" ng-if="::data.sc_cat_item" >
<div class="col-sm-12" ng-class="{true: 'col-md-9', false: 'col-md-12'}[options.display_cart_on_right === 'true']" id="catItemTop">
<!-- Info Message Box -->
<div ng-if="data.show_wishlist_msg" class="alert alert-info">
{{::m.itemWishlistMsg}}
</div>
<!-- Success Message Box -->
<div class="alert alert-success" ng-if="data.showMsg" sc-bind-html-compile="m.actionMsg">
</div>
<div class="panel panel-default">
<!-- Title Section -->
<div class="wrapper-md b-b break-word item-header" ng-class="{true: '', false: 'sc-sticky-item-header'}[!c.data.sc_cat_item.short_description]" style="top: {{stickyHeaderTop}}">
<h1 class="h2 m-t-none m-b-sm font-thin" ng-if="::data.sc_cat_item.name">{{::data.sc_cat_item.name}}</h1>
<div class="text-muted sc-cat-item-short-description" ng-if="::data.sc_cat_item.short_description">{{::data.sc_cat_item.short_description}}</div>
</div>
<div class="wrapper-md row b-b no-margin" ng-if="c.data.sc_cat_item.picture || c.data.sc_cat_item.description">
<div class="col-sm-4 col-xs-12 no-padder" ng-if="c.data.sc_cat_item.picture">
<div class="wrapper-md text-center">
<i class="fa fa-chevron-left pointer" style="position:absolute; top:50%; left:4%; color:#CECECE" ng-if="options.image_gallery"></i>
<img class="img-responsive catalog-item-image" alt="{{::data.sc_cat_item.name}}" style="display: inline" ng-src="{{::data.sc_cat_item.picture}}?t=medium" />
<i class="fa fa-chevron-right pointer" style="position:absolute; top:50%; right:4%; color:#CECECE" ng-if="options.image_gallery"></i>
<div class="image-gallery padding-top" ng-if="options.image_gallery">
<i class="fa fa-circle active"></i>
<i class="fa fa-circle"></i>
<i class="fa fa-circle"></i>
</div>
</div>
</div>
<div class="col-xs-12 padder-md break-word"
ng-class="{true: 'col-sm-12 no-padder', false: 'col-sm-8'}[!c.data.sc_cat_item.picture]">
<div class="visible-md visible-lg" ng-class="{false : 'visible-xs visible-sm', true : 'hidden-xs hidden-sm'}[c.options.show_less_description === 'true']">
<div ng-bind-html="::data.sc_cat_item.description" class="sc-item-description"></div>
</div>
<div class="col-xs-12 col-sm-12 visible-xs visible-sm" ng-if="c.options.show_less_description === 'true'">
<sc-toggle-data sn-data="::data.sc_cat_item.description"></sc-toggle-data>
</div>
</div>
</div>
<div class="" ng-class="{'b-b wrapper-md': !data.no_fields}">
<sp-cat-item item="::data.sc_cat_item" ></sp-cat-item>
<form>
<!-- display view and model -->
<sp-model form-model="::data.sc_cat_item" mandatory="c.mandatory"></sp-model>
</form>
</div>
<!-- Bottom cart -->
<div class="inline-cart" ng-if="::options.display_cart_on_right !== 'true'">
<div ng-if="data.sc_cat_item.sys_class_name != 'sc_cat_item_content'" class="wrapper-md b-b">
<div class="m-b text-right" ng-if="data.showPrices && (data.sc_cat_item.price || data.sc_cat_item.recurring_price)" >
<b>${Price}:</b> {{data.sc_cat_item.price_display}}<em ng-if="data.sc_cat_item.recurring_price" class="cat_item_price"> {{data.sc_cat_item.price ? '+' : ''}} {{data.sc_cat_item.recurring_price_display + ' ' + data.sc_cat_item.recurring_price_frequency}}</em>
</div>
<div class="m-b text-right" ng-if="!data.hideDeliveryTime && !data.sc_cat_item.no_delivery_time && data.sc_cat_item.estimated_delivery_time">
<b>${Delivery Time}:</b> {{::data.sc_cat_item.estimated_delivery_time}}
</div>
<div ng-if="::c.allowOrder()" class="text-right">
<select id="catItemQuantity"
ng-if="c.showQuantitySelector()"
ng-disabled="submitting || submitted"
class="m-r-xs sn-select-basic inline"
ng-model="c.quantity"
sn-select-width="65px"
aria-label="${Quantity}">
<option ng-repeat="num in data.choiceListQuantity" value={{::num.value}}>{{::num.label}}</option>
</select>
<button tabindex="0" ng-if="c.showAddCartBtn()" name="add_to_cart" ng-disabled="submitting || submitted" ng-click="triggerAddToCart()" class="btn btn-default m-r-xs">
<i class="fa fa fa-shopping-cart m-r-xs"></i>
${Add to Cart}
</button>
<button tabindex="0" ng-if="data.is_cart_item" name="update" ng-disabled="submitting || submitted" ng-click="triggerUpdateCart()" class="btn btn-default">
<i class="fa fa fa-shopping-cart m-r-xs"></i>
${Update Cart}
</button>
<span class="form-group relative" ng-if="c.showAddToWishlist()">
<button ng-if="!data.is_wishlist_item" name="add_to_wishlist" ng-click="addToWishlist()" ng-disabled="submitting || submitted" class="btn btn-default m-r-xs">
<i class="icon icon-sp-wishlist m-r-xs" style="vertical-align: text-bottom;"></i>
${Add to Wish List}
</button>
<button ng-if="data.is_wishlist_item" name="update_wishlist" ng-click="addToWishlist()" ng-disabled="submitting || submitted" class="btn btn-default m-r-xs">
<i class="icon icon-sp-wishlist m-r-xs" style="vertical-align: text-bottom;"></i>
${Update Wish List}
</button>
</span>
<span><button name="reorder" ng-click="reOrderItem()" data-toggle="tooltip" title="${Submit another access request for this user}" ng-if="c.data.showReorder && c.data.isReorder" class="btn btn-default">${Order Again}</button></span>
<button ng-if="::c.showOrderNowButton()" tabindex="0" name="submit" ng-disabled="submitting || submitted" ng-click="triggerOnSubmit()" class="btn btn-primary">{{submitButtonMsg}}</button>
<span ng-if="submitting" style="padding-left:4px">${Submitting...}</span>
</div>
<div ng-show="hasMandatory(c.mandatory)" class="alert alert-info" style="margin-top: .5em" ng-if="c.options.show_field_validation_messages === 'true'">
<span ng-if="hasMandatory(mandatory)">${Required information} </span>
<label ng-repeat="f in c.mandatory" for="sp_formfield_{{::f.catalogFieldName}}" class="label label-danger sc-field-error-label" style="margin-right: .5em; display: inline-block;">{{::f.label}}</label>
</div>
</div>
</div>
<div ng-if="c.showAttachments()" class="wrapper-md row no-margin">
<now-attachments-list template="sp_attachment_single_line" ></now-attachments-list>
<label ng-if="!submitting && !submitted" style="float:right;font-weight:normal;cursor:pointer;">
<sp-attachment-button></sp-attachment-button>
<span class="fa fa-asterisk mandatory"
ng-if="data.sc_cat_item.mandatory_attachment"
ng-class="{'mandatory-filled': data.sc_cat_item.mandatory_attachment && (data.sc_cat_item.attachment_submitted || attachments.length > 0)}"
style="vertical-align:super"></span>
<span>${Add attachments}</span>
</label>
</div>
</div>
<div ng-if="::data.sc_cat_item.content_type == 'external'" class="wrapper-md">
<a ng-href="{{::data.sc_cat_item.url}}" target={{::data.sc_cat_item.target}}>{{::data.sc_cat_item.url}} ➚</a>
</div>
<div ng-if="::data.sc_cat_item.content_type == 'kb'" class="wrapper-md">
<a ng-href="?id=kb_article&sys_id={{::data.sc_cat_item.kb_article}}">${Go to KB Article:} {{::data.sc_cat_item.kb_article_description}}</a>
</div>
</div>
<!-- Right side content -->
<div class="col-sm-12 col-md-3 right-side-cart" ng-show="::options.display_cart_on_right === 'true'">
<!-- Right side cart( If you are chaning anything here, please change in bottom cart section also) -->
<div ng-class="{true:'sc-fixed', false:'' }[options.display_cart_on_right === 'true']">
<div ng-if="data.sc_cat_item.sys_class_name != 'sc_cat_item_content'" class="panel panel-{{::options.color}} b wrapper-md">
<div ng-if="::c.allowOrder()">
<select id="catItemQuantity"
ng-if="c.showQuantitySelector()"
ng-disabled="submitting || submitted"
class="m-b sn-select-basic"
ng-model="c.quantity"
aria-label="${Quantity}">
<option ng-repeat="num in data.choiceListQuantity" value={{::num.value}}>{{::num.label}}</option>
</select>
</div>
<div class="form-group relative">
<div class="form-group" ng-if="data.showPrices && (data.sc_cat_item.price || data.sc_cat_item.recurring_price)">
<b>${Price}:</b> {{data.sc_cat_item.price_display}}<em ng-if="data.sc_cat_item.recurring_price" class="cat_item_price"> {{data.sc_cat_item.price ? '+' : ''}} {{data.sc_cat_item.recurring_price_display + ' ' + data.sc_cat_item.recurring_price_frequency}}</em>
</div>
<div class="form-group" ng-if="!data.hideDeliveryTime && !data.sc_cat_item.no_delivery_time && data.sc_cat_item.estimated_delivery_time">
<b>${Delivery Time}:</b> {{::data.sc_cat_item.estimated_delivery_time}}
</div>
<button tabindex="0" ng-if="c.showAddCartBtn()" name="add_to_cart" ng-disabled="submitting || submitted" ng-click="triggerAddToCart()" class="btn btn-default sc-btn form-control">
<i class="fa fa fa-shopping-cart sc-order-widget-btn pull-left"></i>
${Add to Cart}
</button>
<button tabindex="0" ng-if="data.is_cart_item" name="update" ng-disabled="submitting || submitted" ng-click="triggerUpdateCart()" class="btn btn-default sc-btn form-control">
<i class="fa fa fa-shopping-cart sc-order-widget-btn pull-left"></i>
${Update Cart}
</button>
</div>
<div class="form-group relative" ng-if="c.showAddToWishlist()">
<button ng-if="!data.is_wishlist_item" name="add_to_wishlist" ng-click="addToWishlist()" ng-disabled="submitting || submitted" class="btn btn-default sc-btn form-control">
<i class="icon icon-sp-wishlist sc-order-widget-btn pull-left" style="top:5px"></i>
${Add to Wish List}
</button>
<button ng-if="data.is_wishlist_item" name="update_wishlist" ng-click="addToWishlist()" ng-disabled="submitting || submitted" class="btn btn-default sc-btn form-control">
<i class="icon icon-sp-wishlist sc-order-widget-btn pull-left" style="top:5px"></i>
${Update Wish List}
</button>
</div>
<div class="form-group m-b-xs">
<button ng-if="::c.showOrderNowButton()" tabindex="0" name="submit" ng-disabled="submitting || submitted" ng-click="triggerOnSubmit()" class="btn btn-primary btn-block">{{::submitButtonMsg}}</button>
<span ng-if="submitting" style="padding-left:4px">${Submitting...}</span>
</div>
</div>
<div class="sc-item-error-messages" ng-if="c.options.show_field_validation_messages === 'true'">
<div class="row" ng-if="hasMandatory(c.mandatory)" class=" row alert alert-info-border" style="margin-top: .5em">
<div class="col-sm-12">
<div ng-if="hasMandatory(c.mandatory)">${Required information} </div>
<label ng-repeat="f in c.mandatory" class="label sc-field-error-label">{{::f.label}}</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div ng-if="::!data.sc_cat_item" >
<div class="panel panel-default">
<div class="panel-heading"><h4 class="panel-title">${Item not found}</h4></div>
<div class="panel-body wrapper">
<p>${This item is not found or currently not available}</p>
<p>${Suggestions}:</p>
<ul>
<li>${Try searching for the item}</li>
<li>${Go to the Service Catalog homepage}</li>
</ul>
</div>
</div>
</div>
<div class="sr-only" aria-live="assertive">{{::c.status}}</div>
</div>
<div ng-if="::!data.recordFound" class="alert alert-info">{{::m.invalidRecordMsg}}</div>
<now-message key="Added item to shopping cart" value="${Added item to shopping cart}"/>
<now-message key="Attachment(s) are not added" value="${Attachment(s) are not added}"/>
<now-message key="Leave page?" value="${Leave page?}"/>
<now-message key="Changes you made will be lost." value="${Changes you made will be lost.}"/>
<now-message key="Cancel" value="${Cancel}"/>
<now-message key="Leave" value="${Leave}"/>
1 ACCEPTED SOLUTION
I have resolved the issue.
This one is interesting, if you take a look at the HTML code, there is a version of the buttons for the right side cart and bottom cart.
I am only using the bottom cart so that's the only part I modified. But when I made my screen smaller and inspected the page, the Submit button div that it uses is actually the right side cart div. So I made the changes on the right side cart submit button div and it fixed it.
Here's the code change. This snippet is on the right side cart part. I removed the "::" double colon so that the button text will not be one time binded and should update to "Submitted".
I have resolved the issue.
This one is interesting, if you take a look at the HTML code, there is a version of the buttons for the right side cart and bottom cart.
I am only using the bottom cart so that's the only part I modified. But when I made my screen smaller and inspected the page, the Submit button div that it uses is actually the right side cart div. So I made the changes on the right side cart submit button div and it fixed it.
Here's the code change. This snippet is on the right side cart part. I removed the "::" double colon so that the button text will not be one time binded and should update to "Submitted".
