Develop Reference

prevent tabbing on the icon when filling some input-fields in blazor

I'm working on a project where you can insert your working hours, in which you have to insert start- & end times. But after you put in the start time and tab to go on, it does focus first on the icon, which comes from the
<input type="time">
I want that the tabbing only hits the input area, not the icon next to it.
This is the current state:
example input field:
<div class="text-section">
<label for="startTime"
class="text label without-margin">#((MarkupString)loc["StartTime"].ToString())</label>
<div class="property-container-three">
<div class="property-icon">
<div class="icon solid start" tabIndex="-2">#Icons.Startzeit</div>
</div>
<input class="input-text nomargin centerInputContentVertical"
type="time"
id="startTime"
#ref="startTimeElement"
#bind-value="blazorStartTime"
#onblur="HandleStartTimeSet">
</div>
</div>
I already tried everything with tabindex:"-1", it just makes no difference. Also I'm just able to modify this icon due css, which goes like:
input[type="text"], input[type="date"], input[type="number"], input[type="search"], input[type="time"], input[type="datetime"], input[type="password"], [type="email"], select, textarea {
padding: 8px 12px;
height: 38px;
width: 100%;
}
I do not have any more ideas or approaches...

After some googling I found, it is a known issue with Edge... see this answer, it states that Microsoft do not plan to fix it; but the link they mention is dead.
I can only replicate this bug on Edge. And it seems MS won't solve it...
You can target it with CSS: idea from here
input[type="time"]::-webkit-calendar-picker-indicator` {
display: none:
}
Perhaps setting display: none will be enough and maybe adjusting padding/margin for it too?
Unfortunately, there is currently no stable CSS way to change the tab-index; and currently no way to change the HTML attributes.
The current CSS equivalent for tab-index is -moz-user-focus but this is non-standard and the documentation stresses that you "should not use this".
Similar things exist for grabbing the pseudo element with JavaScript like this question, but again this is for computedStyles which is back to the CSS issue again.
Maybe in future this sort of feature will be introduced and there will be a working answer for it....

Angular ng-hide/ng-show directives not working

I have an issue which presents on an Android 4.x device, but not on a newer device. I have no idea why, but I'm hoping someone can help.
I have a list using ng-repeat. Each item uses ng-include to load a template dynamically (this is a generic, reusable dialog).
<ons-list-item ng-repeat="item in items | filter:filterItems(searchTerm) as filtered" ng-click="options.selectItem(item)" style="font-size: 14px; padding: 0;" tappable>
<div class="left" style="width: 100%;">
<ng-include src="'app/dialog/smartpick/'+options.itemTemplate" style="width: 100%; padding: 0px 16px;"></ng-include>
</div>
</ons-list-item>
The template currently causing me issues contains a button like this:
<ons-button ng-click="openDocument(item, $event)" ng-if="item.SpecificationSpecDocumentID" style="float: right;font-size: 20px !important; padding: 0px 10px;">
<ons-icon icon="ion-image" ng-hide="item.opening" style="vertical-align: middle;"></ons-icon>
<ons-icon icon="ion-load-b" ng-show="item.opening" class="spin" style="vertical-align: middle;"></ons-icon>
</ons-button>
Debug: {{ item.opening }}
When openDocument is called, it does this (among other things):
if(item.opening) return;
item.opening = true;
When the list is rendered, both of the <ons-icon> elements are shown; the ng-show/ng-hide directives do not seem to do anything. The debug text under the button shows true or false respectively, but no class or style is added to the icon elements. (I also tried isolating the problem by moving the directives to wrapper <span> elements, but it didn't have any effect.)
As I said before, this work fine on a newer device. Any clues as to what may cause directives to fail or be ignored on older devices?
EDIT
It certainly has something to do with the child scope created inside the <ons-button> element, because the directives work outside of that scope. I just don't know why it would work in newer webviews but not the older one.

I still don't know what the browser version had to do with it, but it seems the problem was a consequence of using ng-if in my templates. When I changed those into ng-show, the problem disappeared.

Telling angular to pickup a dynamically added directive

I am creating a bootstrap popover and I'm trying to use a directive in the content of the popover.
I use the following HTML:
<div data-animation="false"
data-template='<div style="width: 400px; max-width: 400px; height: 400px; max-height: 400px;" class="popover some-custom-classes" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
data-html='true'
data-placement='right'
data-original-title='My title'
data-content='<b>TEST</b> <my-directive></my-directive> TEST'
data-trigger='manual'
data-container=".modal-dialog">
Some Content
</div>
Whenever a hover over the DIV happens, somewhere in code I do:
$element.popover("show");
This does launch a popover with the contents:
"TEST TEST"
However, the directive is not shown. It is not picked up by angular and thus the browser ignores it because it doesn't know the "my-directive" element. I think Angular doesn't pick it up because the directive is added to the DOM dynamically (independ from angular) using jquery by bootstrap's popover implementation.
The question:
Is there a way to manually tell angular to "parse" the directive?
PS. I think in the newer versions of ui-bootstrap you can specify an angular template, but unfortunately I can't use ui-bootstrap (except the ancient version 0.10.0 which seems not to work for me with popovers).

django-cms div tags with cmsplugin class interfering with slider

I am using Django CMS 3.0.3. I've written a cms plugin with 2 CMSPluginBase derived classes, one adds a slider to a placeholder and another one is for adding slides as children to the slider.
In live mode everything works fine, but when I am editing content, I can't use the slider. The reason is that django-cms is decorating the html code with additional elements like this:
<div class="slider">
<div class="cms_plugin cms_plugin-2" style="width: 0px; overflow: hidden; position: absolute; left: 0px; display: block;">
<!-- Slider Item -->
<div class="slider-item"> [MY SLIDER CONTENT] </div>
<!-- /Slider Item -->
</div>
</div>
I got the HTML/CSS/JS from somebody else and I would preferable not use another slider. What options do I have to work around this problem?
Is there a way in django-cms to switch off the wrapping of plugins in "content mode" only, but to have the placeholder <div> included in "structure mode"? That would not be super convenient, but a workaround that I can live with.
Is there something else, I could do? I don't want to touch the slider itself. It might get an update and then I'd have to adjust it to adjust the slider to my needs again.

django-cms is need to wrap your plugin with <div class="cms_plugin cms_plugin-2"> for relation with "structure mode". There are no other variants.

Effect.SlideDown (Scriptaculous) broken in IE7

Recently, I've been trying to work with Prototype & Scriptaculous to have a rather simple SlideDown & ScrollTo effects to fill out a form for their application. It works fine in FF3, FF4, Chrome, Safari, Opera, IE9, and IE8. I knew IE6 would be an issue, but I thought I could get IE7 to work with a couple slight modifications.
The fix of setting the width of the div did not fix the issue.
Currently, it is not working in IE7 and I'm at a loss for why. I'm not a ninja at JavaScript and would appreciate any help given.
XHTML Structure:
<div id="scrollPoint"></div>
<div id="slideForm" style="display:none;">
<div style="position: relative">
<div class="separator" style="padding:5px 0"></div>
<h3 class="fhgroupblue">Apply for this Position:</h3>
<ucl:ApplicationForm id="WebUserForm" runat="server" />
</div>
</div>
Javascript:
<script type="text/javascript">
function hideDetails() {
if ($('showFormLink').style.visibility != "hidden") {
$('showFormLink').style.visibility = 'hidden'; Effect.SlideDown($('slideForm'));
}
Effect.ScrollTo('scrollPoint'); return false;
}
</script>
Trigger:
<div style="text-align:center;">
<a id="showFormLink" onclick="hideDetails();">Apply!</a>
</div>
CSS:
#jobDetails #slideForm {
padding-right: 10px;
width: 400px;}

Figured this out -- Posting solution for possible other troubled users.
For those that are using SiteCore, don't forget to add:if(!Prototype) to the top of your included Prototype.js file.
This is due to SiteCore rolling in it's own Prototype library with the Web Forms for Marketers.
Here's what we did:
Added if(!Prototype) to the top of
our included Prototype.js file
In /sitecore/shell/controls/lib/{/prototype, /Scriptaculous}, updated the JavaScript libraries to their newest versions.
Magic happened and everything is back to working in IE6 & 7 the way that it was supposed to.