search

pkpfrench / dropdown-check-list

Automatically exported from code.google.com/p/dropdown-check-list
0 stars 0 forks source link

iphone and android browser missing scroll bars #177

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
** What steps will reproduce the problem?
Over IE8:
The text disapear. No matter what theme version use (jquery ui theme), just 
like the pic I attach.

Over Iphone & Android:
The Scrollbar doeasn't show.

** What is the expected output? What do you see instead?
Over IE8:
I see all the items with the checkbox but not the text in it.

Over Iphone & Android:
I see everything but no scrollbar.

** What is your environment?
-- DropDownCheckList version: 1.3
-- jQuery version: 1.5.1
-- jQuery UI version: 1.8.11
-- Browser and version: IE 8, iphone 4.2.1 browser and android 2.1 browser

** Please provide any additional information below/Please attach sample
html:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; 
maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" 
/>

<title>Obligaciones :: Transacciones</title>
<link rel="stylesheet" type="text/css" 
href="../../styles/sunny/jquery-ui-1.8.11.custom.css" />
<link rel="shortcut icon" href="../../images/ico/etinaricon.ico" />
<script type="text/javascript" src="../../scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript" 
src="../../scripts/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript" 
src="../../scripts/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="../../scripts/script_bases.js"></script>
<script type="text/javascript" 
src="../../scripts/ui.dropdownchecklist-1.3-min.js"></script>
<script type="text/javascript"> 
    $(document).ready(function () {
        $("#tabs").tabs();
        setEmpresas('#cmbEmpresas');
        setTiposObligacion('#cmbTiposObligacion');
        setEntidadesFinancieras('#cmbEntidadesFinancieras');
        $("#cmbEmpresas").dropdownchecklist({ 
            emptyText: "Seleccione empresas",
            icon: { 
                placement: 'right', 
                toOpen: 'ui-icon-arrowthick-1-s', 
                toClose: 'ui-icon-arrowthick-1-n' 
            },
            firstItemChecksAll: true,
            width: 205,
            maxDropHeight: 150, 
            explicitClose: '...cerrar',
            onComplete: function(selector) {
                var values = "";
                var nro_opciones_seleccionadas = 0;

                for( i=0; i < selector.options.length; i++ ) {
                    if (selector.options[i].selected && (selector.options[i].value != "")) {
                        if ( values != "" ) values += ",";
                        values += selector.options[i].value;
                        nro_opciones_seleccionadas += 1;
                    }
                }

                if(nro_opciones_seleccionadas>0){
                    setObras('#cmbObras',values);
                }
            } 
        });
        $("#cmbObras").dropdownchecklist({ 
            emptyText: "Seleccione obras",
            icon: { 
                placement: 'right', 
                toOpen: 'ui-icon-arrowthick-1-s', 
                toClose: 'ui-icon-arrowthick-1-n' 
            },
            firstItemChecksAll: true,
            width: 205,
            maxDropHeight: 150, 
            explicitClose: '...cerrar' 
        });
        $("#cmbTiposObligacion").dropdownchecklist({ 
            emptyText: "Seleccione tipos obligacion",
            icon: { 
                placement: 'right', 
                toOpen: 'ui-icon-arrowthick-1-s', 
                toClose: 'ui-icon-arrowthick-1-n' 
            },
            firstItemChecksAll: true,
            width: 205,
            maxDropHeight: 150, 
            explicitClose: '...cerrar' 
        });
        $("#cmbEntidadesFinancieras").dropdownchecklist({ 
            emptyText: "Seleccione entidades financieras",
            icon: { 
                placement: 'right', 
                toOpen: 'ui-icon-arrowthick-1-s', 
                toClose: 'ui-icon-arrowthick-1-n' 
            },
            firstItemChecksAll: true,
            width: 205,
            maxDropHeight: 150, 
            explicitClose: '...cerrar' 
        });
        var dates = $( "#txtFechaDesde, #txtFechaHasta" ).datepicker({
            changeMonth: true,
            changeYear: true,
            numberOfMonths: 1,
            dateFormat: 'yy-mm-dd',
            dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
            monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo',
                'Junio', 'Julio', 'Agosto', 'Septiembre',
                'Octubre', 'Noviembre', 'Diciembre'],
            monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr',
                'May', 'Jun', 'Jul', 'Ago',
                'Sep', 'Oct', 'Nov', 'Dic'],
            onSelect: function( selectedDate ) {
                var option = this.id == "txtFechaDesde" ? "minDate" : "txtFechaHasta",
                    instance = $( this ).data( "datepicker" ),
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );
                dates.not( this ).datepicker( "option", option, date );
            },
            showOn: "button",
            buttonImage: "../../images/gif/calendar.gif",
            buttonImageOnly: false
        });
        /*$("#grdObligaciones").jqGrid({ 
            url:'doGetObligaciones.php?q=2', 
            datatype: "json", 
            colNames:['Nro.','Tipo','Empresa','Obra','Entidad Financiera','Monto','Estado','Fecha Inicio','Fecha Fin'], 
            colModel:[ {name:'id',index:'id', width:55}, 
                        {name:'tipo',index:'tipo', width:90}, 
                        {name:'empresa',index:'amount', width:80, align:"right"}, 
                        {name:'obra',index:'tax', width:80, align:"right"}, 
                        {name:'entidad',index:'name asc, invdate', width:100}, 
                        {name:'monto',index:'total', width:80,align:"right"}, 
                        {name:'estado',index:'note', width:150, sortable:false},
                        {name:'feinicio',index:'invdate', width:90},
                        {name:'fefin',index:'invdate', width:90}], 
            rowNum:10, 
            rowList:[10,20,30], 
            pager: '#pager2', 
            sortname: 'id', 
            viewrecords: true, 
            sortorder: "desc", 
            caption:"Resultados de la búsqueda por criterio de Obligaciones" 
        }); 
        $("#grdObligaciones").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});*/
        $("#btnBuscar").button({
            icons: {
                primary: "ui-icon-search"
            },
            label: 'buscar'
        });
        $("#btnBuscar").click(function (){
            alert('Realiza la busqueda');
        });
    });
