I want to make my website more mobile friendly. For example, I'd like to declutter the input forms when viewed on a mobile device. My search form holds 5 fields for different search criteria, but I'd like the form to change to 1 field with a drop down box when viewed on a mobile device.
And would this make make my website more responsive, or would this be a pointless change?
I'm thinking the HTML would go from this:
<!-- ... -->
<td align="right">Client Ref :</td>
<td align="left"><input type="text" name="sp:def:address_id" size="9" maxlength="9"></td>
<td align="right">Invoice Number :</td>
<td align="left"><input type="text" name="sp:def:invoice_number" size="9" maxlength="9"></td>
<td align="right">Email :</td>
<td align="left"><input type="text" name="sp:def:email" maxlength="100"></td>
</tr>
<tr>
<td align="right">Last Name :</td>
<td align="left"><input type="text" name="sp:def:last_name" maxlength="36"></td>
<td align="right">Postcode :</td>
<td align="left"><input type="text" name="sp:def:postcode" size="10" maxlength="9"></td>
<td align="left"> </td>
<!-- ... -->
...to something like this:
<select>
<option value="#">Client Ref</option>
<option value="#">Invoice Number</option>
<option value="#">Email</option>
<option value="#">Last Name</option>
<option value="#">Post Code</option>
</select>
<input name="" type="text" size="40"/>
Related
here is what I have put together so far but it seems my hidden fields are not toggling when the yes or no is selected. Yes in the field - Do you have empowerment should bring up an input field asking for Employee #, while No should bring up a a field asking for Operator number.
The system we use at work will only run html 4, no javascript or php.
Thanks in advance for any help!
<table>
<tr>
<td><span style="white-space: nowrap;" nowrap="nowrap"><label>Is this over $10?</label></span></td>
<td><select id="overTenToggle" name="overTenToggle" class="required" data-hidediv="overTen" onchange="changeHiddenView(this)">
<option value=""></option>
<option value="hide">No</option>
<option value="show">Yes</option>
</select>
</td>
</tr>
</table>
<div id="overTen" style="display:none">
<table>
<tr>
<td><span style="white-space: nowrap;" nowrap="nowrap"><label>Do you have empowerment?</label></span></td>
<td><select id="empowermentToggle" name="empowermentToggle" onchange="changeMultiHide(this)" >
<option value="" ></option>
<option value="empowermentEmp" data-multihide="[{target:'empowermentOp',action:'hide'}, {target:'empowermentEmp',action:'show'}]" >No</option>
<option value="empowermentOp" data-multihide="[{target:'empowermentOp',action:'show'}, {target:'empowermentEmp',action:'hide'}]" >Yes</option>
</select>
</td>
</tr>
</table>
</div>
<div id="empowermentOp" style="display:none">
<table>
<tr>
<td><label>Empowerment Employee Op Number:</label></td>
<td colspan="6"><input class="numeric amount" name="opNum" id="opNum" size="15"></input></td>
</tr>
</table>
</div>
<div id="empowermentEmp" style="display:none">
<table>
<tr>
<td><label>Leadership Op Number:</label></td>
<td colspan="6"><input class="numeric amount" name="empNum" id="empNum" size="15"></input></td>
</tr>
</table>
</div>
I am trying to create a group of elements in html (Yes, in HTML ONLY!!! I'm trying not to apply CSS yet, for this!!!) form using table, under the named 2. Pizza Order Details, as you can see here:
Right now I'm stuck on the Type of pizza element. I want to make the colon (:) for Type of Pizza to be placed in line in between (but after!) the words "Type of" and "Pizza", like in Screenshot01 but instead I'm getting this:
My colon (:) for Type of Pizza comes directly right after the word Pizza instead. I don't want this. I need it to be placed like in Screenshot01.
Here is the code I made:
<fieldset>
<legend>2. Pizza Order Details:</legend>
<table style="width:860px">
<tr>
<td align="right">Type of <br>Pizza :</td>
<td>
<select>
<option value=""></option>
<option value="Hawaiian Chicken">Hawaiian Chicken</option>
<option value="Cheese Deluxe">Cheese Deluxe</option>
<option value="Chicken Pepperoni">Chicken Pepperoni</option>
<option value="BBQ Chicken">BBQ Chicken</option>
<option value="Super Supreme">Super Supreme</option>
</select>
</td>
<td style="width:1px" align="left"><strong>|</strong></td>
<td style="width:70px" align="right">Quantity :</td>
<td><input size="3" placeholder="0" type="text"></td>
</tr>
<tr>
<td align="right">Size :</td>
<td>
<input type="radio" name="size">Small
<input type="radio" name="size">Medium
<input type="radio" name="size">Big
</td>
<td style="width:1px" align="left"><strong>|</strong></td>
<td style="width:70px" align="right">Topping :</td>
<td>
<input type="checkbox" name="topping" value="Cheese">Cheese
<input type="checkbox" name="topping" value="Pepperoni">Pepperoni
<input type="checkbox" name="topping" value="Sausages">Sausages
<input type="checkbox" name="topping" value="Olives">Olives
</td>
</tr>
<tr>
<td align="right">Date :</td>
<td><input size="12" placeholder="dd/mm/yyyy" type="text"></td>
<td style="width:1px" align="left"><strong>|</strong></td>
<td style="width:70px" align="right">Time :</td>
<td><input size="7" placeholder="hh/mm" type="text"></td>
</tr>
</table>
</fieldset>
Kindly point out what my errors, or what I'm missing here? Thanks!
Your approach is wrong, because you are using <br> ,which will break the line and the : will come accordingly.
You can use <td align="right">Type of Pizza :</td> .
This will show the label on one line, which is really good approach.
I have a Wordpress plugin with some tables and input forms. The tables are built using the standard Wordpress table widefat class. The input forms are embedded into cells in the widefat table.
Where I am just displaying data, the table resizes to fit the metabox. Where I am using input fields, the table overflows the metabox, see picture:
I would like the input table to resize like the data table.
This is how the normal table renders:
<table class="widefat" id="item_publication_attributes">
<tr>
<th class="type"><b>Type</b></th>
<th class="date"><b>Date</b></th>
<th class="name"><b>Name</b></th>
<th class="address"><b>Address</b></th>
<th class="gender"><b>Map</b></th>
<th></th>
</tr>
<tr class="publish-attribute publish-attribute-1">
<td class="type">Publisher</td>
<td class="date">15/2/1971</td>
<td class="name">Publish Company</td>
<td class="location">63 The Street, The Town, Cambridgeshire</td>
<td class="map-icon" style="font-size:70%">[map]</td>
<td>Delete | Edit</td>
</tr>
</table>
And this is how the Form table renders:
<form>
<input type="hidden" name="post_id" id="add_publishing_attribute_post_id" value=2624/>
<table class="widefat" id="add_new_publishing_attribute">
<tr id="add_new_publishing_attribute_row">
<td class="type">
<select name="type" id="add_attribute_type">
<option value="0">ID 0</option>
<option value="1">ID 1</option>
<option value="2">ID 2</option>
</select>
</td>
<td class="dd"><input type="text" name="dd" id="add_attribute_dd" placeholder="dd" /></td>
<td class="mm"><input type="text" name="mm" id="add_attribute_mm" placeholder="mm" /></td>
<td class="yyyy"><input type="text" name="yyyy" id="add_attribute_yyyy" placeholder="yyyy" /></td>
<td class="name"><input type="text" name="name" id="add_attribute_name" placeholder="name" /></td>
<td class="location"><input type="text" name="location" id="add_attribute_location" placeholder="location" /></td>
<td><input type="submit" name="submit" id="add_new_attribute_submit" value="Add"/></td>
</tr>
</table>
</form>
Grateful for any suggestions
What I don't get is why you're using a form inside a meta box... We just simply drop our input fields there, and save_post takes care of there rest, here's a full example.
To fix the table layout, I've found an answer here: Why is my HTML table not respecting my CSS column width?
Use: table-layout:fixed:
<table class="widefat" id="add_new_publishing_attribute" style="table-layout:fixed">
I want to make phone no. field into the form. The user should select the area code from dropdown box and just right to the drop down box their should be text box to enter the phone no. I want to use dropdown box and textbox into single tag. When I try this it send automatically the second field ie textbox into second line by putting tag automatically. When I use two textbox or two dropdown box then it works fine into single tag.
I want to use one dropdown box and one textbox into single tag.
Or are there any other method we can do this.
Please find the code I am using.
<table>
<tbody>
<tr>
<td><label>Name:</label></td>
<td><input type="text" name="bftpro_name"/></td>
</tr>
<tr>
<td><label>Email:</label></td>
<td><input type="text" name="email"/></td>
</tr>
<tr>
<td><label>Phone No:</label></td>
<td><select id="countries" style="width: 50%; name="countries">
<option value="Afghanistan">Afghanistan</option>
<option value="Åland Islands">Åland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
</select>
<input type="text" style="width: 50%; name="field_2" value=""/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Download"/></td>
</tr>
</tbody>
</table>
<input type="hidden" name="bftpro_subscribe" value="1"/>
<input type="hidden" name="list_id" value="2"/>
</form>
You should put them into separate <td>
<td><label>Phone No:</label></td>
<td><select id="countries" style="width: 50%; name="countries">
<option value="Afghanistan">Afghanistan</option>
<option value="Åland Islands">Åland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
</select>
</td>
<td><input type="text" style="width: 50%; name="field_2" value=""/></td>
I have certain number of dynamically generated #divs with known .className(All have same className) but unknown Id's. I want to make the size (width , height) of the #divs to be fixed and then to show them from left to right, in one row and then to next row if it does not fit in the row. I tried (float : left ) , But the element below the last div, also displays on the left and gives an ugly look + the divs are not in same size(they have variable length of text). What is the css properties and how to set it to do the magic for me....
I am not quiet sure but i think the problem should be solved by some form of positioning (absolute , relative, etc) be defined for the classes.
<html>
<head>
<style>
.wrapperDiv{
overflow:auto;
background-color:green;
position:relative;
}
.column{
background-color:aqua;
width:20em;
height:20em;
float:left;
margin:2px;
}
</style>
</head>
<body>
<form>
<div class="wrapperDiv">
<table class="column">
<tr><td>Name<hr/></td></tr><tr><td>DataType :</td><td><select name="Name_dataType" class="dataType" onchange="typeChanged(this)" ><option value="text" selected="true" > Text </option><option value="number" > Number </option><option value="date" > Date </option></select></td></tr>
<tr><td>Equals:</td><td> <input type="text" name="Name_equals"/></td></tr> <br/><tr><td>Contains:</td><td> <input type="text" name="Name_contains"/></td></tr><br/>
</table>
<table class="column">
<tr><td>Name<hr/></td></tr><tr><td>DataType :</td><td><select name="Name_dataType" class="dataType" onchange="typeChanged(this)" ><option value="text" selected="true" > Text </option><option value="number" > Number </option><option value="date" > Date </option></select></td></tr>
<tr><td>Equals:</td><td> <input type="text" name="Name_equals"/></td></tr> <br/><tr><td>Contains:</td><td> <input type="text" name="Name_contains"/></td></tr><br/>
</table>
<table class="column">
<tr><td>Name<hr/></td></tr><tr><td>DataType :</td><td><select name="Name_dataType" class="dataType" onchange="typeChanged(this)" ><option value="text" selected="true" > Text </option><option value="number" > Number </option><option value="date" > Date </option></select></td></tr>
<tr><td>Equals:</td><td> <input type="text" name="Name_equals"/></td></tr> <br/><tr><td>Contains:</td><td> <input type="text" name="Name_contains"/></td></tr><br/>
</table>
<table class="column">
<tr><td>DATE_OF_BIRTH<hr/></td></tr><tr><td>DataType :</td><td><select name="DATE_OF_BIRTH_dataType" class="dataType" onchange="typeChanged(this)" ><option value="text" > Text </option><option value="number" > Number </option><option value="date" selected="true" > Date </option></select></td></tr>
<tr><td>Equals:</td><td> <input type="text" name="DATE_OF_BIRTH_equals"/></td></tr> <br/><tr><td>Greater_Then:</td><td> <input type="text" name="DATE_OF_BIRTH_greaterThen"/></td></tr><br/><tr><td>Less_Then:</td><td> <input type="text" name="DATE_OF_BIRTH_lessThen"/></td></tr><br/>
</table>
<table class="column">
<tr><td>DATE_OF_BIRTH<hr/></td></tr><tr><td>DataType :</td><td><select name="DATE_OF_BIRTH_dataType" class="dataType" onchange="typeChanged(this)" ><option value="text" > Text </option><option value="number" > Number </option><option value="date" selected="true" > Date </option></select></td></tr>
<tr><td>Equals:</td><td> <input type="text" name="DATE_OF_BIRTH_equals"/></td></tr> <br/><tr><td>Greater_Then:</td><td> <input type="text" name="DATE_OF_BIRTH_greaterThen"/></td></tr><br/><tr><td>Less_Then:</td><td> <input type="text" name="DATE_OF_BIRTH_lessThen"/></td></tr><br/>
</table>
</div>
</form>
</body>
</html>
Why the tables vertical alignment changes from left to right...........
Okay, I see a couple of contradictions in what you want to do.
First: You say you want to make the size of the divs fixed, but afterwards you say the divs do not have the same size as they have variable length of text. You must go for one of the two options. If you have variable text in the divs, you must be aware that you cannot make the div's dimensions fixed unless you want to risk the text overflowing the div. That, or check your text to be sure it fits the divs.
Second: You say you are using float: left, but then complain that the element below the last div (the last of the row, I assume) also displays left. If you want the first div of a row to display at the right, you should use float: right.
I hope this clarifies the issue for you.
Update:
Okay, I found the problem with your code. First of all, let me tell you that you shouldn't use tables for layout. <div> will make your code simpler and are better for that purpose. Anyway, it wasn't that what was breaking your layout. It was some <br/> tags you inserted at the end of the tables for some reason. So your code would look better like this:
<form>
<div class="wrapperDiv">
<table class="column">
<tr>
<td>Name<hr/></td></tr>
<tr>
<td>DataType :</td>
<td>
<select name="Name_dataType" class="dataType" onchange="typeChanged(this)" >
<option value="text" selected="true" > Text </option>
<option value="number" > Number </option>
<option value="date" > Date </option>
</select>
</td>
</tr>
<tr>
<td>Equals:</td>
<td>
<input type="text" name="Name_equals"/>
</td>
</tr>
<tr>
<td>Contains:</td>
<td>
<input type="text" name="Name_contains"/>
</td>
</tr>
</table>
<table class="column">
<tr>
<td>Name<hr/></td>
</tr>
<tr>
<td>DataType :</td>
<td>
<select name="Name_dataType" class="dataType" onchange="typeChanged(this)" >
<option value="text" selected="true" > Text </option>
<option value="number" > Number </option>
<option value="date" > Date </option>
</select>
</td>
</tr>
<tr>
<td>Equals:</td>
<td>
<input type="text" name="Name_equals"/>
</td>
</tr>
<tr>
<td>Contains:</td>
<td>
<input type="text" name="Name_contains"/>
</td>
</tr>
</table>
<table class="column">
<tr>
<td>Name<hr/></td>
</tr>
<tr>
<td>DataType :</td>
<td>
<select name="Name_dataType" class="dataType" onchange="typeChanged(this)" >
<option value="text" selected="true" > Text </option>
<option value="number" > Number </option>
<option value="date" > Date </option>
</select>
</td>
</tr>
<tr>
<td>Equals:</td>
<td>
<input type="text" name="Name_equals"/>
</td>
</tr>
<tr>
<td>Contains:</td>
<td>
<input type="text" name="Name_contains"/>
</td>
</tr>
</table>
<table class="column">
<tr>
<td>DATE_OF_BIRTH<hr/></td>
</tr>
<tr>
<td>DataType :</td>
<td>
<select name="DATE_OF_BIRTH_dataType" class="dataType" onchange="typeChanged(this)" >
<option value="text" > Text </option>
<option value="number" > Number </option>
<option value="date" selected="true" > Date </option>
</select>
</td>
</tr>
<tr>
<td>Equals:</td>
<td>
<input type="text" name="DATE_OF_BIRTH_equals"/>
</td>
</tr>
<tr>
<td>Greater_Then:</td>
<td>
<input type="text" name="DATE_OF_BIRTH_greaterThen"/>
</td>
</tr>
<tr>
<td>Less_Then:</td>
<td>
<input type="text" name="DATE_OF_BIRTH_lessThen"/>
</td>
</tr>
</table>
<table class="column">
<tr>
<td>DATE_OF_BIRTH<hr/></td>
</tr>
<tr>
<td>DataType :</td>
<td>
<select name="DATE_OF_BIRTH_dataType" class="dataType" onchange="typeChanged(this)" >
<option value="text" > Text </option>
<option value="number" > Number </option>
<option value="date" selected="true" > Date </option>
</select>
</td>
</tr>
<tr>
<td>Equals:</td>
<td>
<input type="text" name="DATE_OF_BIRTH_equals"/>
</td>
</tr>
<tr>
<td>Greater_Then:</td>
<td>
<input type="text" name="DATE_OF_BIRTH_greaterThen"/>
</td>
</tr>
<tr>
<td>Less_Then:</td>
<td>
<input type="text" name="DATE_OF_BIRTH_lessThen"/>
</td>
</tr>
</table>
</div>
</form>
You can see it working in a jsfiddle here.