Drop Down Boxes...

JonB · 19 Dec 2006 at 12:03

...seem to crop off the longest value text like below...

Image

paulsheff · 19 Dec 2006 at 12:06

Hmm my FF does that sometimes, it usually shows a blank space where the last character should be then puts the whole name in when you click on the dropdown.

JonB · 19 Dec 2006 at 12:16

So, is it normal or is there a setting I can change?

Dr_Evil · 19 Dec 2006 at 12:18

try setting the width of the dropdown manually.

JonB · 19 Dec 2006 at 12:21

Tried that, didn't work

Dr_Evil · 19 Dec 2006 at 12:27

something is causing that DD to be cropped - can i see the full html of your page please? or a link to a live version of that page so i can further inspect this?

JonB · 19 Dec 2006 at 12:46

Ok, hold on.

JonB · 19 Dec 2006 at 12:52

Main Page

Code:

<?php	
  require 'inc/header_top.inc.php';
  require 'inc/header_bottom.inc.php';
  // This file is the front end for adding a computer instance to the database.

  // Database connection
  include("dbconnect.php");
  include("inc/functions.inc.php");
?>
<br />
<br />
<div align="left">
<?php
$page = 1;
?>
<form action="<?php $post = $_SERVER['PHP_SELF']; $post .= "?mode=2"; echo $post; ?>" method="post">

<fieldset><legend>Add a computer wizard...Page <?php echo $page;?> of 5</legend>

<p><b>Model:</b> 
Existing <input type="radio" name="model" value="existing" /> 
<?php
  //dynamically generate the Currently existing computer models into a drop down box.
  // Database Query's for computer_model info
  $comp_model_sql = "SELECT * FROM v_CompModel";
  $comp_model_result = mssql_query($comp_model_sql);
  $comp_model_numrows = mssql_num_rows($comp_model_result);
  //start of the drop down box echo
  echo "<select name=\"comp_model\" size=\"1\" >";
  //Loop the information through database
  for ($i=0; $i <$comp_model_numrows; $i++)
  {
    $comp_model_row = mssql_fetch_assoc($comp_model_result);
	echo "<option value=\"";
	echo stripslashes($comp_model_row['CompModelsID']);
	echo "\">";
	$comp_model_ManName = $comp_model_row['ManufacturerName'];
	$comp_model_Model = $comp_model_row['Model'];
	$comp_model = $comp_model_ManName . " " . $comp_model_Model;
	echo $comp_model;
	echo "</option>";
  }
  echo "</select>";
  ?>
</select><br />
New <input type="radio" name="model" value="new" /> 
Model Name: <input type="text" name="model_name" size="15" maxlength="30" />
Manufacturer:
<?php
  //dynamically generate the manufacturers into a drop down box.
  // Database Query's for manufacturer info
  $manufact_sql = "SELECT * FROM manufacturer WHERE comp = '1'";
  $manufact_result = mssql_query($manufact_sql);
  $manufact_numrows = mssql_num_rows($manufact_result);
  echo "<select name=\"manufacturer\" size=\"1\" >";
  for ($i=0; $i <$manufact_numrows; $i++)
  {
    $manufact_row = mssql_fetch_assoc($manufact_result);
	echo "<option value=\"";
	echo stripslashes($manufact_row['ManufacturerID']);
	echo "\">";
	echo stripslashes($manufact_row['ManufacturerName']);
	echo "</option>";
  }
  echo "</select>";
  ?>
</p>

