I want to improve the rendering of the inputs in the template. I have tried adding styles from widgets in the class:

class ProductosFilter(django_filters.FilterSet):

    class Meta:
        model = Elemento
        fields = ('estado','tipo','grupo')
        widgets = {
            'grupo':widgets.Select(attrs={
                'class': 'form-control form-select ', 
            }),
        } 

but I did not make it, is it possible to do it from Django's classes?.

this is my template:

<div class="col-md-12" style="text-align: right; padding-top: 50px; padding-right: 50px;" >
    {{filter.form}}
    <button type="submit" class="btn btn-primary">Filtrar</button>
</div>

any contribution is appreciated

CodePudding user response：

You can use JavaScript and access that input using other names or attributes and style it in JavaScript like the following code:

var inputVal = document.getElementById("search"); inputVal.style.backgroundColor = "yellow";

Or you can either give it an idea or an attribute or style your own inputs as follows :

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

input[type=text]{
  background:yellow;
}

<input type="text">

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I can take the select id generated autocammatically by the concatenation between the string "id_" "name_field" and set attributes with js or css sheet but i feel this is the long way.

<select name="tipo" id="id_tipo">
  <option value="" selected="">---------</option>

  <option value="Consumo">Consumo</option>

  <option value="Inventario">Inventario</option>

  <option value="Servicio">Servicio</option>

</select>

js:

select_obj = document.getElementById('id_tipo')
select_obj.style.width = '100px';