</script>
<style type="text/css" media="screen"> 
html, body, form {
    width:100%;
    height:100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    font-size: 11px;
}
</style>
</head>

<body>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Obligaciones: Mantenimiento transaccional</a></li>
    </ul>
    <div id="tabs-1">
        <table style="border:none;">
            <tr>
                <td>
                    <b>Empresas</b>
                </td>
              <td>:</td>
                <td>
                    <select id="cmbEmpresas" multiple="multiple"></select>
                </td>
            </tr>
            <tr>
                <td>
                    <b>Obras</b>
                </td>
                <td>:</td>                
                <td>
                    <select id="cmbObras" multiple="multiple"></select>
                </td>
            </tr>
            <tr>
                <td>
                    <b>Tipos obligación</b>
                </td>
                <td>:</td>                
                <td>
                    <select id="cmbTiposObligacion" multiple="multiple"></select>
                </td>
            </tr>
            <tr>
                <td>
                    <b>Entidades financieras:</b>
                </td>
                <td>:</td>                
                <td>
                    <select id="cmbEntidadesFinancieras" multiple="multiple"></select>
                </td>
            </tr>
            <tr>
                <td valign="top">
                    <b>Rango de fechas:</b>
                </td>
                <td>:</td>                
                <td>
                    <label for="txtFechaDesde">Desde</label>
                    <input type="text" id="txtFechaDesde" name="txtFechaDesde" readonly="readonly" size="12"/><br />
                    <label for="txtFechaHasta">Hasta</label>
                    <input type="text" id="txtFechaHasta" name="txtFechaHasta" readonly="readonly" size="12"/>
                </td>
            </tr>
            <tr>
          <td colspan="3" align="right">
                    <div id="btnBuscar"></div>
                </td>
            </tr>
        </table>
    </div>
</div>
<table id="grdObligaciones"></table>
<div id="pager2"></div>
</body>
</html>

Original issue reported on code.google.com by hectorm...@gmail.com on 20 Apr 2011 at 6:31

Attachments:

GoogleCodeExporter commented 9 years ago 
I found a way to do this right but it is some weir:
I populate the select objects with this:
$(obj).append(new Option(text,val);

This line works with almost every browser... but when I changed with this:
$(obj).append('<option value=' + val + '>' + text + '</option>');

Everything works like charm... Why is that ???

Still doesn't work on iphone & android systems.

Original comment by hectorm...@gmail.com on 20 Apr 2011 at 6:57

GoogleCodeExporter commented 9 years ago 
1) DDCL assumes the SELECT/OPTION structure is properly created.  If you are 
creating the SELECT via dynamic javascript processing rather than static html, 
and you have found a difference on how the browsers handle your javascript 
code, that is beyond the scope of DDCL and I cannot help.  Sorry.

2) For the iPad/iPhone, it is the mobile Safari browser that chooses how to 
render the scroll bars.  DDCL just populates a fixed size DIV with more text 
than will fit, and the browser chooses how to display the scroll bars.  From 
what I can tell in the Apple environment, there is NO visual indicator that the 
test can scroll.  But it is scrollable by using a two finger gesture rather 
than a one finger gesture.
I have no access to an Android system, but I am assuming something similar is 
going on.

Please view the Testing page on your Android device and confirm that DDCL is 
scrollable even if no visual scroll markers are displayed.  Thanks.

Original comment by womohun...@ittrium.com on 21 Apr 2011 at 3:21

GoogleCodeExporter commented 9 years ago 
With no further details, no action can be taken.

Original comment by womohun...@ittrium.com on 15 Jun 2011 at 1:57

GoogleCodeExporter commented 9 years ago 
I seem to have a problem with DDCL scrolling on android.

Original comment by visions....@gmail.com on 29 Nov 2011 at 8:41