0

Tengo un problema en un formulario dinámico al hacer submit. El problema se da que en el momento de validar los campos si uno de ellos tiene un texto a mostrar de la validación errónea, entonces desplaza el input de abajo hacia un lado. parece ser que ocurre cuando el formulario, (que se genera dinamicamante) tiene un numero de inputs impares

@foreach (var item in Model)
{
  <div class="col-md-6">
    <div class="form-group">
      <label for="@item.Label" class="control-label">
        @item.Label  @((bool)item.prop ? " (*):" : ":")
      </label>
    </div>
  <div>                                      
}

¿Como puedo controlar esto?

1

1 respuesta 1

0

Lo que pasa es que al momento de salir el mensaje de error en div tiende a hacerse mas grande, suponiendo que tu código generado es como el siguiente:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-xs-6">
    <div class="form-group">
      <label for="item.Label" class="control-label">
        texto1
      </label>
      <span class="help-block">Mensaje de error</span>
    </div>
  </div>
  <div class="col-xs-6">
    <div class="form-group">
      <label for="item.Label" class="control-label">
        texto2
      </label>
      <span class="help-block"></span><!--otro mensaje de error no asignado y ocultado-->
    </div>
  </div>
  <div class="col-xs-6">
    <div class="form-group">
      <label for="@item.Label" class="control-label">
        texto3
      </label>
    </div>
  </div>
  <div class="col-xs-6">
    <div class="form-group">
      <label for="item.Label" class="control-label">
        texto4
      </label>
    </div>
  </div>
</div>

Lo que yo te recomiendo es que pongas un div con la clase .row por cada 2 elementos con la clase .col-md-6.

int cont = 0;
@foreach (var item in Model)
{
  if(cont%2==0){
    <div class="row">
  }
  <div class="col-md-6">
    <div class="form-group">
      <label for="@item.Label" class="control-label">
        @item.Label  @((bool)item.prop ? " (*):" : ":")
      </label>
    </div>
  <div>
  if(cont%2==0){
    </div>
  }  
  cont++;                                    
}

Tu salida seria como esto:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="row">
  <div class="col-xs-6">
    <div class="form-group">
      <label for="item.Label" class="control-label">
        texto1
      </label>
      <!-- Mostrando el mensaje de error -->
      <span class="help-block">Mensaje de error</span>
    </div>
  </div>
  <div class="col-xs-6">
    <div class="form-group">
      <label for="item.Label" class="control-label">
        texto2
      </label>
      <span class="help-block"></span><!--otro mensaje de error no asignado y ocultado-->
    </div>
  </div>
</div>
<div class"row">
  <div class="col-xs-6">
    <div class="form-group">
      <label for="@item.Label" class="control-label">
        texto3
      </label>
    </div>
  </div>
  <div class="col-xs-6">
    <div class="form-group">
      <label for="item.Label" class="control-label">
        texto4
      </label>
    </div>
  </div>
</div>

Nota:

He cambiado la clase .col-md-6 por .col-xs-6 para que fuera visible en el snipet.
El código del foreach no se si valla a ser funcional pero espero entiendas la idea

1
  • Muchas gracias, fue perfecto!
    – Kram_
    Commented el 21 sept. 2016 a las 9:08

Tu Respuesta

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

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