Fix: jmobile broken with css tagtable, tagtr and tagtd

This commit is contained in:
Laurent Destailleur 2013-12-02 22:31:02 +01:00
parent a3372a9a0a
commit 6c7e173bba
7 changed files with 99 additions and 74 deletions

View File

@ -14,7 +14,7 @@
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*
* This template needs:
* $object
*/
@ -47,77 +47,77 @@ $userstatic=new User($db);
<div class="tagtable centpercent noborder allwidth">
<?php if ($permission) { ?>
<form class="liste_titre">
<div><?php echo $langs->trans("Source"); ?></div>
<div><?php echo $langs->trans("Company"); ?></div>
<div><?php echo $langs->trans("Contacts"); ?></div>
<div><?php echo $langs->trans("ContactType"); ?></div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<form class="tagtr liste_titre">
<div class="tagtd"><?php echo $langs->trans("Source"); ?></div>
<div class="tagtd"><?php echo $langs->trans("Company"); ?></div>
<div class="tagtd"><?php echo $langs->trans("Contacts"); ?></div>
<div class="tagtd"><?php echo $langs->trans("ContactType"); ?></div>
<div class="tagtd">&nbsp;</div>
<div class="tagtd">&nbsp;</div>
</form>
<?php $var=false; ?>
<form <?php echo $bc[$var]; ?> action="<?php echo $_SERVER["PHP_SELF"].'?id='.$object->id; ?>" method="POST">
<form class="tagtr impair" action="<?php echo $_SERVER["PHP_SELF"].'?id='.$object->id; ?>" method="POST">
<input type="hidden" name="token" value="<?php echo $_SESSION['newtoken']; ?>" />
<input type="hidden" name="id" value="<?php echo $object->id; ?>" />
<input type="hidden" name="action" value="addcontact" />
<input type="hidden" name="source" value="internal" />
<div class="nowrap"><?php echo img_object('','user').' '.$langs->trans("Users"); ?></div>
<div><?php echo $conf->global->MAIN_INFO_SOCIETE_NOM; ?></div>
<div><?php echo $form->select_dolusers($user->id, 'userid', 0, (! empty($userAlreadySelected)?$userAlreadySelected:null), 0, null, null, 0, 56); ?></div>
<div><?php echo $formcompany->selectTypeContact($object, '', 'type','internal'); ?></div>
<div>&nbsp;</div>
<div align="right"><input type="submit" class="button" value="<?php echo $langs->trans("Add"); ?>"></div>
<div class="nowrap tagtd"><?php echo img_object('','user').' '.$langs->trans("Users"); ?></div>
<div class="tagtd"><?php echo $conf->global->MAIN_INFO_SOCIETE_NOM; ?></div>
<div class="tagtd maxwidthonsmartphone"><?php echo $form->select_dolusers($user->id, 'userid', 0, (! empty($userAlreadySelected)?$userAlreadySelected:null), 0, null, null, 0, 56); ?></div>
<div class="tagtd maxwidthonsmartphone"><?php echo $formcompany->selectTypeContact($object, '', 'type','internal'); ?></div>
<div class="tagtd">&nbsp;</div>
<div class="tagtd" align="right"><input type="submit" class="button" value="<?php echo $langs->trans("Add"); ?>"></div>
</form>
<?php $var=!$var; ?>
<form <?php echo $bc[$var]; ?> action="<?php echo $_SERVER["PHP_SELF"].'?id='.$object->id; ?>" method="POST">
<form class="tagtr pair" action="<?php echo $_SERVER["PHP_SELF"].'?id='.$object->id; ?>" method="POST">
<input type="hidden" name="token" value="<?php echo $_SESSION['newtoken']; ?>" />
<input type="hidden" name="id" value="<?php echo $object->id; ?>" />
<input type="hidden" name="action" value="addcontact" />
<input type="hidden" name="source" value="external" />
<div class="nowrap"><?php echo img_object('','contact').' '.$langs->trans("ThirdPartyContacts"); ?></div>
<div class="tagtd nowrap"><?php echo img_object('','contact').' '.$langs->trans("ThirdPartyContacts"); ?></div>
<?php if ($conf->use_javascript_ajax && ! empty($conf->global->COMPANY_USE_SEARCH_TO_SELECT)) { ?>
<div class="nowrap">
<div class="tagtd nowrap maxwidthonsmartphone">
<?php
$events=array();
$events[]=array('method' => 'getContacts', 'url' => dol_buildpath('/core/ajax/contacts.php',1), 'htmlname' => 'contactid', 'params' => array('add-customer-contact' => 'disabled'));
print $form->select_company($object->socid,'socid','',1,0,0,$events);
?>
</div>
<div>
<div class="tagtd maxwidthonsmartphone">
<?php $nbofcontacts=$form->select_contacts($object->socid, '', 'contactid'); ?>
</div>
<?php } else { ?>
<div>
<div class="tagtd maxwidthonsmartphone">
<?php $selectedCompany = isset($_GET["newcompany"])?$_GET["newcompany"]:$object->socid; ?>
<?php $selectedCompany = $formcompany->selectCompaniesForNewContact($object, 'id', $selectedCompany, 'newcompany'); ?>
</div>
<div>
<div class="tagtd maxwidthonsmartphone">
<?php $nbofcontacts=$form->select_contacts($selectedCompany, '', 'contactid'); ?>
</div>
<?php } ?>
<div>
<div class="tagtd maxwidthonsmartphone">
<?php $formcompany->selectTypeContact($object, '', 'type','external'); ?>
</div>
<div>&nbsp;</div>
<div align="right">
<div class="tagtd">&nbsp;</div>
<div class="tagtd" align="right">
<input type="submit" id="add-customer-contact" class="button" value="<?php echo $langs->trans("Add"); ?>"<?php if (! $nbofcontacts) echo ' disabled="disabled"'; ?>>
</div>
</form>
<?php } ?>
<form class="liste_titre">
<div><?php echo $langs->trans("Source"); ?></div>
<div><?php echo $langs->trans("Company"); ?></div>
<div><?php echo $langs->trans("Contacts"); ?></div>
<div><?php echo $langs->trans("ContactType"); ?></div>
<div align="center"><?php echo $langs->trans("Status"); ?></div>
<div>&nbsp;</div>
<form class="tagtr liste_titre">
<div class="tagtd"><?php echo $langs->trans("Source"); ?></div>
<div class="tagtd"><?php echo $langs->trans("Company"); ?></div>
<div class="tagtd"><?php echo $langs->trans("Contacts"); ?></div>
<div class="tagtd"><?php echo $langs->trans("ContactType"); ?></div>
<div class="tagtd" align="center"><?php echo $langs->trans("Status"); ?></div>
<div class="tagtd">&nbsp;</div>
</form>
<?php $var=true; ?>
@ -132,12 +132,12 @@ $userstatic=new User($db);
$var = !$var;
?>
<form <?php echo $bc[$var]; ?>>
<div align="left">
<form class="tagtr <?php echo $var?"pair":"impair"; ?>">
<div class="tagtd" align="left">
<?php if ($tab[$i]['source']=='internal') echo $langs->trans("User"); ?>
<?php if ($tab[$i]['source']=='external') echo $langs->trans("ThirdPartyContact"); ?>
</div>
<div align="left">
<div class="tagtd" align="left">
<?php
if ($tab[$i]['socid'] > 0)
{
@ -154,7 +154,7 @@ $userstatic=new User($db);
}
?>
</div>
<div>
<div class="tagtd">
<?php
if ($tab[$i]['source']=='internal')
{
@ -172,13 +172,28 @@ $userstatic=new User($db);
}
?>
</div>
<div><?php echo $tab[$i]['libelle']; ?></div>
<div align="center">
<div class="tagtd"><?php echo $tab[$i]['libelle']; ?></div>
<div class="tagtd" align="center">
<?php if ($object->statut >= 0) echo '<a href="'.$_SERVER['PHP_SELF'].'?id='.$object->id.'&amp;action=swapstatut&amp;ligne='.$tab[$i]['rowid'].'">'; ?>
<?php echo $contactstatic->LibStatut($tab[$i]['status'],3); ?>
<?php
if ($tab[$i]['source']=='internal')
{
$userstatic->id=$tab[$i]['id'];
$userstatic->lastname=$tab[$i]['lastname'];
$userstatic->firstname=$tab[$i]['firstname'];
//echo $userstatic->LibStatut($tab[$i]['status'],3);
}
if ($tab[$i]['source']=='external')
{
$contactstatic->id=$tab[$i]['id'];
$contactstatic->lastname=$tab[$i]['lastname'];
$contactstatic->firstname=$tab[$i]['firstname'];
echo $contactstatic->LibStatut($tab[$i]['status'],3);
}
?>
<?php if ($object->statut >= 0) echo '</a>'; ?>
</div>
<div align="center" class="nowrap">
<div class="tagtd nowrap" align="center">
<?php if ($permission) { ?>
&nbsp;<a href="<?php echo $_SERVER["PHP_SELF"].'?id='.$object->id.'&amp;action=deletecontact&amp;lineid='.$tab[$i]['rowid']; ?>"><?php echo img_delete(); ?></a>
<?php } ?>

