I am using a Kendo UI DatePicker control in our application, I would like to remove the styles applied to the input that triggers the datepicker to show.
When I initialize my datepicker like this:
$('.datepicker').kendoDatePicker();
The .datepicker element which is an input type='text' is wrapped by some elements so that the small calendar icon will appear.
<span class="k-widget k-datepicker k-header form__field box__filterlight__field datepicker">
<span class="k-picker-wrap k-state-default">
<input placeholder="from" class="form__field box__filterlight__field datepicker k-input" data-role="datepicker" type="text" role="combobox" aria-expanded="false" aria-disabled="false" aria-readonly="false" style="width: 100%;" aria-activedescendant="8beab73f-332b-45a7-8f0b-4a6c3faafcd6_cell_selected">
<span unselectable="on" class="k-select" role="button">
<span unselectable="on" class="k-icon k-i-calendar">select</span>
</span>
</span>
</span>
But I would like to have full control on it and just have the styles for the calendar. Ideally disable the wrapping Kendo UI does so the markup would stay like:
<input placeholder="from" class="form__field box__filterlight__field datepicker k-input" data-role="datepicker" type="text" role="combobox" aria-expanded="false" aria-disabled="false" aria-readonly="false" style="width: 100%;" aria-activedescendant="8beab73f-332b-45a7-8f0b-4a6c3faafcd6_cell_selected">
Is there a way to do that? I looked at the documentation and it does not seem to have a way to disable the wrapping.
What you could do us use jQuery, Javascript or other library to target the inner elements and just hide them from the DOM or remove them from the DOM on document ready or window load.
I would wrap your date picker control in a DIV, give that and ID and then using jQuery, target all the sub items and remove them from the DOM.
You can do 2 things, you can remove the icon elements and you can use the jQuery .unwrap() method to unwrap or remove the parent element.
I made a JSFiddle that might get you started. You can look at the output frame's elements in the browser element inspector to see the elements being removed.
https://jsfiddle.net/Ls6xv9yw/
$(function(){
$('#myCalendar').find('.k-select').remove(); //Will remove the k-select element containing the icon.
$('#myCalendar').find('.datepicker').unwrap();//Unwrap .datepicker input from it's immediate parent if you want this.
});
There might be unintended circumstances by removing these because of the way the datepicker works, but this should work, or at least get you a path to work with.
Related
I am using 3rd party multi select dropdown. If you heard of select2 you get idea. Multi Select dropdown is creating through JQuery called select2.min.js and dropdown width is auto calculating. How to apply static with on it because js applied css are the highest prior as per my knowledge.
Following the JQuery generated code
<span class="select2 select2-container select2-container--default select2-container--focus" dir="ltr" data-select2-id="1" style="width: 323px;"><span class="selection"><span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1" aria-disabled="false">
<ul class="select2-selection__rendered">
<li class="select2-search select2-search--inline"><input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="searchbox" aria-autocomplete="list" placeholder="" style="width: 0.75em;"></li>
</ul>
</span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
Use the !important attribute to your CSS.
there are several ways how to delcare CSS and each of them has its own priority. In your case simple adding !important into css class could fix it. However if you wish to change the value in future you may struggle.
You can try to change the css value with Jquery .css() function, see if it helps.
If not you can try to write more specific selecotr in css, which has higher tier of priority than the default one from the library.
The template is pretty simple, a checkbox component and string of text nested inside a label element:
<label class="statusList-label">
{{list-checkbox
value=object.id
sourceList=item.objectIds
class=""}}
{{object.name}}
</label>
The checkbox template nested inside looks like this:
<span>
<input type="checkbox" class="u-display-none">
<i class="fa fa-fw fa-lg {{if checked 'fa-check-square' 'fa-square-
o'}}
fa-checkbox {{if disabled 'disabled'}}" unselectable="on">
</i>
</span>
Now, the expected behaviour is that clicking on anything nested inside the <label> tag should toggle the <input> inside. However, clicking on the object.name that gets outputted to the DOM does not work - only clicking on items inside the <span> works. Any help is appreciated.
EDIT: Here is the HTML output:
<div class="item">
<label class="itemLabel">
<span unselectable="on" id="ember1173" class="cell cell--checkbox ember-view">
<input type="checkbox" class="u-display-none">
<i unselectable="on" class="fa fa-fw fa-lg fa-check-square fa-checkbox "></i>
<!---->
</span>
Some Text Here
</label>
</div>
EDIT 2: Figured it out.. there was preventDefault on the parent component to handle click events for some other behaviour. Just had to remove that..
Figured it out.. there was preventDefault() on the parent component to handle click events for some other behaviour. Just had to remove that..
I have a dropdown menu scrollable with options. I also have on top of that a search-box (example "CAR"). Now the search-box makes part of the scrollable menu, so when you scroll down the search box goes away. I need the search box to stay fixed on top of the scrollable menu. So basically I have to move the search box "out" of the scrollable-menu section. The problem is in my javascript code (my html is fine, thats for sure) but I cannot find it, is it possible to achieve my goal?
My BOOTPLY... [BOOTPLY][1]
Simply change your HTML like this:
<div class="dropdown-menu brand">
<div style="position: relative;">
<input class="Car" placeholder="Car" type="text">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<div class="checkbox">
<label><input value="" type="checkbox"> Alpha</label>
</div>
I moved <input class="Car" placeholder="Car" type="text"> above your scrollable-menu div, it was your HTML after all.
You should also change the variable targetinput like this:
var targetinput = currentgroup.find('.Car > input[type="text"]');
It should select your textbox propperly now, this is because you tried to find a textbox within the class scrolllable menu, however we moved the textbox outside of it.
I have created a simple jQuery toggle function which adds and removes the class formVisablethe toggle function is adding the class how in the wrong place CLICK HERE.
I want to add the class to the following element <div id="hide-overlay"> however at the moment the class is being added to my button element <a id="show-form">. Below is a snippet of my code
HTML
<div class="row promo-image responsive">
<figure>
<figcaption class="caption">
<a id="show-form" class="promo-button" href="#">
<span>Be More Productive</span>
<i class="fa fa-download"></i>
</a>
<h4>Download the 8 steps for successful collabration</h4>
</figcaption>
</figure>
</div>
HIDDEN ELEMENT
<div id="hide-overlay">
<a id="hide-form-close" href=""><i class="fa fa-times fa-2x"></i></a>
<div class="col-sm-6 col-sm-offset-3 form-container">
<h2 class="business">Register</h2>
<form class="main-contact submit-fade ajax-form" action="process.php" method="POST">
<ul class="small-block-grid-2 medium-block-grid-2 hide-form">
<li>
<label for="name">Name</label>
<input type="text" class="form-control" name="name" placeholder="Name" required>
</li>
<li>
<label for="email">Email</label>
<input type="text" class="form-control" name="email" placeholder="Email">
</li>
</ul>
<input type="submit" class="btn btn-success">
</form>
</div>
</div>
JQUERY
var $hideOverlay = $("#hideOverlay").hide();
$("#show-form").on("click", function(e){
$(this).toggleClass("formVisable");
});
It's because you are using this which represents the object that is calling the function, in this case #show-form. You should use $('#hide-overlay').toggleClass("formVisible");
Here's the fiddle for it: http://jsfiddle.net/norg5k2o/4/
"This" represents the object that an action is being applied to. In this case, it's your button. You want the class to be applied to your overlay, rather than to the button. Therefore, try this:
Also, you had some spelling errors.
$("#hide-overlay").hide()
$("#show-form").on("click", function(e){
$("#hide-overlay").toggleClass("formVisible");
});
WORKING DEMO HERE
You did not properlay declare the variable. You had $(#hideOverlay) when your HTML id attribute was actually id='hide-overlay'. As such, I have re-written the jQuery to properly target and hide the form as was your original intent. I also, disabled the link so that it will only do the show/hide function and not the go to href='#' action.
As the other answers suggest, when using the $(this) selector in jQuery, it will target the parent selector of the current iteration of the function.
I also updated your CSS as it was hiding the form.
View working example
var $hideOverlay = $("div#hide-overlay");
$hideOverlay.toggle();
$hideOverlay.css("border", "solid 1px black");
$("a#show-form").on("click", function(e){
e.preventDefault();
$hideOverlay.slideToggle(300);
});
The $(this) inside a JQuery event handler is the DOM element that has the handler attached. If we attached the handler to something else, like the containing <div>, we will get the DIV DOM element doesn't matter which inside elements of the DIV we clicked.
So, in this case you would need something like this, since $("#hideOverlay") is already cached, the correct way to do it is:
var $hideOverlay = $("#hideOverlay").hide();
$("#show-form").click(function(e){
$hideOverlay.toggleClass("formVisible");
//Prevent default behavior for links and buttons
e.preventDefault();
});
I have a css rendered menu (ul li...etc), what beneath is a stack of dijit component rendered by dojo. The problem is showing in the image below, which only happens on IE7, but works fine on IE8/9, firefox and chrome.
The layout of the dijit components(border, style) are all under the menu, but only user entered text is on TOP OF EVERYTHING.
I heard about window object is always on top of every windowless components, that would may sense that the is on top of ui..li menu, however, for testing purpose I create a plain object and its text is under the menu! I am very confused now.
Here are the codes for dijitTextInput and plain text input:
Dijit text input:
<div id="widget__personName_id" class="dijit dijitReset dijitInlineTable dijitLeft dijitTextBox dijitValidationTextBox" role="presentation" widgetid="_personName_id">
<div class="dijitReset dijitValidationContainer">
<input class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner" type="text" role="presentation" readonly="readonly" tabindex="-1" value="Χ">
</div>
<div class="dijitReset dijitInputField dijitInputContainer">
<input id="_personName_id" class="dijitReset dijitInputInner" type="text" name="personName" autocomplete="off" dojoattachpoint="textbox,focusNode" maxlength="255" tabindex="0" aria-required="false" aria-invalid="false" value="">
</div>
</div>
Here is the plain input
<input name="personName" size="50">
So could anyone give a hint, about where can I start to find a clue to make text on dijit input box under the menu?
Here is the hint as requested:
This is the matter of z-index in css codes.
Higher the z-index means that it is above those who have lower z-index value.
Z-index must exist with 'position' value (position absolute or relative)