I am trying to achieve this where Select projects is a multi-select dropdown menu and Filter Results is a collapse button, which when clicked has another three multi-select dropdown menus. I am using chosen-select for implementing the multi-select dropdown menus.
My Select projects is working fine and my Filter results collapse button is also working. But within the collapse button, the three dropdowns are not working (as shown in the image). When I remove the chosen-select from my first dropdown, I can see selection box working fine but its not a dropdown anymore. I also tried renaming the class in select to some other name but its still not working.
Also, if seen closely, there are lines in the collapse section where the selection box should be present, if I click this, I can see the line extending but its width is zero.
Please help me, I tried multiple things, but no luck. Below is the code. Thanks in advance.
<div class="container">
<div class="col-md-5" style="margin: 30px;">
<h3 style="font-variant: small-caps;">Select Projects:</h3>
<form id="selectProject" role="search" method="get" action="{% url 'select_projects' %}">
<select name="params[]" data-placeholder="Choose projects" class="chosen-select" multiple tabindex="4">
{% for project in project_names %}
{% if project in display_selected %}
<option value="{{ project }}" selected="selected"> {{ project }}</option>
{% else %}
<option value="{{ project }}"> {{ project }} </option>
{% endif %}
{% endfor %}
</select><br/>
<label for="submit"></label><button id="submit" type="submit" class="btn btn-default" style="padding: 5px 40px;">Submit</button>
</form>
</div>
</div>
<div><br /></div>
<div class="container">
<div class="col-md-5" style="margin: 30px;">
<div class="row">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#filterParam">
Filter Results
</button>
</div>
<div class="collapse" id="filterParam">
<form id="selectFilters" role="search" method="get" action="{% url 'select_projects' %}">
<div class="form-group"><div><br /></div>
<select name="fruit[]" data-placeholder="Choose fruits" multiple tabindex="4" style="width: 200px;">
<option> apple </option>
<option> mango </option>
<option> grapes </option>
</select><div><br /></div>
<select name="color[]" data-placeholder="Choose colors" class="chzn-select" multiple tabindex="4" style="width: 200px;">
<option> red </option>
<option> orange </option>
<option> green </option>
</select><div><br /></div>
<select name="toppings[]" data-placeholder="Choose toppings" class="chosen-select" multiple tabindex="4" style="width: 200px;">
<option> cheese </option>
<option> olives </option>
<option> peppers </option>
</select><div><br /></div>
</div>
<label for="submitFilters"></label><button id="submitFilters" type="submit" class="btn btn-default" style="padding: 3px 15px;">Refresh</button>
</form>
</div>
</div>
</div>
<script src="{% static 'app/js/chosen.jquery.js' %}"></script>
<script>
$('.chosen-select').chosen();
$('.chzn-select').chosen();
</script>
Fixed the issue with this change: $('.chzn-select').chosen({width: '100%'});
Related
I have added an Option Field in my Jetstream Registration page. The functionality is fine. I just want to change the column width of this field to match the other fields.
<div class="mt-4">
<div class="col-md-12">
<x-jet-label for="registeras" value="{{ ('Register As') }}" />
<select class="form-control" name="registeras" id="registeras">
<option value="one">Option 1</option>
<option value="two">Option 2</option>
</select>
</div>
</div>
You need to apply the same classes that jetstream uses to your select element which is most probably class="block mt-1 w-full"
So your code should be:
<div class="mt-4">
<div class="col-md-12">
<x-jet-label for="registeras" value="{{ ('Register As') }}" />
<select class="form-control block mt-1 w-full" name="registeras" id="registeras">
<option value="one">Option 1</option>
<option value="two">Option 2</option>
</select>
</div>
</div>
I am developing a form in AMP, within this form, there is a register of students for enrollment. Users (parents) will be able to add two more students to the same registration. However, when I click to add another student, with all required forms filled out, amp-moustache displays the success message before clicking the submit button. When the new student is added by the user, the form is also required.
Sorry for my bad english.
<script src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<!-- required fields -->
<div class="form-group">
<label for="" class="label-forms">Name 1: *</label>
<input name="" type="text" class="" required>
</div>
<br/>
<button id="add-2" class="button" hidden on="tap:e2.hide,add-2.hide,remove-2.show, AMP.setState({customvalue: ''})">Remove Name 2...</button>
<button id="remove-2" class="button" on="tap:e2.show,remove-2.hide,add-2.show, AMP.setState({customvalue: 'true'})">Add Name 2...</button>
<div id="e2" hidden>
<input name="" type="text" class="" [required]="customvalue">
<div id="div-edu2" class="form-group">
<select name="" class="input-default" [required]="customvalue">
<option value="1" selected>A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
</div>
<button id="add-3" class="button" hidden on="tap:e3.hide,add-3.hide,remove-3.show, AMP.setState({customvalue2: ''})">Remove Name 3...</button>
<button id="remove-3" class="button" on="tap:e3.show,remove-3.hide,add-3.show, AMP.setState({customvalue2: 'true'})">Add Name 3...</button>
<div id="e3" hidden>
<input name="" type="text" class="" [required]="customvalue2">
<div id="div-edu3" class="form-group">
<label class="label-forms" for="">Select 3: *</label>
<select name="" class="input-default" [required]="customvalue2">
<option value="1" selected>Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
</div>
</div>
</div>
</div>
<!-- ... -->
<div class="col-10 mx-auto">
<input type="submit" value="Send">
</div>
<div submit-success>
<template type="amp-mustache">
<p class="text-center">Success!</p>
</template>
</div>
<div submit-error>
<template type="amp-mustache">
<p class="text-center">Fail.</p>
</template>
</div>
IMG 1 - FORM
IMG 2 - ON CLICK ADD BUTTON
IMG 3 - AMP MESSAGE
I simply solved this problem by changing the html tag from <button> to <a></a>. Solved it, but I still haven't figured out the reason for the problem with the button.
I want to change the text font for my options in a select box. The problem is that I also want to display icons before some options. If I change the font-style, the font-awesome icons won't be displayed and I don't think it is possible to style the options themselves, only the whole select box.
Here is some of my code:
<div class="form-group">
{{ Form::label('qualifications', 'Qualifications') }}<br>
<select size="5" class="fa form-control" id="selectedqualification">
<!-- displays an fa-warning icon after every qualification that's expiring -->
#foreach ($employee_qualifications as $key => $qualification)
#if($expiringQualifications->contains($qualification))
<option value="{{$key}}">{{$qualification}} </option>
#else
<option value="{{$key}}">{{$qualification}}</option>
#endif
#endforeach
</select>
<button
type="button"
class="btn btn-default pull-right"
data-toggle="modal"
data-target="#qualificationModal"
data-qualifications="{{ $qualifications }}"
data-qualification_names="{{ $qualification_names }}">
Add
</button>
<button type="button" id="removequali" class="btn btn-danger pull-right">Remove</button>
<br>
<br>
</div>
I have a created a form using HTML and Jinja2 to configure a CSV file. The user is asked to change the name and assign a type to each column name. The CSV file can have any number of columns, therefore, I have created the form through looping Currently, I use the bootstrap grid and divide into three columns and rows depending on the number of columns.
<form action="/updateFile" method="POST" enctype="multipart/form-data">
<div class="row">
<div class="col-sm-12">
<p class="form-group">
{% for x in title %}
{% if loop.index == 1 %} <div class="row"> {% endif %}
<div class="col-xs-12 col-sm-12 col-lg-4 col-md-4">
<div class="row">
<div class="col-sm-6">
<label> Field {{ loop.index }} : {{ x }} </label>
<input type="text" title="Name should only contain letters or numbers" class="form-control"
name="field-{{ loop.index }}" value="{{ x }}" maxlength="10" pattern="[a-zA-Z0-9_ ]+" required>
</div>
<div class="col-sm-6 pull-right">
<label> </label>
<select class="form-control " name="choice-{{ loop.index }}">
<option value="mcqsr">MCQ-Single Response</option>
<option value="mcqmr">MCQ-Multiple Response</option>
<option value="num">Numerical</option>
<option value="tim">Temporal</option>
<option value="lat">Survey Site - Latitude</option>
<option value="lng">Survey Site - Longitude</option>
<option value="temp">Survey Site - Temporal</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<label> </label>
<input type="text" title="Name should only contain letters or numbers" class="form-control"
name="question-{{ loop.index }}" value=" Question of {{ x }}" pattern="[a-zA-Z0-9_ ]+" required>
</div>
</div>
</div>
{% if loop.index % 3 == 0 %} </div><p> </p><p> </p><div class="row"> {% endif %}
<input type="hidden" name="title-{{ loop.index }}" value= {{x}}>
{% endfor %}
</div>
</div>
<div class="row">
<div class="col-sm-12 text-center">
<input type="hidden" name="filename" value= {{filename}}>
<input type="hidden" name="numofField" value= {{numofField}}>
<button class="btn btn-primary" type="submit" value="Update">Submit</button>
</div>
</div>
</div>
</form>
I would like to include an option the user to choose the number of variables he/she wants to choose. Similar to the e-commerce sites or photo albums, they generally give you an option to "show 25" at a time, and give you the option of changing that to "show 50", "show 100", or "show all" in order to allow the user have the control in the amount of clutter they will be able to navigate through in the page. I could find few examples like datatables.js but they only work on tables. I could not find a way how to go about it?
If you access to javascript you can write logic something like this.
let container = document.getElementById('container');
for (let i=0; i<200; i++) {
let div = document.createElement('div');
div.className = 'box';
container.appendChild(div);
}
var items = document.getElementsByClassName('box');
function show(howMany) {
showAll();
let count = parseInt(howMany);
for(let i = 0; i<items.length;i++){
if(i<count){
continue
} else {
items[i].style.display = 'none';
}
}
}
function showAll() {
for(let i = 0; i<items.length;i++){
items[i].style.display = 'inline-block';
}
}
.box{
display: inline-block;
height: 25px;
width: 25px;
background: tomato;
margin-right: 4px;
}
<button onclick="show('50')">show 50</button>
<button onclick="show('100')">show 100</button>
<button onclick="showAll()">show all</button>
<div id="container"></div>
I have this div:
<div id="rightside"><br>
#yield('drop')
</div><br>
and this section:
#extends('layouts.drop')
#section('drop')
<html>
<div class="form-group">
<p id="select">Please make selection for {{ $code }}</p>
<select class="form-control" name="item_id" style="width: 400px">
#foreach($items as $item)
<option value="{{ $item->data }}">{{ $item->data }}</option>
#endforeach
</select>
</div>
</html>
#stop
When I display the layout for this, nothing shows up in the div. Nothing, nada.
I use the div previously in another layout and it displays with no problem. Three hours searching and cannot find solution. Any help would be appreciated. Thanks in advance.