<p><b>CPU:</b> 
Existing <input type="radio" name="cpu" value="existing" /> 
<?php
  //dynamically generate the Currently existing computer models into a drop down box.
  // Database Query's for computer_model info
  $cpu_exist_sql = "SELECT * FROM v_CpuExist";
  $cpu_exist_result = mssql_query($cpu_exist_sql);
  $cpu_exist_numrows = mssql_num_rows($cpu_exist_result);
  //start of the drop down box echo
  echo "<select name=\"cpu_exist\" size=\"1\" >";
  //Loop the information through database
  for ($i=0; $i <$cpu_exist_numrows; $i++)
  {
    $cpu_exist_row = mssql_fetch_assoc($cpu_exist_result);
	echo "<option value=\"";
	echo stripslashes($cpu_exist_row['CpuID']);
	echo "\">";
	$cpu_exist_Speed = $cpu_exist_row['CpuSpeed'];
	//work out if over a ghz
    if ($cpu_exist_Speed > 999){
    $ghz = "1000";
    $cpu_exist_Speed = $cpu_exist_Speed / $ghz;
    round ($cpuspeed, 1);
    $cpusymbol = "ghz";
    } else {
    $cpusymbol = "mhz";
    }
	//depending on what the speed is, print is slightly different.
	//To do with the speed numbers.
	//Output example ... 
	//3.4ghz Pentium4
	// or
	// 800mhz Pentium3 formatiing
	if ($cpusymbol == "ghz"){
    printf("%01.1f%s - %s", $cpu_exist_Speed, $cpusymbol, $cpu_exist_row['CpuType']);
    } else {
    printf("%s%s - %s", $cpu_exist_Speed, $cpusymbol, $cpu_exist_row['CpuType']);
    }
	echo "</option>";
  }
  echo "</select>";
  ?>
</select><br />
New <input type="radio" name="cpu" value="new" /> 
Cpu Type:
<?php
  //dynamically generate the cpu type into a drop down box.
  // Database Query's for cpu speed info
  $cpu_type_sql = "SELECT * FROM computer_cpu_type";
  $cpu_type_result = mssql_query($cpu_type_sql);
  $cpu_type_numrows = mssql_num_rows($cpu_type_result);
  echo "<select name=\"cpu_type\" size=\"1\" >";
  for ($i=0; $i <$cpu_type_numrows; $i++)
  {
    $cpu_type_row = mssql_fetch_assoc($cpu_type_result);
	echo "<option value=\"";
	echo stripslashes($cpu_type_row['CpuTypeID']);
	echo "\">";
	echo stripslashes($cpu_type_row['CpuType']);
	echo "</option>";
  }
  echo "</select>";
  ?>
 Cpu Speed:
<?php
  //dynamically generate the cpu speed into a drop down box.
  // Database Query's for cpu speed info
  $cpu_speed_sql = "SELECT * FROM computer_cpu_speed ORDER BY CpuSpeed DESC";
  $cpu_speed_result = mssql_query($cpu_speed_sql);
  $cpu_speed_numrows = mssql_num_rows($cpu_speed_result);
  echo "<select name=\"cpu_speed\" size=\"1\">";
  for ($i=0; $i <$cpu_speed_numrows; $i++)
  {
    $cpu_speed_row = mssql_fetch_assoc($cpu_speed_result);
	echo "<option value=\"";
	echo stripslashes($cpu_speed_row['CpuSpeedID']);
	echo "\">";
	echo stripslashes($cpu_speed_row['CpuSpeed']);
	echo "</option>";
  }
  echo "</select>";
  ?>
</p>

<p><b>Ram:</b> <input type="text" name="ram" size="4" maxlength="4" /><input type="radio" name="ram" value="gb" />gb <input type="radio" name="ram" value="mb" />mb </p>

<p><b>HDD:</b> <input type="text" name="HDD" size="4" maxlength="4" />gb</p>

<p><b>Description:</b><br /><small>Put each additional item on a new line. Include things like "Additional network card" or "DVD-RW" etc.</small><br /> <textarea name="additional" cols="40" rows="5"></textarea></p>

