I am trying to build a List that has a checkbox and an icon, so I decided to use a Split button List. Now I have 2 issues with the List:
The Checkbox appears in a box within the list item, I want it to be "flat", i.e. NO box around
The click causes the entire box to become blue, I want only the checkbox to get ticked
Can you help me with that?
I posted some example code here: http://jsfiddle.net/JY6EV/2/
//edit 2012/06/14
It seems that having a checbox on a listitem alway nests a button. As a workaroud I could add an icon (data-icon="check") but this does not work either.. any suggestions?
PS: I want to mimic the gmail list on iPad/iPhone:
with my (faked) jquery mobile list:
What I tried so far: http://jsfiddle.net/JY6EV/8/
I know this is an old thread, but I recently had to do the same.
Since the solution of the second image is not present, I made it myself.
The list items:
<li>
<a href="#" class="custom">
<input type="checkbox" name="cb1" id="cb1" />
<label for="cb1">checkbox 1</label>
</a>
</li>
The css:
.custom {
padding: 0;
}
.custom > div {
margin: 0;
}
.custom > div > label {
border-radius: 0;
border: 0;
}
Does this work?
http://jsfiddle.net/JY6EV/10/
Using the Gris layout for positioning but you will still need to tweak the look and feel
Related
I am trying figure out how to show the selected item when I click on it in the horizontal navbar. Here is my code:
<mat-toolbar color="primary" class="topbar relative">
<div class="navbar-header">
<div color="primary">
<div>
Accounts
Create Account
</div>
</div>
</div>
</mat-toolbar>
Although I am using the same router link for both routes the link is real. When I click the selected item is not staying highlighted. Here is how it looks before and after selecting an item.
Any idea how to style it to show the active item?
Thanks
The routerActiveLink directive just adds a css-class and leaves all the styling to you. In your case, there will be an active class that you can style.
// my.component.scss
.active {
background: red;
}
Remember that if you're using #angular/material, you should probably style it using their themes. You can read more about that here.
// _my-theme.scss (only do this if you use material themes)
.active {
background: mat-color($accent);
}
I am using this to display a combobox on my webpage:
<div class="dropdown">
#Html.DropDownList("Sortby", #Model.Values)
</div>
However the combobox does not display the items by default, only when hovering over the item:
Any ideas?
Try changing the color on the select to something that would show up. It looks like it is probably white right now. Something like:
.dropdown select{
color: black;
}
I have a simple (newbie here) task in jquery mobile. Change the text of a button which has a custom style applied. I can change the text without problem in the 'pageinit' event however I lose the custom style in the process. Have read lots of article in stackoverflow but still lack a working solution.
Excerpt of html page below loaded by ajax
CSS
#goal .ui-btn-inner {
text-align: center;
background: chartreuse;
ui-disabled: true;
}
Button to be styled
<div data-corners="false" data-role="controlgroup" >
<a href="#" data-role="button" id="goal" >
text to be changed
</a>
</div>
...
Here is the jquery mobile code that changes the button text.
$(document).delegate('#problem_screen', 'pageinit', function() {
$('#goal').on('click', function() {
console.log('goal clicked');
});
$('#goal .ui-btn-text').text('New button text');
});
Thanks
Finally got this to work. My first JQM mistake was to define custom styles on each page of the multiple page application. This is wrong -- you must define all your custom styles in one location, typically a style sheet file which is included by every page. Another mistake is to have same id value on different pages. Wrong -- id values must be unique throughout application.
The api that applies (in this case enhances a style) is .addClass("). In my case I defined a style as follows:
.goal-style {
text-align: center;
background: charteuse;
ui-disabled: true;
}
Now after I update the button's text I say:
$('#goal').addClass('goal-style'); // Note: do not use '.goal-style'
I have two dynamic horizontal control groups of radio buttons:
<div class="categories-panel" id="sections-panel">
<fieldset id="section-choice-fieldset" data-role="controlgroup" data-type="horizontal">
<!-- ko foreach: Sections -->
<input type="radio"
data-mini="true"
...
/>
<label data-bind="text:Name, attr:{'for':Id}"></label>
<!-- /ko -->
</fieldset>
</div>
The content of controlgroups is updated by knockoutjs. The markup is updated this way:
self.refreshCategoriesList = function() {
$("#section-choice-fieldset").find("input[type='radio']").checkboxradio();
$("#category-choice-fieldset").controlgroup();
};
The problem is: the controlgroups don't fit in one row until I turn of and turn on the display: inline-block property of .ui-controlgroup-controls div in debugger:
before display: inline-block refresh:
http://i890.photobucket.com/albums/ac105/cubius/screen-1.png
after display: inline-block refresh (desired view):
http://i890.photobucket.com/albums/ac105/cubius/screen-2.jpg
How to make jQM always paint my controlgroups in one row?
First of all, the way you select your control group is wrong in this line :
$("#category-choice-fieldset").controlgroup();
Mustnt it be
$("#section-choice-fieldset").controlgroup();
(Maybe a typo)
You could do this in any of the two ways :
Method 1
Works fine in my fiddle. I'd say you move the <script> tag from head to body because page events of jQM dont play well with KnockOut.js and KnockOut.js needs a DOM ready to work properly, AND DOM ready doesnt work well with jQM. So I guess its a vicious loop indeed.
Demo : http://jsfiddle.net/hungerpain/k7UR5/
Method 2
And you could try one more thing in your refreshCategoriesList method:
//$("#section-choice-fieldset").find("input[type='radio']").checkboxradio();
//$("#category-choice-fieldset").controlgroup();
$("[data-role=page]").trigger("create");
Refreshing the entire controls on the page - thats what trigger("create") does
Demo : http://jsfiddle.net/hungerpain/k7UR5/1/
If you are updating the control group (appending, modifying etc) , access the control group like this:
$("#my-controlgroup").controlgroup("container")["append"]($el);
You need to access the control group container. See my jsfiddle for modifying the control group:
http://jsfiddle.net/androdify/WAzs6/
I have a jquerymobile fieldset that looks like this:
<fieldset data-role="controlgroup" data-type="horizontal" id="myid">
I want to set a custom width for the fieldset but don't know how to do it.
How can I do this? (preferably without an external plugin)
Thanks
Solution
Here's an example of how to di it with fieldset containing select boxes: http://jsfiddle.net/Gajotres/xFPFH/
CSS used is:
.ui-controlgroup-controls {
width:100% !important;
}
.ui-select {
width:33% !important;
}
EDIT :
Here's an example for radio buttons: http://jsfiddle.net/yUZy8/. When you multiply number of radio button widths it must be equal or greater of .ui-controlgroup-controls width.
More info
If you want to learn how to do this kind of changes by yourself you should check this article, it will teach you how to do this by yourself.