jquery - attribute - tooltip html
¿Cómo hacer que la pantalla: trabajo flexible para la capacidad de respuesta-Bootstrap? (2)
Tengo una fila con 3 cols y tengo un menú desplegable dentro de cols, que se muestra a continuación si elijo una opción. Cuando hago clic en este botón de opción, la altura de las columnas se amplía / flexiona / aumenta y funciona como debería. Para eso acabo de agregar este elemento css a la fila para pantalla completa
@media only screen and (min-width: 1201px)
.payfullMajsticBlox .portlet-body > .row {
display: flex;
}
Este es mi código HTML
<div class="payfullMajsticBlox">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs font-green-sharp"></i>
<span class="caption-subject font-green-sharp bold uppercase">POS AYARLARI</span>
</div>
<div class="tools">
<a class="collapse" href="javascript:;" data-original-title="" title="">
</a>
<a class="config" data-toggle="modal" href="#portlet-config" data-original-title="" title="">
</a>
<a class="reload" href="javascript:;" data-original-title="" title="">
</a>
<a class="remove" href="javascript:;" data-original-title="" title="">
</a>
</div>
</div>
<div class="portlet-body">
<!--<h4>Pulsate any page elements.</h4>-->
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 payfullcol popovers" data-content="XXX" data-placement="top" data-trigger="hover" data-container="body" data-original-title="" title="">
<h6 class="payfullTitle">API Kullanıcı adı</h6>
<div class="form-group form-md">
<input type="text" class="form-control" id="form_control_1" placeholder="Merchant ID">
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 payfullcol popovers" data-content="XXX" data-placement="top" data-trigger="hover" data-container="body" data-original-title="" title="">
<h6 class="payfullTitle">Şifre</h6>
<div class="form-group form-md">
<input type="text" class="form-control" id="form_control_1" placeholder="API Şifresi">
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 payfullcol popovers" data-content="XXX" data-placement="top" data-trigger="hover" data-container="body" data-original-title="" title="">
<h6 class="payfullTitle">Mağaza Numarası</h6>
<div class="form-group form-md">
<input type="text" class="form-control" id="form_control_1" placeholder="Client ID / Terminal">
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 payfullcol popovers" data-content="XXX" data-placement="top" data-trigger="hover" data-container="body" data-original-title="" title="">
<h6 class="payfullTitle">3D Secure kullan</h6>
<div class="clearfix">
<div class="btn-group btn-group payfullBtns" data-toggle="buttons">
<label class="btn green active" id="P1BsecureS1">
<input type="radio" class="toggle">Varsayılan</label>
<label class="btn green" id="P1BsecureS2">
<input type="radio" class="toggle">3D Secure</label>
</div>
</div>
<br><br>
<div id="P1B3DSecure" class="payfullShowHide" style="display: none;">
<h6 class="payfullTitle">Üye İş Yeri Anahtarı</h6>
<div class="form-group form-md">
<input type="text" class="form-control" id="form_control_1" placeholder="POS Net Id / Store key">
</div>
</div>
</div>
</div>
</div>
</div>
Así que la vista inicial es esta
Cuando se trata de responder, hago que se muestre: flex deshabilitado en la vista inicial de la tableta, la altura de la columna que tiene un menú desplegable tiene una altura diferente a las demás. revisalo. Las razones para hacer esto es que si no estoy deshabilitado no responde, agregue todo.
Cuando habilito mostrar: flex; se vuelve no sensible y se parece a esto, que no responde.
Puedes ver un gif que he mostrado como actúa
La conclusión es
- Si configuro una propiedad de elemento de fila como display: flex , deja de responder.
Intenta algo como esto. No es exactamente el contenido que publicaste. Pero esto funciona con gran contenido en una de las cajas también.
Edición : el contenido agregado dinámicamente también funciona.
$("#add").on("click",function(){
$(this).parent().prepend(''<div class="added-content" >Added Content </div>'');
});
.flexbox{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.flex-item{
flex:1;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.flex-item p{
margin: 10px 5px;
padding: 10px;
background:yellow;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
#add{
padding:5px;
background:red;
}
.added-content{
background:blue;
margin-bottom:5px;
color:white;
}
.breakpoint{
display:none;
}
@media all and (max-width: 1201px){
.flex-item{
flex: none;
width:25%;
}
}
@media all and (max-width: 601px){
.flex-item{
flex: none;
width:50%;
}
}
@media all and (max-width: 401px){
.flex-item{
flex: none;
width:100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexbox">
<div class="flex-item">
<p>Content</p>
</div>
<div class="flex-item">
<p>Content</p>
</div>
<div class="flex-item">
<p>Content</p>
</div>
<div class="flex-item">
<p ><button id="add">Add Content on Click</button></p>
</div>
<div class="flex-item">
<p>Content</p>
</div>
<div class="flex-item">
<p>Content</p>
</div>
<div class="flex-item">
<p>Whole lot of content
Whole lot of content
Whole lot of content
Whole lot of content
Whole lot of content
Whole lot of content
Whole lot of content Whole lot of content
Whole lot of content Whole lot of content
Whole lot of contentContent</p>
</div>
<div class="flex-item">
<p>Content</p>
</div>
</div>
Solo agregue este script y aplique esta clase eq_col a los DIV que desee que tengan la misma altura, funcionará en todos los tamaños de pantalla.
Déjame saber cualquier problema.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
var highestBox = 0;
$(''.eq_col'').each(function(){
if($(this).height() > highestBox){
highestBox = $(this).height();
}
});
$(''.eq_col'').height(highestBox);
});
</script>