I would like to add p tage or line break after table, so that contents in table and div can display in two lines.
At the moment they display in one line which is very messy (i.imgur.com/7cnQhou.jpg).
Would you please let me know how to do it using php or JS?
<div class="woocommerce-variation">
<input type="hidden" id="thwepof_product_fields" name="thwepof_product_fields" value="test2">
<table class="thwepo-extra-options thwepo_variable" cellspacing="0">
<tbody><tr class=""><td class="label leftside"></td>
<td class="value leftside">
<input type="text" id="test2" class="thwepof-input-field">
</td></tr>
</tbody>
</table>
<div class="quantity">
<input type="number" id="quantity_60" class="input-text qty" inputmode="numeric">
</div>
<button type="submit" class="single_add_to_cart_button">Add to cart</button>
</div>
Thank you.
table and div tag are both block level element. They display in two lines in default.
Below is the result of running your code.
Related
I have a form as a popup and I want to add a cancel button to close current popup. I tried many ways to do it but it is not closing
<form id="overlay_form_uploadGenFile" action="/crm/saveGeneralFile" method="POST" class="overlay_form" style="display:none" enctype="multipart/form-data">
<h1 style="font-size: 2em">Edit uploaded file</h1>
<input type="hidden" name="fileId" value="0"/>
<input type="hidden" name="userId" value="{{userId}}"/>
<span>Category:</span><span id="file-filter-by">Filter by:</span> <select name="fileCategoryTagId" onchange="populatePopupCategories(this);"></select>
<div id="file-category-select"><select name="fileCategoryId" onchange="getShareWithIntegrationServicesForPopup(this.options[this.selectedIndex].value);"></select></div><br/>
Current File: <input type="text" name="filename" class="currentFile"/> (change it to rename the file)<br/><br/>
To replace <input type="file" name="fileData" class="replaceFile" /><br/><br/>
<input type="checkbox" name="editableByHR" class="editableHR"/> Editable by HR
<input type="checkbox" name="sharedWithEmployee" /> Shared With Employee <br/>
Notes <textarea name="notes" class="fileUpdateNotes"></textarea><br/><br/>
<br/>
<div class="integrationServicesContainerHolder">
</div>
<br/>
<div style="display: inline-block;width: 100%">
<div align="left" style="float: left">
<input type="submit" value="Save" align="left" class="submitFileUpdateButton"/>
<input type="button" value="Cancel" onclick="closeFunction" align="left" class="submitFileUpdateButton"/>
</div>
<div align="right" style="float: right">
<input type="submit" value="Delete" align="right" class="submitFileUpdateButton"/>
</div>
</div>
</form>
and the function side is
function closeFunction() {
$('#overlay_form_uploadGenFile').hide();
}
I have tried .dialog('hide') and .modal('hide') as well but still not working. If I try self.closeAll then it is closing all tab. How can I close only this form dialog popup ?
edit: ok I put $('#overlay_form_uploadGenFile').fadeOut(100); and problem is solved almost... I need immediate close because fadeOut is blocking me for calling other functions due to asynchronous calls.
My suggestion would be to use the break function. That will exit the current loop.
Please see this screen shotI need some help. I want to populate dynamic table's row data into a form when i clicked on the particular row.When i try this html elements are repeating along with data when i click on the table rows, but i need like elements should not repeat only data should change. This is my template code
<table class="table2">
<tr>
<th>'Player'</th>
<th>Age</th>
</tr>
<tr ng-repeat=" usr in fc.saveData" ng-click="fc.fnRowClick(usr)">
<td>{{usr.player}}</td><td>{{usr.age}}</td>
</tr>
</table>
<div ng-repeat="data in fc.displayData track by $index">
<label for="field1">
<span>Name</span><input type="text" name="field1" required="true" ng-model="data.player"/>
</label>
<label for="field2">
<span>Age</span><input type="text" name="field2" required="true" ng-model="data.age"/>
</label>
</div>
This is my js code.
fc.displayData=[];
fc.fnRowClick = function(usr){
console.log(usr);
fc.displayData.push(usr);
console.log(fc.displayData);`
}
html name attribute is beeing duplicated during ng-repeat.
That may cause this problem.
Change:
<label for="field1">
<span>Name</span><input type="text" name="field1" required="true" ng-model="data.player"/>
</label>
to this:
<label for="field1{{$index}}">
<span>Name</span><input type="text" name="field1{{$index}}" required="true" ng-model="data.player"/>
</label>
Do the same for second label.
In my html I have code which dynamically adds rows when a button is clicked and on each row there is a button called "Add"
<form name="{{form.name}}"
ng-repeat="form in forms">
<div ng-repeat="cont in form.contacts">
Add
<input type="text" class="xdTextBox" ng-model="cont.ac"/>
<input type="text" class="xdTextBox" ng-model="cont.a_number"/>
</div>
<button ng-click="submit(form)">Submit</button>
<button ng-click="addFields(form)">Add</button>
<hr>
</form>
Than on my second page /edit i have following code that lists rows of values fetched.
<table>
<tbody ng-repeat="item in alllis">
<tr>
<td>
Select
</td>
<td>
<input type="text" ng-model="item.ac" />
</td>
<td>
<input ng-model="item.a_number />
</td>
</tr>
</tbody>
</table>
What I am trying to figure out is when I am on /edit and I select any row how do i populate back that row data on main page.
Please let me know from /edit page how do i go back to main page populating that row where Add button was clicked. Thanks
Here is the plunker for the first (Main) page.
http://plnkr.co/edit/VVUx2roDTrM9ob2uyZMv?p=preview
I'm working on a website that includes Facebox to load content for a basket process.
When adding something to the basket and clicking the green wishlist button I'm having trouble with it loading in IE8, it works on all the modern browsers. Can anyone see why it won't load content in IE8 in the facebox?
I'm using this code on the wishlist button:
<div onclick="location.href='wishlist.php?basket=true'" rel="msgbox" id="mybasket">
Is it enough info to view source on the link to the site? If you need any more code then please ask.
On a Mac using Chrome - as you can see the facebox has opened fine when clicking on the green wishlist button.
On a PC using IE8 - when clicking on the green wishlist button the facebox opens but doesn't load the content.
This is a problem with the returned data, You have an extra </div> at the end.
<div id="msgbox_title">Your Wish List<div id="closeme" onclick="jQuery(document).trigger('close.facebox')">x</div></div>
<form method="post" action="wishlist.php">
<div id="msgbox_body" style="max-height:400px;min-height:100px;overflow-y:auto;overflow-x:hidden;">
<input type="hidden" name="updatebasket" value="1" />
<table border="0" cellpadding="0" cellspacing="5" align="center" style="min-width:390px;border-collapse:separate!IMPORTANT;">
<tr><td colspan="5" style="text-align: left;"><strong style="font-size:14px;">Rotunda Vulsellum Forceps</strong></td></tr> <tr>
<td style="width: 50px;"><span style="color: #aaa;">Quote:</span></td>
<td style="width: 50px;"><span style="color: #aaa;">Sample:</span></td>
<td style="width: 350px;"><span style="color: #aaa;">Description:</span></td>
<td style="width: 80px;"><span style="color: #aaa;">Pack size:</span></td>
<td style="width: 40px;"><span style="color: #aaa;">Remove</span></td>
</tr>
<tr>
<!-- <td style="padding:0px 2px;"><input type="textbox" class="textbox" value="3" name="54_59_131" /></td> -->
<td align="center" valign="middle" style="background-color:#C3DCCD;"><input checked="checked" style="margin:5px;" type="checkbox" name="products-quote[]" value="835" /></td>
<td align="center" valign="middle" style="background-color:#D3C4DF;"><input checked="checked" style="margin:5px;" type="checkbox" name="products-sample[]" value="835" /></td>
<td style="font-size:11px;background-color:#efefef;"><p style="margin:0px 0px 5px 0px;padding:5px;"><span style="color:#663399;font-weight:bold;">VFR1001</span> Sterile Single-use Rotunda Vulsellum Forceps, double packed</p></td>
<td style="font-size:11px;background-color:#efefef;"><p style="margin:0px 0px 5px 0px;padding:5px; font-weight:bold;">10 units</p></td>
<td align="center"><b>X</b></td>
</tr>
</table>
</div>
<script>
function quoteme() {
$("#msgbox_body").html('<div id="contactform" style="margin-left:20px;margin-right:20px;margin-top:10px;"><form class="form" method="POST" action="http://www.dtrmedical.com"><table border="0"><tbody><tr><td><p class="name"><label for="name">Your Name<span style="color:red;">*</span>:</label></p></td><td> </td><td><input type="text" name="name" id="name" /></td></tr><tr><td><p class="hospital"><label for="hospital">Hospital/Institution:</label></p></td><td> </td><td><input type="text" name="hospital" id="hospital" /></td></tr><tr><td><p class="department"><label for="department">Department:</label></p></td><td> </td><td><input type="text" name="department" id="department" /></td></tr><tr><td><p class="email"><label for="email">E-mail<span style="color:red;">*</span>:</label></p></td><td> </td><td><input type="text" name="email" id="email" /></td></tr><tr><td><p class="tel"><label for="tel">Telephone<span style="color:red;">*</span>:</label></p></td><td> </td><td><input type="text" name="tel" id="tel" /></td></tr><tr><td colspan="3" align="center"><p class="submit"><input style=\"margin-left:27px;cursor:pointer;\" onclick="jQuery.facebox({ ajax: (\'wishlist.php?emailme=true&name=\' + this.form.name.value + \'&email=\' + this.form.email.value + \'&tel=\' + this.form.tel.value + \'&hospital=\' + this.form.hospital.value + \'&department=\' + this.form.department.value) }); return false;" type="submit" value="Send enquiry" name="submit" /></p></td><td> </td><td> </td></tr></tbody></table></form></div>');
$("#msgbox_actions").html('<input onclick="jQuery.facebox({ ajax: \'wishlist.php?basket=true\' })" type="button" value="Back to Wishlist" />');
}
</script>
<div id="msgbox_actions"><input onclick="quoteme()" type="button" value="Request quote/sample" /> <a class="backtoproducts" href="http://www.dtrmedical.com/products" style="border-bottom-left-radius:5px 5px;border-bottom-right-radius:5px 5px;border-bottom-style:none;border-color:initial;border-left-style:none;border-right-style:none;border-top-left-radius:5px 5px;border-top-right-radius:5px 5px;border-top-style:none;border-width:initial;color:white;font-family:Arial;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;font-size:11px;">Back to products</a></div><!-- <input type="submit" value="Update" /> --><!-- <input onclick="jQuery.facebox({ ajax: 'wishlist.php?emailme=true' })" type="button" value="Save list for later" /> --> <!-- <input type="submit" value="Update Qty's" /> <input onclick="jQuery.facebox({ ajax: 'wishlist.php?basket=true&clearall=true' })" type="button" value="Clear list" /> --></div>
</form>
In the line of starting with <div id="msgbox_actions">, at the end of it after the comments, is the extra </div>
This is breaking your html, which IE doesn't know how to fix, yet other browsers are able to.
Probably not the problem but my FireBug console tells me this when I click on the button:
"NetworkError: 404 Not Found - http://dtrmedical.com/xfade2.css"
It is not finding your CSS file for some reason or another.
Your onclick event isn't binding properly to your shopping cart div. I'm not sure why, exactly; IE8 may be buggy about parsing complicated HTML attributes like that properly.
Instead of defining the event inline (right inside of the HTML tag), try doing it via jQuery, instead. Add the following code to the beginning of your $.ready body.
$('#mybasket').click(function(){location.href='wishlist.php?basket=true';});
As a side note, you should always avoid defining any event handling in your HTML, instead taking the approach I describe above. Doing so not only means that all of your "action" code will be in once place, but it also affords you greater cross-browser support (especially when you leverage a library like jQuery).
i have one text box,if i press any alphabet it will display best match to that alphabet in div tag, problem is i have button which is exactly below to textbox when drop down comes button moves to the bottom,i dont want to move my button when list displays
can any body tell me how to achieve this
code:
<table border="0" width="300" cellspacing="0" cellpadding="0" datasrc="#Header">
<tr>
<td id="txt" >
<INPUT TYPE="text" name="text1" id="text1" size=36 maxlength=255 style="font-family: Arial; font-size: 13px; color: #808080"
value="Type your Search Here" onfocus="this.value= (this.value=='Type your Search Here') ? '' : this.value"
onKeyUp="doSuggest(this.value,event.keyCode);"/>
<div id = "theResults" style ="width:22em;border:0px black solid;padding-left:0px;padding-right:0px;visibility:hidden;"/>
</div>
<!-- inner html goes here -->
<input type="hidden" name="id1" id="id1"/>
</td>
</tr>
<!--<tr><td> <INPUT type="text" size="50" id="text1" name="text1" value="" onKeyUp="doSuggest(this.value,event.keyCode);"/></td></tr>-->
<tr>
<td>
<input type="button" name="btn" id="btn" value="show selected"
onclick='alert("selected values "+document.getElementById("text1").value+","+document.getElementById("id1").value);'/>
</td>
</tr>
</table>
Without seeing anything off your markup: try position: absolute in your CSS.