1

Estoy trabajando con la versión Bootstrap v3.3.1 Tengo un problema de responsividad, ya que al utilizar las clases "col-sm" y "col-xs" para distintas proporciones en el modo rejilla, ya que al actuar estas clases, los controles contenidos en el div con estas clases, pierden la interacción con el usuario, por ejemplo, los botones no se pueden clickear al entrar en operación dichas clases con resoluciones bajas.

En el div que está inmediatamente después de los que contienen la clase "row" si cargo las propiedades col-xs o col-sm, me deshabilita los datetimepicker contenidos en tales contenedores.

He probado cargando las clases col-xs o col-sm en todos y cada uno de los div anidados, sin embargo no despliega el calendario.

<div>
            <div class="col-md-1 col-xs-12 text-left">
                <label for="inputClave" class="label-std">Opciones de Búsqueda:</label>
            </div>
            <div class="col-md-10">
                <div class="row">
                    <div class="col-md-3 col-xs-10">
                        <select class="form-control form-list input-sm"  id="selectBAlmacen" name="selectBAlmacen" size="1"  ng-model="almacen" ng-change="callProveedores()">
                            <option value="" selected>Seleccione un Almacén</option>
                            <%
                                foreach (Array oRol in DCS.Data.Dao.AbaDis.cAlmacen.listSimple())
                                {%><option value="<%=oRol.GetValue(0).ToString() %>" ><%=oRol.GetValue(1).ToString() %></option><%}%>
                        </select> 
                    </div>
                    <div class="col-md-6 col-xs-10">
                        <select id="selectBProveedor" name="selectBProveedor" class="form-control form-list input-sm" ng-model="Proveedor" ng-options="tipo as tipo.razonSocial for tipo in lProveedores track by tipo.PKProveedor">
                            <option value="">Todos los Proveedores</option>
                            <option value="{{tipo.PKProveedor}}"></option>
                        </select>
                    </div>
                    <div class="col-md-3 col-xs-8">
                        <select class="form-control form-list input-sm"  id="selectBEstado" name="selectBEstado" size="1">
                        <option value="ENVIADO|PROCESO" selected>Pendientes</option>
                        <option value="ENVIADO">Pendientes de Recibir</option>
                        <option value="PROCESO">En proceso de Recepción</option>
                        <option value="TERMINADO" >Recibidas</option>
                    </select> 
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class='input-group date col-md-12 col-xs-6' id='fechaBDesde' style="">
                            <input id="inputBFDesde" name="inputBFDesde" type='text' class="form-control input-sm" data-date-format="DD/MM/YYYY" value="<%=DateTime.Now.AddMonths(-1).ToString("dd/MM/yyyy") %>" />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                        <script type="text/javascript">
                            $(function () {$('#fechaBDesde').datetimepicker({});});
                        </script>
                    </div>
                    <div class="col-md-4">
                        <div class='input-group date col-md-12 col-xs-6' id='fechaBHasta' style="">
                            <input id="inputBFHasta" name="inputBFHasta" type='text' class="form-control input-sm" data-date-format="DD/MM/YYYY" value="<%=DateTime.Now.AddDays(15).ToString("dd/MM/yyyy") %>" />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                        <script type="text/javascript">
                            $(function () {$('#fechaBHasta').datetimepicker({});});
                        </script>
                    </div>
                    <div class="col-md-4 col-xs-8">
                        <input id="inputBIDOC" name="inputBIDOC" type="text"  class="form-control form-input input-sm" placeholder="Orden de Compra" maxlength ="20" />
                    </div>
                </div>
            </div>
            <div class="col-md-1 text-right">
                <button class="btn btn-sm btn-success" role="button" type="button" aria-expanded="false" ng-click="callBuscar('')" title="Buscar clientes segun los criterios" >
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                        Buscar
                </button>
            </div>
        </div>
3
  • en estos casos las clases col-sm y col-xs deberian de ir en los botones no en los divs
    – Shassain
    el 20 jul. 2019 a las 2:01
  • No entiendo lo que te sucede Angel, ¿podrías añadir el código que te genera el conflicto?. el 22 jul. 2019 a las 16:22
  • @Shassain ¿porqué las clases col-* deberían ir en los botones y no en los contenedores? No encuentro un motivo para hacerlo ni creo que tenga alguna función. el 22 jul. 2019 a las 16:31

0

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

Examina otras preguntas con la etiqueta o formula tu propia pregunta.