bootstrap datetimePicker problema

alfinete

Power Member
bibliotecas jquery
bootstrap

bootstrap datetimepicker
https://eonasdan.github.io/bootstrap-datetimepicker/


tenho um calendário bootrap datetimepicker

a minha qestão é que quando abro o calendário ele abre sempre dentro da div mostrando a scroll.. ate aqui um comportamento correcto.

mas o que eu quero é que o popup do calendário abra fora da div , e o tamanho da div onde esta o conteudo do calendario se mantenha do mesmo tamanho sem activar o scrool.
A scroll sempre vai abrir mas para outros campos que não estão neste html, Agora eu quero é tratar do assunto do calendário ..

agradecia uma ajuda

obrigado

-----------
code html bootstrap

Código:
 <div class="section">
  <div class="container">
  <div class="row">
  <div class="col-md-12">
  <h3>
  <i class="fa fa-fw fa-th-list"></i>Lista de Processos</h3>
  </div>
  </div>
  <div class="row">
  <div class="panel-group">
  <div class="panel panel-default">
  <div class="panel-heading">
  <h4 class="panel-title fontoriginal">
  <a data-toggle="collapse" href="#collapse1" style="font-size: 14px;">Pesquisa Avançada</a>
  </h4>
  </div>
  <div id="collapse1" class="panel-collapse collapse">
  <div class="panel-body table-responsive" style="width: 100% !important; overflow: auto !important; height: 150px !important;" runat="server" id="DvPesquisa">

  <div class="row">
   
  <div class="col-md-4">
  <div class="form-group">
  <label class="control-label" for="TxtDataCriacaode">Data Criação de</label>
  <div class="input-group date" id="DvDataCriacaode">
  <input class="form-control" id="TxtDataCriacaode" name="TxtDataCriacaode" type="text" runat="server" enableviewstate="true" />
  <span class="input-group-addon">
  <span class="glyphicon glyphicon-calendar" />
  </span>
  </div>
   
  </div>
  </div>


   
  </div>
   
  </div>
  <div class="panel-footer">

  <div class="row">
  <div class="col-md-10">
  </div>
   
  <div class="col-md-1">
  <button type="button" class="btn btn-sm btn-primary pull-right"  title="Apagar Dados de Pesquisa" id="BtnLimpaPesquisa" runat="server"><i class="fa fa-fw fa-md fa-trash-o text-muted" style="color: white"></i>&nbsp;limpar</button>
  </div>
  <div class="col-md-1">
   
  <button type="button" class="btn btn-sm btn-primary pull-right" title="Procurar" validationgroup="PesquisaProcessos" id="BtnPesquisaAvancada" runat="server" onserverclick="BtnPesquisaAvancada_ServerClick"><i class="fa fa-fw fa-md fa-search text-muted" style="color: white"></i>&nbsp; Procurar</button>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>

code JS de funcionamrnto do calendario

Código:
 $(function () {
  $('#DvDataCriacaode').datetimepicker({
  locale: 'pt', format: 'DD/MM/YYYY HH:mm:ss',
  widgetPositioning: {
  horizontal: 'auto',
  vertical: 'bottom'
  },

   
  });
  });
 
bibliotecas jquery
bootstrap

bootstrap datetimepicker
https://eonasdan.github.io/bootstrap-datetimepicker/


tenho um calendário bootrap datetimepicker

a minha qestão é que quando abro o calendário ele abre sempre dentro da div mostrando a scroll.. ate aqui um comportamento correcto.

mas o que eu quero é que o popup do calendário abra fora da div , e o tamanho da div onde esta o conteudo do calendario se mantenha do mesmo tamanho sem activar o scrool.
A scroll sempre vai abrir mas para outros campos que não estão neste html, Agora eu quero é tratar do assunto do calendário ..

agradecia uma ajuda

obrigado

-----------
code html bootstrap

Código:
<div class="section">
  <div class="container">
  <div class="row">
  <div class="col-md-12">
  <h3>
  <i class="fa fa-fw fa-th-list"></i>Lista de Processos</h3>
  </div>
  </div>
  <div class="row">
  <div class="panel-group">
  <div class="panel panel-default">
  <div class="panel-heading">
  <h4 class="panel-title fontoriginal">
  <a data-toggle="collapse" href="#collapse1" style="font-size: 14px;">Pesquisa Avançada</a>
  </h4>
  </div>
  <div id="collapse1" class="panel-collapse collapse">
  <div class="panel-body table-responsive" style="width: 100% !important; overflow: auto !important; height: 150px !important;" runat="server" id="DvPesquisa">

  <div class="row">
  
  <div class="col-md-4">
  <div class="form-group">
  <label class="control-label" for="TxtDataCriacaode">Data Criação de</label>
  <div class="input-group date" id="DvDataCriacaode">
  <input class="form-control" id="TxtDataCriacaode" name="TxtDataCriacaode" type="text" runat="server" enableviewstate="true" />
  <span class="input-group-addon">
  <span class="glyphicon glyphicon-calendar" />
  </span>
  </div>
  
  </div>
  </div>


  
  </div>
  
  </div>
  <div class="panel-footer">

  <div class="row">
  <div class="col-md-10">
  </div>
  
  <div class="col-md-1">
  <button type="button" class="btn btn-sm btn-primary pull-right"  title="Apagar Dados de Pesquisa" id="BtnLimpaPesquisa" runat="server"><i class="fa fa-fw fa-md fa-trash-o text-muted" style="color: white"></i>&nbsp;limpar</button>
  </div>
  <div class="col-md-1">
  
  <button type="button" class="btn btn-sm btn-primary pull-right" title="Procurar" validationgroup="PesquisaProcessos" id="BtnPesquisaAvancada" runat="server" onserverclick="BtnPesquisaAvancada_ServerClick"><i class="fa fa-fw fa-md fa-search text-muted" style="color: white"></i>&nbsp; Procurar</button>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>

code JS de funcionamrnto do calendario

Código:
$(function () {
  $('#DvDataCriacaode').datetimepicker({
  locale: 'pt', format: 'DD/MM/YYYY HH:mm:ss',
  widgetPositioning: {
  horizontal: 'auto',
  vertical: 'bottom'
  },

  
  });
  });

Não consegui perceber muito bem o teu problema, é possível mostrares via printscreens? Melhor, mete esse código que tens aqui: https://jsfiddle.net/ // codepen.io
 
Obrigado na mesma , mas problema resolvido

o problema era o seguinte, tenho uma div com um bootstrap datetimepicker, e ao abrir o popup do calendario , esse popup abria todo dentro dessa div, e eu queria que ele abrisse fora dela.

eu na div tinha um overflow visible com um height fixo, em ecrans de pc estava na boa , em ecrans de telemovel saia o coteudo do dive para fora da mesma e scrool desaparecia.



solução :

por um overflow visible , e um height auto na div em causa , e fica tudo a funcionar correctamente .


obrigado na mesma
 
Back
Topo