right now i have it in a fieldset
my list of checkboxes are in 1 row
i want 3 or 4 rows instead of 1 so it looks alot more neat
I am working on making a online ordering site for a restaurant. for example like how you can order dominoes pizza online or subway.
I am working with a restaurant on making it so you can order food online.
I have everything set up and working pretty good right now.
The reason i want these checkboxes in a unordered list is so i can style it.
my checkboxes currently are displayed in one long list
I would like to have them in rows of 3 or 4 boxes per row.
my code (this method) grabs data from a collection and displays it as checkboxes in its certain section on the page.
This is just one method of my many for this site.
I have been trying many different orders and differnt things to try to get this to work but i did not yet.
this is my most current sample
if you know a better solution then an unordered list to style my checkboxes i am grateful to hear it.
http://s13.postimg.org/8b6gg8byf/Untitled.png[
^]
<!-- Select fillings -->
<div id="selectFillings">
<div id="fillingValid" class="validation alert"></div>
<fieldset id="fillings">
<legend><h4>4). Choose up to two fillings (Extra + $1.20)</h4></legend>
<table id="fillingsTable"></table>
</fieldset>
</div>
function initializeCheckBox(elementName, dataService, render, name) {
if (render === null) render = function(item) { return(item.text); };
var $element = $(elementName);
$.when(dataService()).then(function (data) {
var $unorderedList = $('ul class="stylebox"');
$element.append($unorderedList);
console.log($unorderedList);
for (var itemIndex in data) {
var $input = $('<input type="checkbox" name ="'+name+'" value="' + data[itemIndex].value + '">' + render(data[itemIndex]) + '</input>');
var $row = $('<li>');
$input.data(data[itemIndex]);
$input.appendTo($element);
}
});
}
function initializeRadioBtn(elementName, dataService) {
var $element = $(elementName);
$.when(dataService()).then(function (data) {
for (var itemIndex in data) {
var $input = $('<input type="radio" name ="Side" value="' + data[itemIndex].value + '">' + data[itemIndex].text + '</input>');
$input.data(data[itemIndex]);
$input.appendTo($element);
}
});
}
*/
function getFillings() {
var deferred = new $.Deferred();
deferred.resolve([
{ value: 'Turkey Breast', text: 'Turkey Breast', price: 0.0 },
{ value: 'Baked Ham', text: 'Baked Ham', price: 0.0 },
{ value: 'Salami', text: 'Salami', price: 0.0 },
{ value: 'Cheddar Cheese', text: 'Cheddar Cheese', price: 0.0 },
{ value: 'Swiss Cheese', text: 'Swiss Cheese', price: 0.0 },
{ value: 'Provologne Cheese', text: 'Provologne Cheese', price: 0.0 },
{ value: 'Veggie Mix', text: 'Veggie Mix', price: 0.0 }
]);
return (deferred);
}