<p><b>Serial No:</b> <input type="text" name="serial" size="15" maxlength="30" />  <b>Asset Tag No:</b> <input type="text" name="asset" size="6" maxlength="6" /></p>
<p><b>Supplier:</b>  
<?php
  //dynamically generate the supplier info into a drop down box.
  // Database Query's for supplier info
  $suppliers_sql = "SELECT SupplierID, Name FROM suppliers ORDER BY Name ASC";
  $suppliers_result = mssql_query($suppliers_sql);
  $suppliers_numrows = mssql_num_rows($suppliers_result);
  echo "<select name=\"cpu_speed\" size=\"1\">";
  for ($i=0; $i <$suppliers_numrows; $i++)
  {
    $suppliers_row = mssql_fetch_assoc($suppliers_result);
	echo "<option value=\"";
	echo stripslashes($suppliers_row['SupplierID']);
	echo "\">";
	echo stripslashes($suppliers_row['Name']);
	echo "</option>";
  }
  echo "</select>";
?>
<b> Date Supplied: </b><?php $dates = getdate(); make_calendar_pulldown ($dates['month'], $dates['mday'], $dates['year']);?></p>

</fieldset>
	
<div align="center"><input type="submit" name="submit" value="Submit" /></div>
</form>
</div>
<br />
<br />
<?php
	require "inc/footer.inc.php";
?>

Header Top Include

Code:

<!-- header_top.inc.php - generic upper header for html pages
****
**** See DOCS/CHANGELOG for version information
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
<title>ITIS Asset Management</title>
<style type="text/css" media="all">
@import "css/idm.css";
@import "thickbox/thickbox.css";
</style>
<script type="text/javascript" src="thickbox/jquery-latest.js"></script>
<script type="text/javascript" src="thickbox/thickbox.js"></script>
<script type="text/javascript" language="JavaScript">

Header Bottom

Code:

</script>
</head>
<body link="#0000FF" vlink="#00000FF">
<table width="100%"  border="0">
  <tr>
    <td height="59" class="Head1">ITIS Holdings PLC - Asset Management System</td>
    <td height="59" class="Head1"></td>
    <td rowspan="2" align="right"><img src="gfx/itislogo.gif" width="89" height="83"></td>
  </tr>
  <tr>
    <td colspan="2" class="smallbold">User : Jonathan Blower<br>Location : Test</td>
  </tr>
  <tr>
    <td colspan="2" class="smallbold">
    </td>
    <td class="smallbold" align="right">
      <a class="smallbold" href="#">Main Menu</a> / <a class="smallbold" href="#">Log Off</a>
    </td>
  </tr>
</table>
<hr>

Footer Include

Code:

<!-- footer.inc.php - generic footer for html pages
****
**** See DOCS/CHANGELOG for version information
-->
<hr>
<table width="100%" border="0">
  <tr class="FormBodyMini">
    <td width="80%"></td>
    <td width="20%" align="right">
	Asset Management
    </td>
  </tr>
</table>
</body></html>

CSS

Code:

/* idm.css - style sheet for project
**
** See DOCS/CHANGELOG for version information
*/

a {
text-decoration: none;
color: #CC0000;
}

a:hover {
text-decoration: underline;
color: #999999;
}

.textbutton {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
font-weight: bold;
color: #999999;
}

a.smallbold {
text-decoration: none;
color: #3333CC;
}
a.smallbold:hover {
text-decoration: underline;
color: #FFCC00;
}

.smallbold {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
font-weight: bold;
color: #000000;
}

.small {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
color: #000000;
}

.Head1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-large;
font-weight: normal;
}

.Link1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
font-weight: bold;
}
.mmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
color: #000000;
width: 500px;
border-style: solid;
border-width: 1px;
}
.littlemenutd {
border-style: solid;
border-width: 1px;
}
.littlemenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}

Dr_Evil · 19 Dec 2006 at 14:44

can you just post the output HTML please?

riddlermarc · 19 Dec 2006 at 15:18

So defining the width via style info doesn't work? Something like:

echo "<select name=\"manufacturer\" size=\"1\" style=\"width:130px\">";

Setting it that way works for me :confused:

Dr_Evil · 19 Dec 2006 at 15:24

unless another container has a width setting that will override your browser to render the DD at 130px - e.g. a DIV with a certain width and with overflow=none or a table - that's why i want to see the full output HTML...

