I was wondering if it is possible to display an icon on an element that is not <a> or <button>. Say a <p> or an <h2> element for instance.
If you are looking to use the icons inline within the text of a <p /> element for example, you can try this:
<span class="ui-nodisc-icon ui-alt-icon nonbuttonicon" >
<span class="ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-inline"></span>
</span>
.nonbuttonicon .ui-btn {
cursor: default;
border: 0;
margin: 0;
}
By using spans, you can insert any number of icons in any position within the paragraph.
Here is a DEMO
I think you can.
Demo JsFiddle
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-action">action</button>
<p class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-action">p</p>
<h2 class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-action">h2</h2>
Related
I'd like to add more space/padding between options in my select tag. I am able to change the height of the select tag but not the height of option tag. Below is what I've tried so far with no success:
options, .form-select, .form-control, #menu.form-select, #menu.form-control {
padding: 10px;
padding-top: 10px
line-height: 2.0;
margin: 10px;
margin-top:10px;
}
Below is the element I mentioned above.
<select id="menu" class="orm-select" data-size="5" aria-label="Quick navigation">
<option value ="select" selected style="display:none">Select</option>
<option value ="#test">test</option>
<option value ="#test2">test2</option>
</select>
My main goal is to add padding between each option. How can I do something like that?
This is not possible (read more about it here).
Custom <select> menus need only a custom class, .form-select to trigger the custom styles. Custom styles are limited to the <select>’s initial appearance and cannot modify the <option>s due to browser limitations.
Use Bootstrap's dropdown instead.
See the snippet below.
a.custom-dropdown {
padding: 15px 40px !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<h3>Default dropdown:</h3>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<br>
<h3>Customized dropdown:</h3>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item custom-dropdown" href="#">Action</a></li>
<li><a class="dropdown-item custom-dropdown" href="#">Another action</a></li>
<li><a class="dropdown-item custom-dropdown" href="#">Something else here</a></li>
</ul>
</div>
I have a JQuery Mobile popup (an unordered list) embedded in a description list:
<dl data-role="listview" data-inset="true" data-theme="d" id="sortable">
<dt class="ui-bar ui-bar-b ui-corner-all">Group One</dt>
<dd class="ui-bar ui-bar-a ui-corner-all ui-btn-icon-left ui-icon-bars">
<div class="divMain">
<div class="divQuestion">
<textarea name="strQuestion-q1" id="strQuestion-q1" placeholder="Enter Question Number 1" style="margin:0px;"></textarea>
</div>
<div class="divCategory">
<a class="ui-btn ui-corner-all ui-shadow ui-btn-inline" href="#popupMenu-q1" data-rel="popup" data-transition="slideup">Select Category</a>
<div id="popupMenu-q1" data-role="popup" data-theme="b">
<ul style="min-width: 210px;" data-role="listview" data-inset="true">
<li data-role="list-divider">Choose the scoring category</li>
<li><a name="strCategory-o1-q1" href="javascript:void(0);" onclick="selectCategory(this);">Category 1</a></li>
<li><a name="strCategory-o2-q1" href="javascript:void(0);" onclick="selectCategory(this);">Category 2</a></li>
<li><a name="strCategory-o3-q1" href="javascript:void(0);" onclick="selectCategory(this);">Category 3</a></li>
</ul>
</div>
</div>
</div>
</dd>
</dl>
I want the function selectCategory() to get the text of the parent dt (in this case "Group One"). I've tried both of the following with no success:
$('#strCategory-o1-q1').parent().prev('dt').text();
$('#strCategory-o1-q1').closest('dd').prev('dt').text();
Any suggestions?
The problem is that when jQM initializes the popup, it moves it from the current DOM position into a popup container at the top level. So the DD is no longer its ancestor.
One thing you could do is add a click handler to the button that launches the popup and get the text there. Then you could put the text in a global variable or a data-attribute within the popup.
Given this markup:
<a id="btnPopup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" href="#popupMenu-q1" data-rel="popup" data-transition="slideup">Select Category</a>
<div id="popupMenu-q1" data-role="popup" data-theme="b">
<ul style="min-width: 210px;" data-role="listview" data-inset="true">
<li data-role="list-divider">Choose the scoring category</li>
<li><a name="strCategory-o1-q1" href="#">Category 1</a></li>
<li><a name="strCategory-o2-q1" href="#">Category 2</a></li>
<li><a name="strCategory-o3-q1" href="#">Category 3</a></li>
</ul>
</div>
Your script would be along the lines of
var curDDText;
$("#btnPopup").on("click", function(){
curDDText = $(this).closest('dd').prev('dt').text();
});
$("#popupMenu-q1 ul li a").on("click", function(e){
selectCategory(this);
});
function selectCategory(elem){
alert($(elem).prop("name") + " - " + curDDText);
$("#popupMenu-q1").popup( "close" );
}
working DEMO
If you prefer the data-attribute route:
$("#btnPopup").on("click", function(){
var curDDText = $(this).closest('dd').prev('dt').text();
$("#popupMenu-q1 ul").jqmData("dttext", curDDText);
});
function selectCategory(elem){
var curDDText = $(elem).closest("ul").jqmData("dttext");
alert($(elem).prop("name") + " - " + curDDText);
$("#popupMenu-q1").popup( "close" );
}
data-attribute DEMO
I'm having trouble with the display of my webpage. I used a unordered list with item inside. But after the unordered list is added by items resulted from javascript code, they appear in wrong way and don't follow the css rule of the unordered list
Plus, I'm using jquery mobile 1.4.2 css and js
this is the html code :
<div id="all" class="ui-body-d ui-content">
<ul id="allList" data-role="listview" >
<li>1Data Mining</li>
<li>1Ethics</li>
<li>1HCI</li>
<li>1Mobile Dev</li>
<li>1Software Testing</li>
</ul>
</div>
And this is the javascript code that insert new item into list
function getDeadlines_success(tx, results){
var len = results.rows.length;
//var s = "";
for (var i=0; i<len; i++){
var deadline = results.rows.item(i);
$('#allList').append('<li>1Software Testing</li>');
}
;}
Here's a jsfiddle with your code: http://jsfiddle.net/ruslans/dKy3B/
Edit: alternative solution (as per suggestions from many):
$("button#btn").click(function () {
$('#allList').append('<li>1Software Testing</li>');
$("#allList").listview('refresh');
});
http://jsfiddle.net/ruslans/tUJt5/
the mark-up you've pasted is not the mark-up it generates after rendering, it's actually a lot messier than that:
<div id="all" class="ui-body-d ui-content">
<ul id="allList" data-role="listview" class=" ui-listview">
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-first-child ui-btn-hover-d ui-btn-up-d"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">1Data Mining</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-d"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">1Ethics</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn ui-btn-up-d ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">1HCI</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn ui-btn-up-d ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">1Mobile Dev</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn ui-btn-up-d ui-btn-icon-right ui-li-has-arrow ui-li ui-last-child"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">1Software Testing</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div></li>
</ul>
</div>
to add an item to this list and keep the styling, you'll have to do some thing like this as per this answer Dynamically adding <li/> to <ul/> in jquery mobile:
$('ul').append($('<li/>', { //here appending `<li>`
'data-role': "list-divider"
}).append($('<a/>', { //here appending `<a>` into `<li>`
'href': 'test.html',
'data-transition': 'slide',
'text': 'hello'
})));
$('ul').listview('refresh');
Please use Google or the stackoverflow search function next time.
The first hit for me: https://stackoverflow.com/a/5926112/994304
$('ul').append($('<li/>', { //here appending `<li>`
'data-role': "list-divider"
}).append($('<a/>', { //here appending `<a>` into `<li>`
'href': 'test.html',
'data-transition': 'slide',
'text': 'hello'
})));
$('ul').listview('refresh');
The last line (refresh) is very important for jQuery Mobile to layout the UI controls again.
I'm not sure it's needed for all jQuery controls but i'm sure for this one :).
Stefan.
Try refresh the listview
$("#all").listview('refresh');
I am creating an editor application which requires dynamically appending HTML into the document. I am using JQuery UI tabs to divide the document into sections. I want to be able to dynamically add tabs and then use append() to add content into the tabs.
The page has 3 tabs when it loads and I want to be able to dynamically add more when required.
Currently my code works when appending content into the 3 non-dynamic tabs, and when creating a new tab. For some reason I cannot append any content into a new, dynamically created tab.
Why won't my code work for adding content to a dynamically created tab?
$(function () {
$('#addTab').click(function () {
var num_tabs = $('div#tabs ul li.tab').length + 1;
$('div#tabs ul').append(
'<li class="tab">Section ' + num_tabs + '</li>');
$('div#tabs').append(
'<div id="tab-' + num_tabs + '></div>');
$('#tabs').tabs("refresh");
$('#tabs').tabs("option", "active", -1); //makes the new tab active
});
});
//Insert content into the currently selected tab
function insertContent(content) {
var activeTab = $("#tabs").tabs('option', 'active');
activeTab += 1;
console.log(activeTab);
$("#tab-" + activeTab).append(content);
}
HTML after creating a 4th tab:
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
<li class="tab ui-state-default ui-corner-top" role="tab" tabindex="0" aria-controls="tab-1" aria-labelledby="ui-id-1" aria-selected="false">Section 1</li>
<li class="tab ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-2" aria-labelledby="ui-id-2" aria-selected="false">Section 2</li>
<li class="tab ui-state-default ui-corner-top" role="tab" tabindex="0" aria-controls="tab-3" aria-labelledby="ui-id-3" aria-selected="false">Section 3</li>
<li class="tab ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tab4" aria-labelledby="ui-id-7" aria-selected="true">Section 4</li></ul>
<div id="tab-1" aria-labelledby="ui-id-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;">Section Title:<input class="sectionTitle"><br><p contenteditable="true" class="cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" tabindex="0" spellcheck="false" role="textbox" aria-label="Rich Text Editor, editor1" title="Rich Text Editor, editor1" aria-describedby="cke_83" style="position: relative;">Paragraph text</p></div>
<div id="tab-2" aria-labelledby="ui-id-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display:none;">Section Title:<input class="sectionTitle"><p contenteditable="false" class="cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" tabindex="0" spellcheck="false" role="textbox" aria-label="Rich Text Editor, editor2" title="Rich Text Editor, editor2" aria-describedby="cke_153" style="position: relative;">Paragraph text</p></div>
<div id="tab-3" aria-labelledby="ui-id-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;">Section Title:<input class="sectionTitle"><p contenteditable="false" class="cke_editable cke_editable_inline cke_contents_ltr cke_show_borders" tabindex="0" spellcheck="false" role="textbox" aria-label="Rich Text Editor, editor3" title="Rich Text Editor, editor3" aria-describedby="cke_223" style="position: relative;">Paragraph text</p></div>
</div>
After looking at the HTML generated following are the problems I found with your code:
1) The following line generated li with wrong Id i.e. tab4 instead of tab-4
$('div#tabs ul').append(
'<li class="tab">Section ' + num_tabs + '</li>');
change <a href="#tab' to <a href="#tab-'
2) The following line was missing " in id because of which the div wasn't appended in the tabs
$('div#tabs').append(
'<div id="tab-' + num_tabs + '"></div>');
Once you fix there, you'll see your code is working properly
See working fiddle
Is it possible to have multiple split buttons in a jQuery mobile list?
I've tried doing this:
<ul data-role='listview'>
<li>
<a href='#' id='1'>1</a>
<a href='#' id='btn1'></a>
<a href='#' id='btn2'></a>
</li>
</ul>
But it doesn't work. Neither does wrapping the links in a <div data-role='controlgroup>. Am I doing something wrong, or is it just not possible without a hack?
UPDATE: The list is dynamically generated by doing $("#listid).append("<li>...</li>"). http://jsfiddle.net/nrpMN/3/ . As pointed out by mdmullinax below, the following does work:
<ul data-role='listview'>
<li>
<a href='#' id='1'>1</a>
<div data-role='controlgroup' data-type='horizontal'>
<a href='#' id='btn1'></a>
<a href='#' id='btn2'></a>
</div>
</li>
</ul>
Thanks
Sounds like what you want is a horizontal controlgroup nested in a listview.
http://jsfiddle.net/nrpMN/
<ul data-role='listview'>
<li>
<div data-role="controlgroup" data-type="horizontal">
Yes
No
Maybe
</div>
</li>
</ul>
Here is extension to the solution. Problem with above solution is that you cannot control the placement of buttons on the right side of the list item. One way to do it is add class='ui-li-aside' to the control. That will make the buttons come on right, but you will have to adjust the area which aside covers, by default it is 50%. You can modify it to reduce it so that it does not cover your list content on left
.ui-li-aside { float: right; width: 10%; text-align: right; margin: .3em 0; }
Or you can add another class
.ui-li-asideNew { float: right; width: 10%; text-align: right; margin: .3em 0; }
And change the div to adjust the
<ul data-role='listview'>
<li>
<div class='ui-li-aside' data-role="controlgroup" data-type="horizontal">
Yes
No
Maybe
</div>
</li>
</ul>
I think, Controlgroup not rendered well in dynamic listview. You should make complete html code for controlgroup in dynamic listview.
<li>
<a href='#popupItem' data-rel='popup'>List Text</a>
<div class='ui-controlgroup-controls' style='width: 110px;float: right;position: absolute;right: 0em;top: 0.5em;'><a href='#' id='tolistminus' data-role='button' data-icon='minus' data-iconpos='notext' style='width: 1.0em;float: left;' data-theme='b' class='ui-link ui-btn ui-btn-b ui-icon-minus ui-btn-icon-notext ui-shadow ui-corner-all ui-first-child' role='button'>-1</a><a href='#' id='tolistplus' data-role='button' data-icon='plus' data-iconpos='notext' style='width: 1.0em;float: left;' data-theme='b' class='ui-link ui-btn ui-btn-b ui-icon-plus ui-btn-icon-notext ui-shadow ui-corner-all ui-last-child' role='button'>+1</a></div>
</li>