View File

@ -44,48 +44,68 @@ This page is a sample of page using tables. To make test with<br>
<br>
Example 0 : Table with div and table with table containg a select that should be overflowed and truncated<br>
<div style="display: table;"><div style="display: table-row"><div style="display: table-cell; overflow: hidden; white-space: nowrap; max-width: 100px;"> <!-- If you remove max-width, the jmobile overflow does not work -->
<select name="hidedetails"><option>aaaaaaaaaaaaaaafd sf sf gfd gfds fsd gfd fhfg hf dhfg hg fhfgdhfgdh gh gfdhdgf h gfdh dfhg dfgh dfgh fdgh gfd hfd hfd gs fgdf gaaaa</option><option>gdfs gdf g sdfg dfg fdsg dsfg dfs gdfs gds fgs gdfdf gd</option></select>
</div></div></div>
<br>
<table width="100%">
<tr><td style="max-width:100px; overflow: hidden; white-space: nowrap;"> <!-- If you remove max-width, the jmobile overflow does not work -->
Example 0a : Table with div+div+div containg a select that should be overflowed and truncated<br>
<div class="tagtable centpercent">
<div class="tagtr">
<div class="tagtd" style="overflow: hidden; white-space: nowrap; max-width: 100px;"> <!-- If you remove max-width, the jmobile overflow does not work -->
<select name="hidedetails"><option>aaaaaaaaaaaaaaafd sf sf gfd gfds fsd gfd fhfg hf dhfg hg fhfgdhfgdh gh gfdhdgf h gfdh dfhg dfgh dfgh fdgh gfd hfd hfd gs fgdf gaaaa</option><option>gdfs gdf g sdfg dfg fdsg dsfg dfs gdfs gds fgs gdfdf gd</option></select>
</td></tr>
</div>
<div class="tagtd" style="overflow: hidden; white-space: nowrap; max-width: 100px;"> <!-- If you remove max-width, the jmobile overflow does not work -->
<select name="hidedetails"><option>aaaaaaaaaaaaaaafd sf sf gfd gfds fsd gfd fhfg hf dhfg hg fhfgdhfgdh gh gfdhdgf h gfdh dfhg dfgh dfgh fdgh gfd hfd hfd gs fgdf gaaaa</option><option>gdfs gdf g sdfg dfg fdsg dsfg dfs gdfs gds fgs gdfdf gd</option></select>
</div>
</div>
</div>
Example 0b: Table with div+form+div containg a select that should be overflowed and truncated<br>
<div class="tagtable centpercent">
<form action="xxx" method="POST" class="tagtr">
<div class="tagtd" style="max-width:100px; overflow: hidden; white-space: nowrap;"> <!-- If you remove max-width, the jmobile overflow does not work -->
<select name="hidedetails"><option>aaaaaaaaaaaaaaafd sf sf gfd gfds fsd gfd fhfg hf dhfg hg fhfgdhfgdh gh gfdhdgf h gfdh dfhg dfgh dfgh fdgh gfd hfd hfd gs fgdf gaaaa</option><option>gdfs gdf g sdfg dfg fdsg dsfg dfs gdfs gds fgs gdfdf gd</option></select>
</div>
<div class="tagtd" style="max-width:100px; overflow: hidden; white-space: nowrap;"> <!-- If you remove max-width, the jmobile overflow does not work -->
<select name="hidedetails"><option>aaaaaaaaaaaaaaafd sf sf gfd gfds fsd gfd fhfg hf dhfg hg fhfgdhfgdh gh gfdhdgf h gfdh dfhg dfgh dfgh fdgh gfd hfd hfd gs fgdf gaaaa</option><option>gdfs gdf g sdfg dfg fdsg dsfg dfs gdfs gds fgs gdfdf gd</option></select>
</div>
</form>
</div>
Example 0c: Table with table+tr+td containg a select that should be overflowed and truncated<br>
<table class="centpercent">
<tr>
<td class="tagtd" style="max-width:100px; overflow: hidden; white-space: nowrap;"> <!-- If you remove max-width, the jmobile overflow does not work -->
<select name="hidedetails"><option>aaaaaaaaaaaaaaafd sf sf gfd gfds fsd gfd fhfg hf dhfg hg fhfgdhfgdh gh gfdhdgf h gfdh dfhg dfgh dfgh fdgh gfd hfd hfd gs fgdf gaaaa</option><option>gdfs gdf g sdfg dfg fdsg dsfg dfs gdfs gds fgs gdfdf gd</option></select>
</td>
<td class="tagtd" style="max-width:100px; overflow: hidden; white-space: nowrap;"> <!-- If you remove max-width, the jmobile overflow does not work -->
<select name="hidedetails"><option>aaaaaaaaaaaaaaafd sf sf gfd gfds fsd gfd fhfg hf dhfg hg fhfgdhfgdh gh gfdhdgf h gfdh dfhg dfgh dfgh fdgh gfd hfd hfd gs fgdf gaaaa</option><option>gdfs gdf g sdfg dfg fdsg dsfg dfs gdfs gds fgs gdfdf gd</option></select>
</td>
</tr>
</table>
<br>
Example 1 : Table using tags: div.tagtable+form+div or div.tagtable+div.tagtr+div.tagtd<br>
Example 1 : Table using tags: div.tagtable+div.tagtr+div or div.tagtable+div.tagtr+div.tagtd<br>
<?php
$tasksarray=array(1,2,3); // To force having several lines
$tagidfortablednd='tablelines';
if (! empty($conf->use_javascript_ajax) && $object->statut == 0) include DOL_DOCUMENT_ROOT.'/core/tpl/ajaxrow.tpl.php';
?>
<div class="tagtable centpercent" id="tablelines">
<div class="liste_titre">
<div>line3<input type="hidden" name="cartitem" value="3"></div>
<div>dfsdf</div>
<div>ffdsfsd</div>
<div class="tdlineupdown">aaaa</div>
<div class="tagtr liste_titre">
<div class="tagtd">line3<input type="hidden" name="cartitem" value="3"></div>
<div class="tagtd">dfsdf</div>
<div class="tagtd">ffdsfsd</div>
<div class="tagtd tdlineupdown">aaaa</div>
</div>
<div class="impair tagtr">
<div>line4<input type="hidden" name="cartitem" value="3"></div>
<div>dfsdf</div>
<div><input name="count" value="4"></div>
<div class="tdlineupdown">bbbb</div>
<div class="tagtd">line4<input type="hidden" name="cartitem" value="3"></div>
<div class="tagtd">dfsdf</div>
<div class="tagtd"><input name="count" value="4"></div>
<div class="tagtd tdlineupdown">bbbb</div>
</div>
<div class="pair tagtr">
<div>line5<input type="hidden" name="cartitemb" value="3"></div>
<div>dfsdf</div>
<div><input name="countb" value="4"></div>
<div class="tdlineupdown">bbbb</div>
<div class="tagtd">line5<input type="hidden" name="cartitemb" value="3"></div>
<div class="tagtd">dfsdf</div>
<div class="tagtd"><input name="countb" value="4"></div>
<div class="tagtd tdlineupdown">bbbb</div>
</div>
<!-- Using form into div make Firefox crazy (page loading does not end) -->
<!-- <form class="liste_titre" method="POST" action="1.php">