riddlermarc · 19 Dec 2006 at 15:28

Dr_Evil said:
unless another container has a width setting that will override your browser to render the DD at 130px - e.g. a DIV with a certain width and with overflow=none or a table - that's why i want to see the full output HTML...

I see what you are saying, but I didn't immediately spy anything in his source code.. mind you, the contents of

@import "thickbox/thickbox.css";

aren't listed?

Dr_Evil · 19 Dec 2006 at 15:33

I need to see the HTML output of the dropdown and surrounding tables and div's (so basically the body of the page as it's rendered to the browser)...

maybe he has a fixed with in his table or other containers, that will override the width in his dropdown, forcing it to resize.

JonB · 19 Dec 2006 at 16:20

riddlermarc said:
So defining the width via style info doesn't work? Something like:

echo "<select name=\"manufacturer\" size=\"1\" style=\"width:130px\">";

Setting it that way works for me

Yeah that works....

html output...

Code:

<!-- header_top.inc.php - generic upper header for html pages
****
**** See DOCS/CHANGELOG for version information
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
<title>ITIS Asset Management</title>
<style type="text/css" media="all">
@import "css/idm.css";
@import "thickbox/thickbox.css";
</style>
<script type="text/javascript" src="thickbox/jquery-latest.js"></script>
<script type="text/javascript" src="thickbox/thickbox.js"></script>
<script type="text/javascript" language="JavaScript"></script>
</head>

<body link="#0000FF" vlink="#00000FF">
<table width="100%"  border="0">
  <tr>
    <td height="59" class="Head1">ITIS Holdings PLC - Asset Management System</td>
    <td height="59" class="Head1"></td>
    <td rowspan="2" align="right"><img src="gfx/itislogo.gif" width="89" height="83"></td>
  </tr>
  <tr>
    <td colspan="2" class="smallbold">User : Jonathan Blower<br>Location : Test</td>

  </tr>
  <tr>
    <td colspan="2" class="smallbold">
    </td>
    <td class="smallbold" align="right">
      <a class="smallbold" href="#">Main Menu</a> / <a class="smallbold" href="#">Log Off</a>
    </td>

  </tr>
</table>
<hr>

<br />
<br />
<div align="left">
<form action="/jblower/assets/computer_wizard.php?mode=2" method="post">

<fieldset><legend>Add a computer wizard...Page 1 of 5</legend>

<p><b>Model:</b> 
Existing <input type="radio" name="model" value="existing" /> 

<select name="comp_model" size="1" ><option value="2">Dell Optiplex 170L</option><option value="8">Dell Optiplex GX150</option><option value="3">Dell Optiplex GX620</option><option value="9">Dell Precision WorkStation 370</option><option value="6">HP Compaq nx6110</option><option value="4">HP Compaq nx6310</option></select></select><br />
New <input type="radio" name="model" value="new" /> 
Model Name: <input type="text" name="model_name" size="15" maxlength="30" />
Manufacturer:
<select name="manufacturer" size="1" ><option value="1">Dell</option><option value="3">HP</option></select></p>

<p><b>CPU:</b> 

Existing <input type="radio" name="cpu" value="existing" /> 
<select name="cpu_exist" size="1" ><option value="3">3.4ghz - Pentium D</option><option value="1">3.0ghz - Pentium 4</option><option value="2">3.0ghz - Pentium D</option><option value="4">2.8ghz - Pentium 4</option><option value="7">1.7ghz - Celron M</option><option value="8">1.6ghz - Core 2 T5500</option><option value="6">1.6ghz - Pentium M</option><option value="5">1.0ghz - Pentium 3</option><option value="9">800mhz - Pentium 3</option></select></select><br />
New <input type="radio" name="cpu" value="new" /> 
Cpu Type:
<select name="cpu_type" size="1" ><option value="1">Pentium 4</option><option value="2">Pentium 3</option><option value="3">Pentium D</option><option value="4">Celron M</option><option value="5">Pentium M</option><option value="6">Core 2 T5500</option></select> Cpu Speed:

