Recently I had a request to change the height of a Angular-xeditable TextArea as you type in, I've been trying to do a lot of changes to css but it doesn't work. Any help is highly appreciated.
Here is a solution for this that is to create your own directive on top of Angular-Xeditable. The key thing is when you use that directive and want to inject into Angular-Xeditable, you need to add the prefix "e-". For example, if you directive called "expanding", when you use that directive along with angular-xeditable, the directive name should be "e-expanding"
Have a look at my sample code below. Hope it helps
Link to example code
<h4>Angular-xeditable Textarea (Bootstrap 3)</h4>
<div ng-app="app" ng-controller="Ctrl">
<a href="#" editable-textarea="user.desc" e-expanding >
<pre>{{ user.desc || 'no description' }}</pre>
</a>
</div>
Related
I am trying to change the file path of my website after having the user sign in.
Here is my body html code
<body>
<div id="map"></div>
<div id="loginmain">
<div id="center">
<div id="login-center">
<img src="Assets/google.svg">
<a id="customBtn" class="customGPlusSignIn" onclick="document.location='index.html'">Sign In</a>
<script>startApp();</script>
</div>
<p id="help-text">Sign in with your school Google account</p>
</div>
</body>
The intention of the onclick method is to call a separate html page, after the user has successfully signed in to Google. However, using onclick would change the file path regardless of the Google Sign in.
I have tried using data-onsuccess method, however it seems to be a method only for class = "g-signin2".
Instead, I am using class="customGPlusSignIn", and I'm not particularly sure how to change the file path after ensuring that the user has successfully signed in.
For context, the function startApp() is copied over from Google's sign in docs, from the bottommost code cell.
Could anyone help me with this? Thanks
In a page, I have a rendering with a placeholder, Offcanvas.cshtml
<div data-ads-offcanvas-id="#Model.Id" class="ads-offcanvas #Html.GetCssStyles()">
#{
<a data-ads-offcanvas-trigger-id="#Model.Id" class="ads-close-button" href="#0">X</a>
#Html.Sitecore().Placeholder(LayoutHelper.GetPlaceholder(Placeholders.AccordionSection, Model.Id))
}
and inside that rendering, I plan to put another rendering with a placeholder named Modal.cshtml
<div data-ads-modal-container="#Model.Id" class="ads-modal-container">
<div class="ads-modal-dialog">
<div class="ads-close-box">
<a data-ads-modal-id="#Model.Id" href="#0">X</a>
</div>
<div class="ads-modal-content">
#Html.Sitecore().Placeholder(LayoutHelper.GetPlaceholder(Placeholders.AccordionSection, Model.Id))
</div>
</div>
So it looks like:
-Offcanvas
+-Modal
++-Text content
When I put text content inside the Modal rendering, the content is not rendered. I'm guessing that it only renders that first few renderings and fail to do so when the renderings became highly nested.
Is there a solution to render components to the very-most child?
Thanks guys!
EDIT:
Here's the code for GetPlaceholder:
public static string GetPlaceholder(string name, Guid id)
{
return $"{name}_{id}";
}
Dynamic placeholders are a bit more complicated than generating a unique placeholder key. The generated key still needs to resolve back to a real placeholder that is defined in Sitecore.
Check out the Integrated Dynamic Placeholder module.
This will provide an Html helper similar to your current implementation:
#Html.Sitecore().DynamicPlaceholder("[Placeholder Name]")
In the file template/Panels/SideCategoryList.html there is line %%SNIPPET_SideCategoryList%%.
When I modify the file I think this line is referring to (template/Snippets/SideCategoryList.html) I see no change in the resulting output at all.
Any idea where the underlying template file is?
UPDATE: according to this post it could be a 'hidden snippet' which can't be edited. Can anyone confirm this? If so, what is the purpose of template/Snippets/SideCategoryList.html?
template/Panels/SideCategoryList.html
<div class="CategoryList" id="SideCategoryList">
<h3>Categories</h3>
<div class="BlockContent">
<div class="%%GLOBAL_SideCategoryListTypeClass%%">
%%SNIPPET_SideCategoryList%%
</div>
</div>
</div>
template/Snippets/SideCategoryList.html
<li class="%%GLOBAL_LastChildClass%%">
%%GLOBAL_CategoryName%%
%%GLOBAL_SubCategoryList%%
</li>
As you can see from the above template code, between the Panels and Snippets SideCategoryList.html there isn't a <ul>. Making changes to template/Snippets/SideCategoryList.html makes no difference. This seems to point to %%SNIPPET_SideCategoryList%% pulling in code from elsewhere.
Judging by the superfish classes being present on the ul, it sounds like you're using the 'Flyout menu' as the 'Category Menu Style' (This option can be found in Setup & Tools > Store Settings > Display).
When using the Flyout menu, the snippet that is being referenced is not 'Snippets/SideCategoryList.html'. Instead, try using the 'Snippets/FlyoutTree.html' and 'Snippets/FlyoutNode.html' templates.
Now I'm biulding a django project with jinja2 dealing with templates. Some page contents are submited by the client with wysiwy editor, and thing's going fine with the detail pages.
But the list pages are wrong with the slice of the contents.
My code:
<div class="summary ">
<div class="content">{{ question.content[:200]|e}}...</div>
</div>
But the output is:
<p>what i want to show here is raw text without markups</p>...
The expected result is that the html markups like <p></p> <section>.... are gone (filtered or eliminated) and only the raw text shows!
So how can I fix it? Thanks in advance!
Use striptags filter:
striptags(value)
Strip SGML/XML tags and replace adjacent whitespace
by one space.
<div class="content">{{ question.content|striptags}}...</div>
Jinja2 striptags filter test will also help you to understand how it works.
Hope that helps.
I have a problem with TinyMCE in Joomla 2.5.4. I have tried for a few days now to add a link to a div section (like <div> something< </div> ) but failed, the anchor is stripped from the HTML section because TinyMCE sees that as being wrong in HTML4. After a 3 days research I gave up and instead of a div i used a unordered list.
Now when i try to add a link to a list item (like <li> <p> something </p> </li> ) TinyMCE rearranges everything and moves the anchor inside of the list item (like <li> <a href="#"> <p> something </p> &=lt;/a> </li>).
I have tried pretty much everything from valid_elements : "[]" to text filter: No Filtering but i ran low on ideas.
Can anyone please help me?
Try playing around with TinyMCE's html5 options: http://www.tinymce.com/tryit/html5_formats.php
Hit "view source" to see how they're doing it. It's mainly this option inside tinyMCE.init:
schema: "html5",