0

El problema es que el contenido no lo reconoce el modal-body y se reduce el tamaño del contenido a lo mínimo, edite la clase del modal-body a panel-body y se soluciona.

Así se refleja el contenido: contenido malo

Pero yo quisiera que en vez de modal-body sea panel-body para que se pueda ver así: introducir la descripción de la imagen aquí

¿Como podría solucionarlo directamente con la librería?, claro si es posible.

La librería tiene una parte donde indica como manipular elementos del modal, pero no lo entiendo muy bien. Lo mas cercano que me pareció fue la parte donde dice Manipulating your dialog.

Acá el código que estoy usando:

var form = $('<form/>',{
  'class' : 'form-horizontal',
  'role'  : 'form'
});
var div = $('<div/>');
var label_nombre = $('<label/>',{
  'for' : 'filter_campo',
  'class' : 'control-label col-sm-2',
  'text'    : 'Código: '
});
label_nombre.appendTo(div);
var div_nombre = $('<div/>',{
  'class' : 'col-sm-10 col-xs-12',
});
var input_nombre = $('<input/>',{
  'type' : 'text',
  'class' : 'form-control',
  'id' : 'filter_campo',
  'name' : 'filter_campo',
});
input_nombre.appendTo(div_nombre);
div_nombre.appendTo(div);
div.appendTo(form);

var dialog = BootstrapDialog.show({
  title: 'Agregar',
  message: function(dialogRef){
    return form;
  },
  cssClass: 'login-dialog',
  buttons: 
  [{
    label: 'Cancelar',
    action: function(dialogRef) {
      dialogRef.close();
    }
  },{
    label: 'Ok',
    cssClass: 'btn-primary',
    action: function(dialogRef){
      var fruit = dialogRef.getModalBody().find('input').val();
      if($.trim(fruit.toLowerCase()) !== '123456') {
        alert('Indique "123456"');
        return false;
      }else{
        dialogRef.close();
      }
    }
  }]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/js/bootstrap-dialog.min.js"></script>

Agrego: si estoy creando los elementos mal y por ende no los reconoce el modal-body agradecería la instrucción de como debería hacerlo.

1 respuesta 1

0

Lo solucione editando la clase

let content = dialogRef.getModalContent()[0];//obtengo el contenido del modal
let x = content.getElementsByClassName("modal-body")[0];//obtengo el div "modal-body"
x.setAttribute('class', 'panel-body');//y a continuación edito la clase

let dialog = new BootstrapDialog({
  title: 'Agregar',
  message: function(dialogRef){
  
    let content = dialogRef.getModalContent()[0];
  	let x = content.getElementsByClassName("modal-body")[0];
    x.setAttribute('class', 'panel-body');
  
  	let form = $('<form/>',{
      'id' : 'form_crear_item',
      'role'  : 'form'
    });
    let div = $('<div/>');
    let label_nombre = $('<label/>',{
      'for' : 'filter_campo',
      'class' : 'control-label col-sm-2',
      'text'    : 'Código: '
    });
    label_nombre.appendTo(div);
    let div_nombre = $('<div/>',{
      'class' : 'col-sm-10 col-xs-12',
    });
    let input_nombre = $('<input/>',{
      'type' : 'text',
      'class' : 'form-control',
      'id' : 'filter_campo',
      'name' : 'filter_campo',
    });
    input_nombre.appendTo(div_nombre);
    div_nombre.appendTo(div);
    div.appendTo(form);
    
    return form;
  },
  cssClass: 'login-dialog',
  buttons: 
  [{
    label: 'Cancelar',
    action: function(dialogRef) {
      dialogRef.close();
    }
  },{
    label: 'Ok',
    cssClass: 'btn-primary',
    action: function(dialogRef){
      var fruit = dialogRef.getModalBody().find('input').val();
      if($.trim(fruit.toLowerCase()) !== '123456') {
        alert('Indique "123456"');
        return false;
      }else{
        dialogRef.close();
      }
    }
  }]
});

dialog.open();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/js/bootstrap-dialog.min.js"></script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.