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?
Related
I have above html code. Which has table with rows and each row has selection radio button. There is confirm button. I need to send the row data for selected radio option on button click. How should I find what was selected and send that rows data on button click. I want to use javascript but I am very novice in it. Please suggest.
{% extends "base.html" %} {% block title %}Login{% endblock %} {% block content
%}
<html>
<div class="container ">
<h1>You are proposing trade for:: {{desired_item_details[2]}}</h1>
<style>
th, td
{
border:1px solid blue;
padding:10px;
text-align:left;
}
table
{
border-collapse: collapse;
font-size:12px;
text-align: left;
}
</style>
<!-- Content here -->
</div>
<body>
<div class="home">
<br><br><br>
<label>Please Choose Your Proposed Items::</label>
<table>
<tr>
<th>Item#</th>
<th>Game Type</th>
<th>Title</th>
<th>Condition</th>
</tr>
{% for item in proposed_items %}
<tr>
<td>{{item[0]}}</td>
<td>{{item[1]}}</td>
<td>{{item[2]}}</td>
<td>{{item[3]}}</td>
<td>
<input value="{{item[0]}}" id="type_radio_1" name="select" type="radio" /> Select
</td>
</tr>
{% endfor %}
</table>
</div>
<div class="col">
<a class="btn btn-primary btn-lg" role="button">Confirm</a>
</div>
</body>
</html>
{% endblock %}
Here is a simple solution for your question.
document.getElementById("confirmButton").onclick = ( function(event) {
for(var i = 1; i < 4; i++) {
var radioButton = document.getElementById("type_radio_"+i)
if(radioButton.checked){
alert("You have selected" + radioButton.value);
}
}
});
<input value="{{item[0]}}" id="type_radio_1" name="select" type="radio" /><label for="type_radio_1">Select</label>
<input value="{{item[1]}}" id="type_radio_2" name="select" type="radio" /><label for="type_radio_2">Select</label>
<input value="{{item[2]}}" id="type_radio_3" name="select" type="radio" /><label for="type_radio_3">Select</label>
<input type="button" class="btn btn-primary btn-lg" id="confirmButton" value="Confirm">
You can easily do this using a loop and a condition to check whether the current radio button's id in the loop is selected or not. I have changed your confirm button which was a "a" HTML element to a "input" element.
If you want to change the id of the radio input field dynamically, try to use the below code.
document.getElementById("confirmButton").onclick = ( function(event) {
for(var i = 0; i < 3; i++) {
var radioButton = document.getElementById("{{item["+i+"]}}")
if(radioButton.checked){
alert("You have selected" + radioButton.value);
}
}
});
<input value="{{item[0]}}" id="{{item[0]}}" name="select" type="radio" /><label for="{{item[0]}}">Select</label>
<input value="{{item[1]}}" id="{{item[1]}}" name="select" type="radio" /><label for="{{item[1]}}">Select</label>
<input value="{{item[2]}}" id="{{item[2]}}" name="select" type="radio" /><label for="{{item[2]}}">Select</label>
<input type="button" class="btn btn-primary btn-lg" id="confirmButton" value="Confirm">
Thanks and best regards!
<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%'});
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.