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.
Related
I am having problems with tippy.js tooltip and multiline html content. I cannot get the line breaks to work at all. HTML template below:
<div id="div_id_criticality" class="form-group">
<label for="id_criticality" class="requiredField">
Criticality<span class="asteriskField">*</span>
</label>
<span class="formHelp" tippy-message="tippy-criticality" id="formHelp-criticality"><i class="fas fa-question-circle"></i></span>
<div>
<select name="criticality" class="select form-control" required="" id="id_criticality">
<option value="">-- Select criticality --</option>
{% for key, value in criticality.items %}
<option value="{{ key }}">{{ value }}</option>
{% endfor %}
</select>
</div>
</div>
<div id="tippy-criticality" class="tippy-multiline" style="display: none;">
Line 1<br>
Line 2<br>
Line 3<br>
Line 4
</div>
<script>
tippy('#formHelp-criticality', {
content(reference) {
const id = reference.getAttribute('tippy-message');
const template = document.getElementById(id);
return template.innerHTML;
allowHTML=true;
}
});
</script>
I also have CSS file containing:
.tippy-multiline {
white-space:pre !important;
}
Also tried:
.tippy-multiline {
white-space:pre-wrap !important;
}
What happens is that the tooltip shows single line of text "Line 1< br>Line 2< br>Line 3< br>Line 4".
What I am missing here?
I cannot seem to quite search for the correct term to solve my issue but, I have this weird text field like thing above my select list:
<div class="col-md-4">
<div class="form-group">
<select class="form-control w-100 config_view_type">
<option value="P">Public</option>
<option value="R">Restricted</option>
</select>
</div>
</div>
what's causing it to appear?
I think you have positioned your form using css. Can you elaborate your code a bit more? I just placed your code inside a template and it seems to be working fine.
<!DOCTYPE html>
<html>
<body>
<h1>The select element</h1>
<p>The select element is used to create a drop-down list.</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<div class="col-md-4">
<div class="form-group">
<select class="form-control w-100 config_view_type">
<option value="P">Public</option>
<option value="R">Restricted</option>
</select>
</div>
</div>
what's causing
<br><br>
<input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form-data will be sent to a page on the
server called "action_page.php".</p>
</body>
</html>
Your code Worked fine, maybe the issue with which bootstrap you linked the document with. try the bootstrap link I used
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="col-md-4">
<div class="form-group">
<select class="form-control w-100 config_view_type">
<option value="P">Public</option>
<option value="R">Restricted</option>
</select>
</div>
</div>
<label for="extras">Extras</label>
<select id='extras' class="form-control form-control-sm">
<option>None</option>
{% for ex in extra %}
<option>
<span>
<div>{{ ex.itemname }}</div>
<div style='float: right; font-weight: bold; color:green;'>${{ ex.smallcost }</div>
</span>
</option>
{% endfor %}
</select>
I have applied some styling to the cost but it is not working, you can see in the image below.
This is because <option> tags cannot have any HTML markup inside them. Moreover, only a few basic CSS styles can be applied to them.
If you want to style your <option>s, your best option is creating your own custom select box. (See this answer on a similar question.)
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 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%'});