Sitefinity Inline Edit Menu Not Styled - Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 07-May-2015 00:00

I recently just upgraded a Sitefinity web site from 5.0 to 8.0.5710.

After logging on the my Sitefinity web site as administrator and then going to the home page of my site, I noticed that the inline edit menu is NOT styled and instead shows up at the bottom of the page.

Below is the HTML that is rendered for the inline edit menu.

<div class="sfInlineEditingPageMenu sfPreventClickOutside" data-bind="events: clickoutside: hideMenu ">

<input name="ctl00$ctl09$ctl00$ctl00$pageId" type="hidden" id="ctl09_ctl00_ctl00_pageId" data-bind="serverValue: pageId" value="2DE6D095-B27E-4F90-83AB-15AAC3639A9E">

<input name="ctl00$ctl09$ctl00$ctl00$baseUrl" type="hidden" id="ctl09_ctl00_ctl00_baseUrl" data-bind="serverValue: baseUrl" value="/ExtRes">

<input name="ctl00$ctl09$ctl00$ctl00$pageUrl" type="hidden" id="ctl09_ctl00_ctl00_pageUrl" data-bind="serverValue: pageUrl" value="home/privacy-policy">

<input name="ctl00$ctl09$ctl00$ctl00$serviceUrl" type="hidden" id="ctl09_ctl00_ctl00_serviceUrl" data-bind="serverValue: serviceUrl" value="/RestApi/Sitefinity/inlineediting">

<input name="ctl00$ctl09$ctl00$ctl00$redirectToRoot" type="hidden" id="ctl09_ctl00_ctl00_redirectToRoot" data-bind="serverValue: redirectToRoot" value="false">

<input name="ctl00$ctl09$ctl00$ctl00$isPageLocked" type="hidden" id="ctl09_ctl00_ctl00_isPageLocked" data-bind="serverValue: isPageLocked" value="false">

<input name="ctl00$ctl09$ctl00$ctl00$currentUICulture" type="hidden" id="ctl09_ctl00_ctl00_currentUICulture" data-bind="serverValue: currentUICulture" value="en">

<input name="ctl00$ctl09$ctl00$ctl00$siteBaseUrl" type="hidden" id="ctl09_ctl00_ctl00_siteBaseUrl" data-bind="serverValue: siteBaseUrl" value="/">

<input name="ctl00$ctl09$ctl00$ctl00$imageServiceUrl" type="hidden" id="ctl09_ctl00_ctl00_imageServiceUrl" data-bind="serverValue: imageServiceUrl" value="/Sitefinity/Services/Content/ImageService.svc/">

<input name="ctl00$ctl09$ctl00$ctl00$flatTaxonServiceUrl" type="hidden" id="ctl09_ctl00_ctl00_flatTaxonServiceUrl" data-bind="serverValue: flatTaxonServiceUrl" value="/Sitefinity/Services/Taxonomies/FlatTaxon.svc">

<input name="ctl00$ctl09$ctl00$ctl00$navigatingAwayMessage" type="hidden" id="ctl09_ctl00_ctl00_navigatingAwayMessage" data-bind="serverValue: navigatingAwayMessage" value=

"By navigating away from the editor your changes will not be canceled and the items will remain locked. You can use "Exit editing" link to leave and unlock."

>

<a href="javascript:void(0);" data-bind="click: toggleMenu" class="sfInlineEditingToggleLnk">

Inline Editing

</a>

<ul class="sfInlineEditingActionsList">

<li class="sfToggleEditTools">

<a data-bind="click: editThisPage, visible: isNotInEditMode" class="sfInlineEditLnk">

Edit content

</a>

<a data-bind="click: cancelEditThisPage, visible: isInEditMode" class="sfInlineEditLnk" style="display: none;">

Exit editing

</a>

</li>

<li class="sfViewPageStats">

<a id="ctl09_ctl00_ctl00_analyticsStatsLink" class="sfViewStatsLnk" href=

"/Sitefinity/marketing/Analytics#/Content/Top_content/sf:allurls:/home/privacy-policy[2de6d095-b27e-4f90-83ab-15aac3639a9e]"

>Page Analytics</a>

</li>

<li class="sfEditInPageEditor">

<a id="ctl09_ctl00_ctl00_editPageInBackendLink" class="sfEditInPageEditorLnk" href="/home/privacy-policy/Action/Edit/en" target="_blank">Edit widgets and layout</a>

</li>

<li class="sfEditPage" style="display: none">

<input data-bind="checked: showDraftItems, click: switchViewMode, enabled: isNotInEditMode" type="checkbox" id="show-draft">

<label for="show-draft">

Show not published content

</label>

</li>

<li class="sfLogout">

<p class="sfNote">

You are logged as <span>Craig Holdheide</span></p>

<div>

<a href="javascript:__doPostBack('ctl00$ctl09$ctl00$ctl00$ctl04$ctl00$ctl00$status','')">Log out</a>

</div>

</li>

</ul>

</div>

I loaded up a blank Sitefinity web site (version 8.0.5710) and I noticed that the styling comes from the following line of HTML in the head of the page.

<link href=

"/Telerik.Web.UI.WebResource.axd?d=rNINBnzEDdtd3dgUWBMTc8cGWNBvS7NOMmfWUUsxP_j0PcPVyJhvRal9UmYjc61DGAkdXDFjcxNuruhMQ4ZWpbEgWXW9OBAFi0Ij4jSDq7h8F0Xx9R3InhcozRYJVuvyPfDBvTOffv8MEdiq3ZL8Kg2&t=635328563960000000&compress=0&_TSM_CombinedScripts_=%3b%3bTelerik.Sitefinity.Resources%2c+Version%3d8.0.5710.0%2c+Culture%3dneutral%2c+PublicKeyToken%3db28c218413bdf563%3aen%3a9cb54c82-d9c2-4ef3-990f-a9faf24bfb22%3a7a90d6a%3a83fa35c7%3a850288ef%3a4a0e9096%3a68ef0189%3ad271177c%3adff30785"

type="text/css" rel="stylesheet">

More specifically, I noticed that the styling comes from the embedded CSS files in the Telerik.Sitefinity.Resources assembly called Telerik.Sitefinity.Resources.Themes.Default.Styles.InlineEditing.css.

However, when I examine the HTML of the site I just upgraded, I do NOT see a reference to this CSS with the LINK tag in the head of the page.

Any ideas why these styles would be missing?

Craig

Posted by Community Admin on 08-May-2015 00:00

OK, figured out my own issue.

For some reason the original developer had the following line of JavaScript included on the master page.

$('link[href^="/Telerik.Web.UI.WebResource.axd"]').remove();

No wondering nothing was getting styled properly. Bad coding in my opinion.

Craig

Posted by Community Admin on 12-May-2015 00:00

Hi Craig,

Thank you for sharing your finding with our community.

Regards,
Kaloyan
Telerik

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items

This thread is closed