Im trying to make a search bar like google, i have it all pretty much worked out, im just not sure how to make the search bar wider, heres the code i have so far
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<FORM name="doingasearch" id="doingasearch">
<p align="center"><INPUT name=searchbox type=text size=20></p>
<p align="center"><INPUT type="button" value="Search" onclick="return
googleSearch();">
<INPUT type="button" value="I Feel Lucky" onclick="return googleSearch
();"></p>
</FORM>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
If you find anything wrong with it, please say so
You could either do it in your HTML:
<input name="searchbox" type="text" size="40" />
Or you could do it the right way, with CSS:
input {
width: 200px;
}
You should refrain from tables when using search forms. Anyways, you could do two things here.
Either remove the size="20" from the searchbox <input> and change the width in CSS or you can increase the <input> size.
like this:
input {
width: XXpx;
}
Related
I have three <input type="submit" /> elements arranged vertically. The top two are in the same <div> and <table>, but the bottom one is in a different <div> and <table>. I can't change this, as it is for UX purposes in the context of the larger page from which this is just a snippet. My third button is an extra few pixels too low, such that the spacing between these three buttons is inconsistent.
I would like to not have to do a junky vertical-align: -2px or something like that. What I'd like is to gain some understanding as to why the spacing is inconsistent. Thanks for reading.
Here is a JSFiddle example:
https://jsfiddle.net/y57wLtjb/
use border-spacing: 0; for table
table {
border-collapse: collapse;
border-spacing: 0;
}
<div id="pre-update-section">
<table>
<tr>
<td><input style="width:100%" type="submit" value="Check for duplicates" data-bind="click: CheckForDuplicates" id="btnCheckDups" /></td>
<td><label id="ajaxStatusMsg"></label></td>
</tr>
<tr>
<td><input style="width:100%" type="submit" value="Load Catalog Parts" data-bind="click: LoadCatalogParts" id="btnLoadCatalogParts" disabled="disabled" /></td>
<td></td>
</tr>
</table>
</div>
<div id="start-update-section">
<table >
<tr>
<td><input style="width:100%" type="submit" value="Run Catalog Update" data-bind="click: RunCatalogUpdate" id="btnRunCatalogUpdate" disabled="disabled" /></td>
<td>
</td>
</tr>
</table>
</div>
I am using Bootstrap 2.3 and I have like 7 text input fields inside a table that uses bootstrap table style. I would like to resize (or shrink the width of) these text inputs instead of taking the whole width of the table cell but I could not do that
I tried to use the class of span1 but it did not shrink them well. So is there any way of minimizing the size or width of all text input fields within the table cell?
Here's my code:
<table class="table table-bordered">
<thead>
<tr>
<th>Exercise</th>
<th>Exercise Code</th>
<th>Initiated by</th>
<th>Initiated on</th>
<th>Done by</th>
<th>Q1</th>
<th>Q2</th>
<th>Q3</th>
<th>Q4</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="input-mini span1" />
</td>
<td>
<input type="text" class="input-mini span1" />
</td>
<td>
<input type="text" class="input-mini span1" />
</td>
<td>
<input type="text" class="input-mini span1" />
</td>
<td>
<input type="text" class="input-mini span1" />
</td>
<td>
<input type="text" class="input-mini span1" />
</td>
<td>
<input type="text" class="input-mini span1" />
</td>
<td>
<input type="text" class="input-mini span1" />
</td>
<td>
<input type="text" class="input-mini span1" />
</td>
<td>
For Action
</td>
</tr>
</tbody>
</table>
Since you have access to JQuery, try doing this in your <header> area of html, but be sure it is after all Javascript includes.
<script type="text/javascript">
$(".span1").css("width", "10px");
</script>
If the above works, I think you need to update your original post to show all your js/css includes. This seems like you just have something in the wrong order.
--Original Answer Below--
Could you not simply add a CSS entry in your header like:
.table > input[type="text"] {
width: 10px;
}
The only negative is that this will change all table type=text elements that use the .table class.
So instead, have the table itself have the span1 tag and change the above code to reflect it?
.span1 > input[type="text"] {
width: 10px;
}
*Note: Make sure this is AFTER you reference the bootstrap css.
I have the following for Google Chrome:
<table>
<tr>
<td width="80px">
Text
<td width="100%">
<form>
<input style="width:100%" type="text"/>
<button>Submit</button>
</form>
</td>
<td width="80px">
Text
</td>
</tr>
</table>
The problem is when you resize the screen to something small, the Submit button wraps around under the textbox. How do I keep the "button" from wrapping (as in the button shows up below the textbox by a few pixels), while keeping the text box as wide as possible?
http://jsfiddle.net/N36a7/
<form>
<table>
<tr>
<td width="80px">Text</td>
<td width="100%">
<input style="width:100%" type="text"/>
</td>
<td>
<button>Submit</button>
</td>
<td width="80px">Text</td>
</tr>
</table>
</form>
Just give the button it's own td.
First, add the following styles to the form to prevent it from wrapping:
form{
white-space: nowrap;
}
Then remove the style width=100% from the input, which causes it to occupy all of the horizontal space within the td.
JS Fiddle: http://jsfiddle.net/B4eWz/
I am facing a browser issue. I need to create two "form" in which <td> is present. But problem is that after creating second "form" the <td> goes to new row. This problem is only on Internet Explorer not on Firefox.
Code is as follows:
<form name="myform" action="registerUser" onsubmit="return verifyEmail();" method="post">
<tr>
<td align="left" valign="top" style="padding-left:2px;">
<%
String emailAddress = request.getParameter("emailAddress");
%>
<input class="sign-in-textbox" name="emailAddress" id="emailAddress" onfocus="clearMessage(this,'Enter your work email address');" value="Enter your work email address" onblur="fillMessage(this,'Enter your work email address');"/>
<br/>
</td>
</tr>
<tr>
<td align="left" valign="top" style="padding-top:5px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="49%" align="left" valign="middle" style="padding-top:2px;">
<input type="submit" class="p-signinbutton" id="register" value="Join" width="78"/>
</td>
</form>
<form name="continueAsGuest" action="guestLogin.do" onsubmit="return continueAsGuest();" method="get">
<td width="50%" align="left" valign="middle"><input type="submit" class="p-signinbutton" id="continueAsGuest" value="Continue as Guest" width="85"/></td>
</tr>
</table>
</tr>
</form>
The HTML is not valid. Try moving the form tags inside the table elements. The second form is easily fixed with:
<td width="50%" align="left" valign="middle">
<form name="continueAsGuest" action="guestLogin.do" onsubmit="return continueAsGuest();" method="get">
<input type="submit" class="p-signinbutton" id="continueAsGuest" value="Continue as Guest" width="85"/>
</form>
</td>
The first one is harder to make valid, but it might work if you put the <form> tag inside the first <td> and the </form> tag one line higher inside the previous <td>.
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="38%" id="AutoNumber1" background="bg.jpg" height="177">
<tr>
<FORM onkeydown=highlight(event) onkeyup=highlight(event)
onclick=highlight(event) name=f
action=http://www.example.com/products/scripts/tpd.php method=GET> ( How to This Link hide )
<input type="hidden" name="key" value="tpd12"/>
<DIV align=center>
<td width="58%" height="3"> </td>
<td width="42%" height="3"> </td>
</tr>
<tr>
<td width="58%" height="15">
<p align="right"><b><font color="#C0C0C0"><br>
<br>
<br>
</font></b></td>
<td width="42%" height="15"><b><font color="#C0C0C0"><br>
<br>
</font></b></td>
</tr>
<tr>
<td width="58%" height="50">
<p align="right"><font color="#C0C0C0"><b>Phone #</b></font></td>
<td width="42%" height="50"><b><font color="#C0C0C0"> </font></b>
<input type="hidden" name="searchby" value="Phone"/>
<input type="hidden" name="city" value="xyz"/>
<input type="text" name="entry" size="12"></td>
</tr>
<tr>
<td width="58%" height="106"> </td>
<td width="42%" height="106" valign="top">
<input type="submit" value="Search" name="search"></td>
</tr>
</table>
Example Images
image code #1: www.koolfree.com/ImageUpload/uploads/1264733802.jpg
code preview result #2: www.koolfree.com/ImageUpload/uploads/1264722405.jpg
Plz help me how to set this script
thanks in advance
You need to add quotes around the parameter values.
Change
<FORM onkeydown=highlight(event) onkeyup=highlight(event) onclick=highlight(event) name=f action=http://www.example.com/products/scripts/tpd.php method=GET>
To
<FORM onkeydown="highlight(event)" onkeyup="highlight(event)" onclick"highlight(event)" name="f" action="http://www.example.com/products/scripts/tpd.php" method="GET">
It would be simple to use an HTML validator rather asking others for help.
You can use javascript (jquery comes to mind) to bind all kinds of events to almost any DOM element, and in my opinion it'll generate cleaner code to if you don't use the onclick, onkeydown, etc. calls in the HTML, but rather put all of that in a js file and just bind event handlers with functions to the FORM element.
Makes sense?