<select name="cpu_speed" size="1"><option value="40">4000</option><option value="39">3900</option><option value="38">3800</option><option value="37">3700</option><option value="36">3600</option><option value="35">3500</option><option value="34">3400</option><option value="33">3300</option><option value="32">3200</option><option value="31">3100</option><option value="30">3000</option><option value="29">2900</option><option value="28">2800</option><option value="27">2700</option><option value="26">2600</option><option value="25">2500</option><option value="24">2400</option><option value="23">2300</option><option value="22">2200</option><option value="21">2100</option><option value="20">2000</option><option value="19">1900</option><option value="18">1800</option><option value="17">1700</option><option value="16">1600</option><option value="15">1500</option><option value="14">1400</option><option value="13">1300</option><option value="12">1200</option><option value="11">1100</option><option value="10">1000</option><option value="9">900</option><option value="8">800</option><option value="7">700</option><option value="6">600</option><option value="5">500</option><option value="4">400</option><option value="3">300</option><option value="2">200</option><option value="1">100</option></select></p>

<p><b>Ram:</b> <input type="text" name="ram" size="4" maxlength="4" /><input type="radio" name="ram" value="gb" />gb <input type="radio" name="ram" value="mb" />mb </p>

<p><b>HDD:</b> <input type="text" name="HDD" size="4" maxlength="4" />gb</p>

<p><b>Description:</b><br /><small>Put each additional item on a new line. Include things like "Additional network card" or "DVD-RW" etc.</small><br /> <textarea name="additional" cols="40" rows="5"></textarea></p>

<p><b>Serial No:</b> <input type="text" name="serial" size="15" maxlength="30" />  <b>Asset Tag No:</b> <input type="text" name="asset" size="6" maxlength="6" /></p>
<p><b>Supplier:</b>  
<select name="cpu_speed" style="width:150px" size="1"><option value="6">Aria</option><option value="1">Dell UK</option><option value="3">Lima Networks</option></select><b> Date Supplied: </b><select name="month"><option value="1">January</option>
<option value="2">February</option>

<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>

<option value="12" selected="selected">December</option>
</select>
	<select name="day"><option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>

<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>

<option value="17">17</option>
<option value="18">18</option>
<option value="19" selected="selected">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>

<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
	<select name="year"><option value="2000">2000</option>
<option value="2001">2001</option>

<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>

<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>

<option value="2020">2020</option>
</select></p>

</fieldset>
	
<div align="center"><input type="submit" name="submit" value="Submit" /></div>
</form>
</div>
<br />
<br />
<!-- footer.inc.php - generic footer for html pages
****
**** Author : John O'Reilly
**** See DOCS/CHANGELOG for version information
-->
<hr>
<table width="100%" border="0">
  <tr class="FormBodyMini">
    <td width="80%"></td>

    <td width="20%" align="right">
	Asset Management
    </td>
  </tr>
</table>
</body></html>

JonB · 19 Dec 2006 at 16:21

Is there no way to get it to auto generate the width of the box, depending on the longest value?

EDIT: you may also notice that html isnt my strongest point

Dr_Evil · 19 Dec 2006 at 17:27

Hey - i copied your html in a new page here and ran it in my browser - i can't seem to find any problem with your dropdowns!!

JonB · 19 Dec 2006 at 18:59

Work's fine at home!

Nevermind I guess, it's only some internal work! I'd be a bit more worried if it were going out of house! Ah well, have to put up with it I guess...

Thanks anyway

LazyManc · 20 Dec 2006 at 01:11

This can happen if you use the universal selector...

Code:

* {
margin: 0;
padding: 0;
}

try setting the margin /padding on the select.

JonB · 21 Dec 2006 at 10:06

Ok thanks. I'll give that a go with thickbox, as I isolated that as the problem. I removed the CSS file for thickbox and everything looked fine.