View File

@ -1253,8 +1253,6 @@ table.liste td {padding:1px 2px 1px 0px;}
.tagtable, .table-border { display: table; }
.tagtr, .table-border-row { display: table-row; }
.tagtd, .table-border-col, .table-key-border-col, .table-val-border-col { display: table-cell; }
.tagtable form, .tagtable div { display: table-row; }
.tagtable form div, .tagtable div div { display: table-cell; }
tr.liste_titre, tr.liste_titre_sel, form.liste_titre, form.liste_titre_sel
{

View File

@ -1364,8 +1364,6 @@ table.liste td {
.tagtable, .table-border { display: table; }
.tagtr, .table-border-row { display: table-row; }
.tagtd, .table-border-col, .table-key-border-col, .table-val-border-col { display: table-cell; }
.tagtable form, .tagtable div { display: table-row; }
.tagtable form div, .tagtable div div { display: table-cell; }
tr.liste_titre, tr.liste_titre_sel, form.liste_titre, form.liste_titre_sel
{

View File

@ -1472,8 +1472,6 @@ table.noborder {
.tagtable, .table-border { display: table; }
.tagtr, .table-border-row { display: table-row; }
.tagtd, .table-border-col, .table-key-border-col, .table-val-border-col { display: table-cell; }
.tagtable form, .tagtable div { display: table-row; }
.tagtable form div, .tagtable div div { display: table-cell; }
tr.liste_titre, form.liste_titre {
height: 25px;

View File

@ -1500,8 +1500,6 @@ table.liste td {
.tagtable, .table-border { display: table; }
.tagtr, .table-border-row { display: table-row; }
.tagtd, .table-border-col, .table-key-border-col, .table-val-border-col { display: table-cell; }
.tagtable form, .tagtable div { display: table-row; }
.tagtable form div, .tagtable div div { display: table-cell; }
tr.liste_titre, tr.liste_titre_sel, form.liste_titre, form.liste_titre_sel
{

View File

@ -1727,8 +1727,6 @@ table.liste td {
.tagtable, .table-border { display: table; }
.tagtr, .table-border-row { display: table-row; }
.tagtd, .table-border-col, .table-key-border-col, .table-val-border-col { display: table-cell; }
.tagtable form, .tagtable div { display: table-row; }
.tagtable form div, .tagtable div div { display: table-cell; }
tr.liste_titre, tr.liste_titre_sel, form.liste_titre, form.liste_titre_sel, table.dataTable.tr
{