fuelux – use a select list inside a placard

Peek 2017-11-23 08-51

Fuel UX extends Bootstrap with additional lightweight JavaScript controls for your web applications. It has a placard control, which adds a pop-up element to edit inputs/textareas inline on focus with additional options for explicit accept/cancel actions.

I was trying to display a select list -in angular- when the placard is shown. I achieved it with the following code. I had to put the select list inside the placard-popup div and give it a margin so it didn’t overlap with the header. I don’t know if that’s what has been addressed since version 3.11.4 and that’s the purpose of the placard-popup div, it doesn’t say in the docs or at least i couldn’t found it.

<div id="tipoAudiencia" class="placard">
    <div class="placard-popup">
        <div class="form-group" style="margin-top:30px;">



        </div>
    </div>
    <div class="placard-header">Selecciona el tipo de audiencia</div>
    <div class="form-control placard-field glass">{{audiencia.tipoAudiencia.nombre}}</div>
    <div class="placard-footer">
        <a class="placard-cancel" href="#">Cancelar</a>
        Aceptar
    </div>
</div>

then in my controller I update the value if it gets accepted

$('#tipoAudiencia').on('accepted.fu.placard', function(){
    console.log('actualizando el tipo de audiencia a ' + $scope.tipoAudienciaEditada);
    $scope.audiencia.tipoAudiencia = $scope.tipoAudienciaEditada;
    Audiencia.update($scope.audiencia);
});

I had some minor issues with sizing but they’re not showstoppers

Peek 2017-11-23 08-52

sources:
https://github.com/ExactTarget/fuelux/issues/1392

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s