I have a Kendo DropDownList on an Angular MVC project. Chrome (Version 40.0.2214.111 m) and IE10 renders it as 2 elements side-by-side. This issue remains with all Kendo elements with 2 HTML elements, such as NumericTextBoxs. Is this a bug? Is there a fix for it?
This is how the HTML looks:
This is how I declare the drop down list
<div class="col-md-3">
<h4>Name: </h4>
<select kendo-drop-down-list style="width: 200px">
<option>Name 1</option>
<option>Name 2</option>
<option>Name 3</option>
<option>Name 4</option>
</select>
</div>
Just inspect element by browser and see affected css rules to your page elements. You may wanna change some of them to work with each other.
Related
I'm trying to group a selectbox and textbox side by side by side using jquery mobile. They are currently displaying below each other. I've tried control group within jquery, but to no avail.
I want to do something like this http://demos.jquerymobile.com/1.3.2/widgets/forms/form-fieldcontain.html though with a select and drop, where this example shows a label and text box side by side.
Here is my current code. Any help appreciated.
<label style="margin-top:30px;background: #ffffff;">Mobile Number:</label>
<select name="mobilePrefix" id="mobilePrefix">
<option value="">Mobile Prefix</option>
<option value="082">082</option>
<option value="083">083</option>
<option value="085">085</option>
</select>
<input class="required" name="mobileno" id="mobileno" value="" data-clear-btn="true" type="tel"/>
I know there are placeholders for selects in jQuery Mobile.
<select id="salutation" data-native-menu="false">
<option id="salPlac" data-placeholder="true" value="">Salutation</option>
<option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
<option value="Dr.">Dr.</option>
<option value="Prof.">Prof.</option>
</select>
But are there similar placeholders for textareas and inputs when using jQuery Mobile?
Like this: (doesnt work)
<textarea type="input" class="regular" id="textBox" data-placeholder="true">Type in here</textarea>
I know they are available in HTML5, but I want to use jQuery Mobile if it's possible.
Thanks.
There is no attribute called "data-placeholder" available for text box and text area in jquery mobile. So you need to use the HTML5 placeholder attribute suggested by Omar.
Here is the link http://view.jquerymobile.com/1.3.1/dist/demos/#ui-page-top
I am using JQuery Mobile for a mobile website, and for localization I am using i18next. I have an issue in my form, here it is :
<form id="form" method="POST" action="webservices/action.php">
<select id="subject">
<option value='0' data-i18n="contact.email" selected></option>
<option value='1' data-i18n="contact.name"></option>
<option value='2' data-i18n="contact.object"></option>
</select>
</form>
The localization works fine, I have the desired text displayed. However, the first option is not displayed and it is not possible to select it (it is possible to select other options). When looking at the select object in Javascript, it seems that the correct index is selected., therfore it is a UI problem.
I don't have any problem when not using i18next.
Anyone have an idea how to fix this issue ?
I found a workaround. I noticed that when I sent my form and reset it, the dropdown list was correclty displayed. So after initializing i18n, I used this:
document.getElementById("form").reset();
The form is now displayed correctly.
I'm using jQuery mobile and Knockout JS (latest versions of both).
I cannot seem to style a horizontal list after knockout updates the dom.
<h2>Dynamic</h2>
<div id="dynamicControlgroup" data-role="controlgroup" data-type="horizontal" data-mini="true" data-bind="foreach: Labels">
</div>
<h2>Static</h2>
<div id="staticControlgroup" data-role="controlgroup" data-type="horizontal" data-mini="true">
3G
SD
HD
HD+
/div>
The "Static" looks good, but the "dynamic" is not styled by jQuery mobile. I've tried several methods of trying to make this work, and I am missing something... after knockout runs, I do:
$("#dynamicControlgroup").trigger("create")
$("#dynamicControlgroup").children('a').buttonMarkup({ inline: true,mini: true,corners: true, type: "horizontal"});
But here is what it looks like:
Thoughts?
After appending new items, use the below code.
$('[data-role="controlgroup"]').controlgroup().trigger('create');
Note: Creating completely new controlgroup doesn't get enhanced corners dynamically. However, appending new items into existing controlgroup corners get enhanced. This problem can be solved by adding ui-first-child and ui-last-child classes.
$('[data-role="controlgroup"] a').first().addClass('ui-first-child');
$('[data-role="controlgroup"] a').last().addClass('ui-last-child');
Demo
Turns out with Knockout you need to remove the controlgroup from the div so you dont get the "empty wrapper". So the dynamic code looks like:
<h2>Dynamic</h2>
<div id="dynamicControlgroup" data-type="horizontal" data-mini="true" data-bind="foreach: Labels">
</div>
and then on page load, you can call
$('#dynamicControlgroup').controlgroup().trigger('create');
$('#dynamicControlgroup a').first().addClass('ui-first-child');
$('#dynamicControlgroup a').last().addClass('ui-last-child');
and this works. Thanks to Omar for the help on the first/last rounded classes tip!
Is it possible to create a dropdown box in ASP.NET MVC, that has a checkbox alongside each item in the dropdown list?
I know it sounds simple, in webforms or using telerik this would be pretty simple, but I can't figure how I can implement the same thing in basic HTML.
Thanks
You can use a jQuery plugin called DropDownCheckList to get the wanted effect of a dropdownlist with multiselect options.
Its pretty easy, all you need to do is to create a html listbox and call the jQuery plugion to extend the listbox.
<script type="text/javascript">
$(document).ready(function() {
$("#listbox").dropdownchecklist();
}
</script>
<select id="listbox" multiple="multiple">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
http://dropdown-check-list.googlecode.com/svn/trunk/doc/dropdownchecklist.html
a dropdown with each element of the dropdown having a checkbox? that's not a standard element of HTML, why would you even need that? a multiple option is what you need:
http://www.htmlcodetutorial.com/forms/_SELECT_MULTIPLE.html (first one)