So we use CSS tooltips in our project which basically require adding the class "tooltip-extended" and adding the property aria-label to the HTML tag which contains the text of the tooltip. These are purely CSS tooltips and work everywhere. So on link-to helper it was pretty easy. However, I ran into an issue with form elements. Primarily because Ember seems to make the actual form elements display: none in some cases, like with checkboxes, and adds a sub-element A tag which is what is visible.
This is the code for the form stuff, pretty standard:
{{input
type="checkbox"
class="tv-checkbox"
checked=defaultSetup
data-label="Default Settings"
name=defaults
change=(action "toggleDefaults" value="target.checked")}}
{{#radio-button
class="tooltip-enhanced"
value="simple"
name="complexity"
groupValue=passphraseComplexity
changed="complexityChanged"}}
Simple
{{/radio-button}}
If I add tooltip-extended to the class it either doesn't add it at all, or it adds it to the actual form element which is display: none. Even extending the attributes allowed would not put these attributes on the child elements created.
It is desirable that the tooltip appear directly over the element the mouse is over. If the class and attribute are placed on a parent DIV element, this is not the behavior that ensues because it centers on the element.
Is it possible to do what I want?
Related
Summary
I want to continue to use nested routes but without displaying top level content when the nested route is accessed. I'm not sure this is possible ?
Detail
Initially my requirement was to to display a list of, eg, foods and offer the user the option to add a food item foods/add . Using the outlet tag at the top of the list template allowed a form to add a food item to become visible at the top of the list, transitioning back to food after the add resulted in the list being displayed without the form.
New Requirement
The requirement has now changed and it's necessary to show the form without the the contents of the list and after a succesful add show the list without any form.
Question
I know I could abandon the sub-routes approach and create a route such as food-add but is there any other way of preserving the sub-route (and the corresponding file structure, which I like) but allow the the template for foods/add to be rendered without the list content ?
Each route has an index template which is only visible when a child route is not present.
You could do something like this:
index.hbs
{{#each foods as |food|}}
{{food}}
{{/each}}
<LinkTo #route="food.add">Add</LinkTo>
food/add.hbs
<form>
...
</form>
{{!-- submitting this form would add the new food to the list of foods
and then also transition back to `food` --}}
Here is some more info on how the index route works
https://guides.emberjs.com/release/routing/defining-your-routes/#toc_nested-routes
https://guides.emberjs.com/release/routing/defining-your-routes/#toc_index-routes
I want the user to select a number of elements belonging to a certain model. I don't want to use the default 'ctrl+click' input of django forms, but create a table of checkboxes myself.
For that reason I hide the ModelMultipleChoiceField by defining the widget:
field = forms.ModelMultipleChoiceField(..., widget=forms.MultipleHiddenInput())
Then I add the form element into the template as follows:
<form method="POST" class="locklist-form" id="locklist-form">{% csrf_token %}
{{ form.field }}
</form>
At this step, I expect the select-option elements to be added to HTML page (as hidden), so that I can reach to element options and modify them with javascript. However, it doesn't add anything to the HTML page.
I use this approach with other type of form fieds. For a TextField HTML page have a hidden element as shown:
Why doesn't it work with ModelMultipleChoiceField? How can I modify the choices of this field with Javascript?
Edit:
MultipleHiddenInput renders only if with initial data is a similar question. But applying it doesn't lead to the expected solution. In this question, it is expected to render the following as hidden:
But following the MultipleHiddenInput renders only if with initial data, when I modify the form constructor as:
form = MyForm(initial={'field':MyModel.objects.all()})
Rendered element is as follows:
It maybe useful, but not exactly the expected one. I need to mark a few options as selected, among a list of objects.
I have done it using Javascript, instead of depending on Django's capabilities. I add the form with ModelMultipleChoiceField directly to the template (not hidden). Then I run a Javascript script, when the page is loaded:
var field = document.getElementById('id_field');
selecter.setAttribute('class', 'hidden');
CSS definition of hidden class is as follows:
.hidden{
display: none;
}
This gets me to the desired situation. ModelMultipleChoiceField is rendered hidden as follows:
At this point, I can modify certain items through Javascript:
document.getElementById('id_field').options[index].selected = boolValue;
I'm trying to create a carousel and I want it to be configurable from the Experience Editor. By configurable I meant that it's possible to edit the image, text AND add/or remove slides.
The first time I create the carousel I can add/remove slides but no after saving it and opening it again, after rendering the carousel I can't remove just one slide because they all are part of the same placeholder (I can continue adding new slides and removing the new ones but not the old ones).
I have Carousel.cshtml and CarouselSlide.cshtml and the code look like:
Carousel.cshtml
<div class="carousel">
#foreach (Item slide in Model.Item.Children)
{
#Html.Action("CarouselSlide", "MediaFeature", new { model = slide });
}
#Html.Sitecore().DynamicPlaceholder("slides")
</div>
CarouselSlide.cshtml
<div class="carousel-slide">
<div class="carousel-slide-content">
#Html.Sitecore().BeginField(....)
<div class="background-image">
.....
</div>
<div class="text-container">
....
</div>
#Html.Sitecore().EndField()
</div>
</div>
So far, the issue looks like is related with the placeholders. Any ideas about how to render DynamicPlaceholders?
EDIT
"slides" placeholder is configured to allow only CarouselSlide components
Remove the foreach loop. It is unnecessary. When Sitecore renders the placeholder it renders the previously added slides for you. When in edit mode, it also renders the container that allows you to add additional components.
Using a dynamic placeholder as you have will allow you to have multiple Carousel components on a page. Or more precisely, multiple components containing a placeholder with the key "slides". It is most likely not causing the problems you are seeing with your slides.
Update - additional info requested by OP
It looks like what you have done is mix two different styles of development. In one, you are explicitly rendering the children of the carousel item as slides. In the second you are relying on Sitecore's presentation engine to dynamically render components into a placeholder that could be using data sources from somewhere else in the tree. You need to pick one or the other, but the second approach is generally preferred.
To use the second approach, you would simply remove the foreach loop so that your Carousel view looks like this:
<div class="carousel">
#Html.Sitecore().DynamicPlaceholder("slides")
</div>
If you decide to go with the first approach, you would remove the placeholder and then add Custom Experience Buttons to allow you to insert and sort child items under your carousel item.
With either approach, you may find that page editor does not play all that well with your Carousel javascript. The most common workaround to this problem is to render the carousel as a flat list in page editor mode.
One sublayout (.ascx) is using datasource from its template standard value.
Whenever I enable the cacheable setting with varyByData and varyByParm, I can't get all field values in __Standard Value of its template.
I checked cache.aspx page and it shows:
**web[standardValues]________0________0________0________10MB<br />
MaxSize is 10MB, but zero Count, zero Size and zero Delta information.**
Any ideas of how to solve this?
=============Update=============
I have fields in a template for CSS class names, such as h1, ul class, etc ... and all names initially set in its "__Standard Values".
Then, I have an item which calls the template's standard values as data-source.
This is another my post and it will help you more.
Sitecore Cache Issue
Could I know what the problem is?
=============Update 2=============
Current .cs file to get field values.
<asp:View ID="viewNormalMode" runat="server">
<nav class='<% Response.Write(myDataSourceItem.Fields["Nav Bar Class"]); %>'>
<h1 class='<% Response.Write(myDataSourceItem.Fields["Label h1 Class"]); %>'>
<i class='<% Response.Write(myDataSourceItem.Fields["Label i Class"]); %>'></i>
<% Response.Write(myDataSourceItem.Fields["Nav Bar Label"]); %>
</h1>
<ul class='<% Response.Write(myDataSourceItem.Fields["ul Class"]); %>'>
<asp:Literal ID="linkObjects" runat="server"></asp:Literal>
</ul>
</nav>
</asp:View>
Hope I understand correctly.
How Sitecore Cache work on sublayouts: Let take a main navigation (as sublayout) when you enable the cacheable setting global or from page to page you will get this result:
How your navigation looked at first page access after AppPool restart or application DLL update will look the same way on all other pages having cache on sublayout (even if you use another data source or something else, the code is cached/not executed).
But I think you have another bigger problem, move your fields for selection from Presentation Sublayouts on Data Template (Items) you will have huge problems on Locales. Beside you can add from code your classes as this:
You know your Layout, case you are in it, and you know you Context Item or your page definition Item, base on template name (Context.Item.TemplateName == "Article") put your CSS classes
When I render a form, it generates something like this for each Field:
<div class="field_content">
<label>...</label>
<div class="field">...</class>
</div>
I would like to be able to uniquely identify each Field in my stylesheet. Is there a way to add another class to the outer div (in addition to field_content), or an outer div (parent to field_content)?
If it's enough to set the class of the field you can specify it as an attribute of your widget:
name = forms.CharField(widget=forms.TextInput(attrs={'class':'special'}))
If you need more control it's probably best to render your form manually or if you don't mind relying on an external app there are even more flexible solutions:
In django-floppyforms you could use form layouts and in django-crispy-forms you could use layout objects and to achieve what you want.