I have tried different CSS properties to make the form scrollable but none is working.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css"> #CDN added here
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.slim.min.js"></script> #CDN added here
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script> #CDN added here
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script> #CDN added here
</head>
<body>
<div data-spy="scroll" class="container"> #Added here
<h2>Form</h2>
<form class="form-inline" action="/action_page.php">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> Remember me
</label>
</div>
<br />
<button type="submit" class="btn btn-primary">Submit</button>
<br />
<label for="email">Email:</label><br /><br />
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email"><br /><br />
<label for="pwd">Password:</label><br /><br />
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd"><br /><br />
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> Remember me
</label>
</div><br /><br />
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Just add like below tag:
#Updated here
<div data-spy="scroll" data-target=".nav"> #.nav is classname from navbar
<form>
#Add here your form
</form>
</div>
The form must be inside div tag and now form is scrollable.
And now your problem is solved.
Happy coding!
Related
I'm trying to write kind off bussiness mail management.
In simple world, it'll have bunch of mail templates that will use un mailmerge operation
There will be 2 kind of user:
those who create mail templates, let's call them 'tc' (template creator)
thoise who will issueing mails by term of triggering a mail merge.
In this post I will only ask about the tc part.
The work sequnce will :
TC make a MS docx,
upload to this web app
web app will get all variable names from docx ( I use docxtpl library), and save it on MailTemplate model class.
here is my MailTemplate model class
class MailTemplate(models.Model):
name = models.CharField(max_length=20)
tfile = models.FileField(upload_to='uploads/mailtemplate', null=True, blank=True)
schema = models.CharField(max_length=256, blank=True, null=True, editable=False)
# conto: ['{"name": "kepada", "label": "Kepada", "type": 2, "format": ""}']
def __str__(self) -> str:
return self.name
all variables gathered by docxtpl, is combined in the form as list-of-dicts and saved in MailTemplate.schema
example:
[{"name": "date", "label": null, "type": 2, "format": ""}, {"name": "invoiceNumber", "label": null, "type": 2, "format": ""}, {"name": "company", "label": null, "type": 2, "format": ""}, {"name": "total", "label": null, "type": 2, "format": ""}]
When TC first update new template, MailTemplate.schema is still empty.
I make ModelAdmin to use custom change_view template.
class MailTemplateAdmin(admin.ModelAdmin):
change_form_template = 'mailtemplate_form.html'
form = MailTemplateForm
and here is the mailtemplate_form.html
{% extends "admin/change_form.html" %}
{% block after_field_sets %}
<!--- add htmx -->
<script src="https://unpkg.com/htmx.org#1.6.0"></script>
<style>
/* DivTable.com */
.divTable{
display: table;
width: 100%;
}
.divTableRow {
display: table-row;
}
.divTableCell, .divTableHead {
border: 1px solid #999999;
display: table-cell;
padding: 3px 10px;
}
.divTableHeading {
display: table-header-group;
font-weight: bold;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}
</style>
<style>
.button.bino_btn {
background:none; border:none;
}
</style>
{% if not add %}
<div id="schema_head" hx-get="{% url 'get_schema' object_id %}" hx-trigger="load" hx-target="#alldata" hx-swap="innerHTML">
<b>Schema </b>
<button class="button.bino_btn" hx-get="{% url 'get_schema' object_id %}" hx-trigger="click" hx-target="#alldata" hx-swap="innerHTML">Refresh</button>
</div>
<div id="table_for_schema" class="divTable">
<div class="divTableHeading">
<div class="divTableRow">
<div class="divTableHead">Nama Variabel</div>
<div class="divTableHead">Label</div>
<div class="divTableHead">Tipe</div>
<div class="divTableHead">Format</div>
</div>
</div>
<div id="alldata" class="divTableBody">
</div>
</div>
{% endif %}
{% endblock %}
when that template called in 'change' mode, it will call a views function that will read respective MailTemplate.schema, deserialized it and add additional fields inside form.
Here is resulted HTML form (copied from 'inspector') :
<html dir="ltr" lang="en-us"><head>
<title>docx01 | Change mail template | Django site admin</title>
<link rel="stylesheet" href="/static/admin/css/base.css">
<link rel="stylesheet" href="/static/admin/css/dark_mode.css">
<link rel="stylesheet" href="/static/admin/css/nav_sidebar.css">
<script src="/static/admin/js/nav_sidebar.js" defer=""></script>
<link rel="stylesheet" href="/static/admin/css/forms.css">
<script src="/admin/jsi18n/"></script>
<script src="/static/admin/js/vendor/jquery/jquery.js"></script>
<script src="/static/admin/js/jquery.init.js"></script>
<script src="/static/admin/js/core.js"></script>
<script src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
<script src="/static/admin/js/actions.js"></script>
<script src="/static/admin/js/urlify.js"></script>
<script src="/static/admin/js/prepopulate.js"></script>
<script src="/static/admin/js/vendor/xregexp/xregexp.js"></script>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="/static/admin/css/responsive.css">
<meta name="robots" content="NONE,NOARCHIVE">
<style> .htmx-indicator{opacity:0;transition: opacity 200ms ease-in;} .htmx-request .htmx-indicator{opacity:1} .htmx-request.htmx-indicator{opacity:1} </style></head>
<body class=" app-myapp model-mailtemplate change-form" data-admin-utc-offset="0">
<!-- Container -->
<div id="container">
<!-- Header -->
<div id="header">
<div id="branding">
<h1 id="site-name">Django administration</h1>
</div>
<div id="user-tools">
Welcome,
<strong>admin</strong>.
View site /
Change password /
<form id="logout-form" method="post" action="/admin/logout/">
<input type="hidden" name="csrfmiddlewaretoken" value="ZBziDfqR44MaX5oT5fyG9cRUkO1uqi70JZjLQB1gzdHWHaL2l7gNYJH0HnLaMWtp">
<button type="submit">Log out</button>
</form>
</div>
</div>
<!-- END Header -->
<div class="breadcrumbs">
Home
› Myapp
› Mail templates
› docx01
</div>
<div class="main shifted" id="main">
<button class="sticky toggle-nav-sidebar" id="toggle-nav-sidebar" aria-label="Toggle navigation"></button>
<nav class="sticky" id="nav-sidebar">
<input type="search" id="nav-filter" placeholder="Start typing to filter…" aria-label="Filter navigation items">
<div class="app-auth module">
<table>
<caption>
Authentication and Authorization
</caption>
<tbody><tr class="model-group">
<th scope="row">Groups</th>
<td>Add</td>
</tr>
<tr class="model-user">
<th scope="row">Users</th>
<td>Add</td>
</tr>
</tbody></table>
</div>
<div class="app-myapp module current-app">
<table>
<caption>
Myapp
</caption>
<tbody><tr class="model-mailtemplate current-model">
<th scope="row">Mail templates</th>
<td>Add</td>
</tr>
</tbody></table>
</div>
</nav>
<div class="content">
<!-- Content -->
<div id="content" class="colM">
<h1>Change mail template</h1>
<h2>docx01</h2>
<div id="content-main">
<ul class="object-tools">
<li>
History
</li>
</ul>
<form enctype="multipart/form-data" method="post" id="mailtemplate_form" novalidate=""><input type="hidden" name="csrfmiddlewaretoken" value="ZBziDfqR44MaX5oT5fyG9cRUkO1uqi70JZjLQB1gzdHWHaL2l7gNYJH0HnLaMWtp">
<div>
<fieldset class="module aligned ">
<div class="form-row field-name">
<div>
<label class="required" for="id_name">Name:</label>
<input type="text" name="name" value="docx01" class="vTextField" maxlength="20" required="" id="id_name">
</div>
</div>
<div class="form-row field-tfile">
<div>
<label for="id_tfile">Tfile:</label>
<p class="file-upload">Currently: uploads/mailtemplate/invoice-template_BCpUuSw.docx
<span class="clearable-file-input">
<input type="checkbox" name="tfile-clear" id="tfile-clear_id">
<label for="tfile-clear_id">Clear</label></span><br>
Change:
<input type="file" name="tfile" id="id_tfile"></p>
</div>
</div>
</fieldset>
<!--- add htmx -->
<script src="https://unpkg.com/htmx.org#1.6.0"></script>
<style>
/* DivTable.com */
.divTable{
display: table;
width: 100%;
}
.divTableRow {
display: table-row;
}
.divTableCell, .divTableHead {
border: 1px solid #999999;
display: table-cell;
padding: 3px 10px;
}
.divTableHeading {
display: table-header-group;
font-weight: bold;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}
</style>
<style>
.button.bino_btn {
background:none; border:none;
}
</style>
<div id="schema_head" hx-get="/mst/htmx/get_schema/7" hx-trigger="load" hx-target="#alldata" hx-swap="innerHTML" class="">
<b>Schema </b>
<button class="button.bino_btn" hx-get="/mst/htmx/get_schema/7" hx-trigger="click" hx-target="#alldata" hx-swap="innerHTML">Refresh</button>
</div>
<div id="table_for_schema" class="divTable">
<div class="divTableHeading">
<div class="divTableRow">
<div class="divTableHead">Nama Variabel</div>
<div class="divTableHead">Label</div>
<div class="divTableHead">Tipe</div>
<div class="divTableHead">Format</div>
</div>
</div>
<div id="alldata" class="divTableBody"><div id="31d6fa45-e660-4983-bfcb-f5217fd26e16" class="divTableRow">
<div class="divTableCell">
<input type="hidden" name="varname_31d6fa45-e660-4983-bfcb-f5217fd26e16" value="date">
date
</div>
<div class="divTableCell">
<input type="text" name="varlabel_31d6fa45-e660-4983-bfcb-f5217fd26e16" value="None" class="vTextField" maxlength="20">
</div>
<div class="divTableCell">
<select name="vartype_31d6fa45-e660-4983-bfcb-f5217fd26e16">
<option value="1">
Integer</option>
<option value="2" selected="">
String</option>
<option value="3">
Date</option>
</select>
</div>
<div class="divTableCell">
<input type="text" name="varformat_31d6fa45-e660-4983-bfcb-f5217fd26e16" class="vTextField" maxlength="20">
</div>
</div>
<div id="0bffd751-79a3-4561-b62f-dc254e2bbaac" class="divTableRow">
<div class="divTableCell">
<input type="hidden" name="varname_0bffd751-79a3-4561-b62f-dc254e2bbaac" value="invoiceNumber">
invoiceNumber
</div>
<div class="divTableCell">
<input type="text" name="varlabel_0bffd751-79a3-4561-b62f-dc254e2bbaac" value="None" class="vTextField" maxlength="20">
</div>
<div class="divTableCell">
<select name="vartype_0bffd751-79a3-4561-b62f-dc254e2bbaac">
<option value="1">
Integer</option>
<option value="2" selected="">
String</option>
<option value="3">
Date</option>
</select>
</div>
<div class="divTableCell">
<input type="text" name="varformat_0bffd751-79a3-4561-b62f-dc254e2bbaac" class="vTextField" maxlength="20">
</div>
</div>
<div id="cc528860-3855-4645-bd3f-948e297bda76" class="divTableRow">
<div class="divTableCell">
<input type="hidden" name="varname_cc528860-3855-4645-bd3f-948e297bda76" value="company">
company
</div>
<div class="divTableCell">
<input type="text" name="varlabel_cc528860-3855-4645-bd3f-948e297bda76" value="None" class="vTextField" maxlength="20">
</div>
<div class="divTableCell">
<select name="vartype_cc528860-3855-4645-bd3f-948e297bda76">
<option value="1">
Integer</option>
<option value="2" selected="">
String</option>
<option value="3">
Date</option>
</select>
</div>
<div class="divTableCell">
<input type="text" name="varformat_cc528860-3855-4645-bd3f-948e297bda76" class="vTextField" maxlength="20">
</div>
</div>
<div id="66971274-8d70-4766-8254-996bda8991b0" class="divTableRow">
<div class="divTableCell">
<input type="hidden" name="varname_66971274-8d70-4766-8254-996bda8991b0" value="total">
total
</div>
<div class="divTableCell">
<input type="text" name="varlabel_66971274-8d70-4766-8254-996bda8991b0" value="None" class="vTextField" maxlength="20">
</div>
<div class="divTableCell">
<select name="vartype_66971274-8d70-4766-8254-996bda8991b0">
<option value="1">
Integer</option>
<option value="2" selected="">
String</option>
<option value="3">
Date</option>
</select>
</div>
<div class="divTableCell">
<input type="text" name="varformat_66971274-8d70-4766-8254-996bda8991b0" class="vTextField" maxlength="20">
</div>
</div>
<div id="01ed7377-b526-4acf-a556-b87a1012091f" class="divTableRow">
<div class="divTableCell">
<input type="hidden" name="varname_01ed7377-b526-4acf-a556-b87a1012091f" value="items">
items
</div>
<div class="divTableCell">
<input type="text" name="varlabel_01ed7377-b526-4acf-a556-b87a1012091f" value="None" class="vTextField" maxlength="20">
</div>
<div class="divTableCell">
<select name="vartype_01ed7377-b526-4acf-a556-b87a1012091f">
<option value="1">
Integer</option>
<option value="2" selected="">
String</option>
<option value="3">
Date</option>
</select>
</div>
<div class="divTableCell">
<input type="text" name="varformat_01ed7377-b526-4acf-a556-b87a1012091f" class="vTextField" maxlength="20">
</div>
</div>
</div>
<!--div id="alldata" hx-get="/mst/htmx/get_schema/7" hx-trigger="load" hx-swap="beforeend" class="divTableBody">
</div-->
</div>
<div class="submit-row">
<input type="submit" value="Save" class="default" name="_save">
<p class="deletelink-box">Delete</p>
<input type="submit" value="Save and add another" name="_addanother">
<input type="submit" value="Save and continue editing" name="_continue">
</div>
<script id="django-admin-form-add-constants" src="/static/admin/js/change_form.js" async="">
</script>
<script id="django-admin-prepopulated-fields-constants" src="/static/admin/js/prepopulate_init.js" data-prepopulated-fields="[]">
</script>
</div>
</form></div>
<br class="clear">
</div>
<!-- END Content -->
<div id="footer"></div>
</div>
</div>
</div>
<!-- END Container -->
</body></html>
it's clear that all additional field is between form tags.
And here is my MailTemplateForm class
class MailTemplateForm(forms.ModelForm):
def clean(self):
cleaned_data = super().clean()
print(f'Cleaned Data:\n{cleaned_data}\n-------')
class Meta:
model = MailTemplate
fields = '__all__'
see that currently for all additional fields I only want to debug print it .
When I edit one of additional field and do save, I only got
Cleaned Data:
{'name': 'docx01', 'tfile': <FieldFile: uploads/mailtemplate/invoice-template_BCpUuSw.docx>}
-------
[16/Jan/2023 05:11:35] "POST /admin/myapp/mailtemplate/7/change/ HTTP/1.1" 302 0
[16/Jan/2023 05:11:35] "GET /admin/myapp/mailtemplate/ HTTP/1.1" 200 6823
[16/Jan/2023 05:11:35] "GET /admin/jsi18n/ HTTP/1.1" 200 3141
So, my question is:
How to read all the additional data in forms.py?
Kindly please give me any clue.
Sincerely
bino
I am trying trying to integrate bootstrap into my Django site but it doesn't look quite right. I was looking for CSS clashes but the only stuff I could find is in the static folder and it just has admin related CSS. All my pages work its just the CSS that looks a bit off. Any help is great, thanks.
<!-- templates/base.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
{% block nav %}
<ul id="nav">
<li>{% block nav-home %}Home{% endblock %}</li>
</ul>
{% endblock %}
<div id='content' class='main'>
{% block content %}
{% endblock %}
</div>
{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
{% endblock %}
</body>
</html>
<!-- templates/registration/login.html -->
{% extends "base.html" %}
{% block title %}Log in{% endblock %}
{% block content %}
<section class="vh-100" style="background-color: #508bfc;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12 col-md-8 col-lg-6 col-xl-5">
<div class="card shadow-2-strong" style="border-radius: 1rem;">
<div class="card-body p-5 text-center">
<h3 class="mb-5">Sign in</h3>
<div class="form-outline mb-4">
<input type="email" id="typeEmailX-2" class="form-control form-control-lg" />
<label class="form-label" for="typeEmailX-2">Email</label>
</div>
<div class="form-outline mb-4">
<input type="password" id="typePasswordX-2" class="form-control form-control-lg" />
<label class="form-label" for="typePasswordX-2">Password</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-start mb-4">
<input class="form-check-input" type="checkbox" value="" id="form1Example3" />
<label class="form-check-label" for="form1Example3"> Remember password </label>
</div>
<button class="btn btn-primary btn-lg btn-block" type="submit">Login</button>
<hr class="my-4">
<button class="btn btn-lg btn-block btn-primary" style="background-color: #dd4b39;"
type="submit"><i class="fab fa-google me-2"></i> Sign in with google</button>
<button class="btn btn-lg btn-block btn-primary mb-2" style="background-color: #3b5998;"
type="submit"><i class="fab fa-facebook-f me-2"></i>Sign in with facebook</button>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
Expected:
Actual:
The problem isn't with your library imports. It's with your syntax. Make sure you're following the correct documentation version.
Inputs won't have internal labels if you use label elements like that. Use aria-label and placeholder attributes on the input element instead.
Buttons aren't sized with btn-block in Bootstrap 5. Use the w-100 sizing class instead.
Buttons don't have uppercase labels in Bootstrap 5, either. That screenshot must be from an earlier version.
And buttons won't have default margin. Use spacing classes as needed.
Font sizes are calculated and configured differently from earlier versions as well.
in the email and password input tags include
<input ..... placeholder="Email">
Doing this will put email inside of the text box.
If you do this...
<div class="form-outline mb-4">
<label class="form-label" for="typePasswordX-2">Password</label>
<input type="password" id="typePasswordX-2" class="form-control form-control-lg" />
</div>
The label will appear above the text box. If you do not want just get rid of the label tag. I recommend leaving it on as it helps with accessibility.
and add a
<br/>
tag between the buttons
I built a simple contact form using foundation and its abide plugin. It's basically working, except one thing: The validation for the email input field.
If I submit the form without entering any data, abide shows both validation error messages correctly.
If I enter just input into the message textarea and leave the email input blank, then abide prevents submitting the form, but it doesn't show the error message. It just marks the email input as invalid.
If I enter a valid email address and leave the message textarea blank, then abide shows both validation error messages although the email address is correct.
You can check it on jsbin: https://output.jsbin.com/cacucunama
Minimal running example (same as jsbin):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>ZURB Foundation Abide form validation error</title>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/foundation-sites#6.6.3/dist/css/foundation.min.css">
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/foundation-sites#6.6.3/dist/js/foundation.min.js"></script>
</head>
<body>
<form action="#" method="get" enctype="multipart/form-data" data-abide novalidate id="footer-contact-form">
<div class="input-group">
<span class="input-group-label">N</span>
<input name="user[name]" value="" type="text" id="footer-contact-form--name" class="input-group-field"
placeholder="Name">
</div>
<div class="input-group">
<span class="input-group-label">#</span>
<input name="user[email]" value="" type="email" id="footer-contact-form--email" class="input-group-field"
placeholder="Email address*" required pattern="email">
</div>
<label class="form-error" data-form-error-for="footer-contact-form--email">Valid email required.</label>
<textarea name="user[message]" id="footer-contact-form--message" placeholder="Message*" rows="3"
required=""></textarea>
<label class="form-error" data-form-error-for="footer-contact-form--message">A message is required.</label>
<button value="" type="submit" class="button expanded">Send</button>
</form>
</body>
</html>
As already answered at https://foundation.discourse.group/t/abide-doesnt-show-the-correct-validation-error-message/2276/10 you forgot to wrap the label + input pars in the part with the email input and message textarea.
https://codepen.io/DanielRuf/pen/dyYpjYZ
It works with the following code:
<form action="#" method="get" enctype="multipart/form-data" data-abide novalidate id="footer-contact-form">
<div class="input-group">
<span class="input-group-label">N</span>
<input name="user[name]" value="" type="text" id="footer-contact-form--name" class="input-group-field"
placeholder="Name">
</div>
<div>
<div class="input-group">
<span class="input-group-label">#</span>
<input name="user[email]" value="" type="email" id="footer-contact-form--email" class="input-group-field"
placeholder="Email address*" required pattern="email">
</div>
<label class="form-error" data-form-error-for="footer-contact-form--email">Valid email required.</label>
</div>
<div>
<textarea name="user[message]" id="footer-contact-form--message" placeholder="Message*" rows="3"
required=""></textarea>
<label class="form-error" data-form-error-for="footer-contact-form--message">A message is required.</label>
</div>
<button value="" type="submit" class="button expanded">Send</button>
</form>
I am using check box control in a simple django application. When I use the standard check box control, I can get the desired values in views.py. But I fail to get the values when I use bootstrap check box control. Logic seems to be fine, I don't know why it's not working. Can anybody point out the mistake, Thanks in advance.
Standard Way
<input type="checkbox" name="fruit" value="Apple"> Apple
<input type="checkbox" name="fruit" value="Mango"> Mango
Bootstrap Way
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="fruit">
<label class="form-check-label" for="fruit">Apple</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="fruit">
<label class="form-check-label" for="fruit">Mango</label>
</div>
view.py
if request.method == 'POST':
fruit = request.POST.getlist('fruit')
You have set id="fruit" for both and for="fruit" for both.
Those need to be different for different checkboxes.
Also, the values were set to empty in your case.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container mt-3">
<div class="row">
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="Apple" id="apple">
<label class="form-check-label" for="apple">Apple</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="Mango" id="mango">
<label class="form-check-label" for="mango">Mango</label>
</div>
</div>
</div>
</div>
Now I need the following search structure in the theme:
<div class="sideCol">
<aside class="siteSearch">
<form name="searchform" action="search" class="searchPage searchform" id="searchform">
<fieldset>
<legend>Website durchsuchen</legend>
<input class="searchPage text lang-de" name="SearchableText" type="text" size="25" title="Website durchsuchen" value="" placeholder="Suchbegriff..." />
<button type="submit"><i class="icon-search"></i></button>
</fieldset>
</form>
</aside>
</div>
All I need to get from Plones sunburst theme is the action link for the form element.
So I tried this:
<replace css:content-children="#portal-searchbox">
<xsl:variable name="action_link" select="form/#action" />
<form name="searchform" action="search" class="searchPage searchform" id="searchform">
<xsl:attribute name="action">${action_link}</xsl:attribute>
<fieldset>
<legend>Website durchsuchen</legend>
<input class="searchPage text lang-de" name="SearchableText" type="text" size="25" title="Website durchsuchen" value="" placeholder="Suchbegriff..." />
<button type="submit"><i class="icon-search"></i></button>
</fieldset>
</form>
</replace>
<replace css:content-children="#portal-searchbox" css:theme-children=".siteSearch" />
The problem ist that all I get in the theme is the structure of Plones Sunburst Search.
<div class="sideCol">
<aside class="siteSearch">
<form id="livesearch0" action="http://localhost:8080/mamuz/de/##search">
<div class="LSBox">
<label class="hiddenStructure" for="searchGadget">Website durchsuchen</label>
<input name="SearchableText" type="text" size="18" title="Website durchsuchen" placeholder="Website durchsuchen" accesskey="4" class="searchField" id="searchGadget" autocomplete="off">
<input class="searchButton" type="submit" value="Suche">
<div class="searchSection">
<input id="searchbox_currentfolder_only" class="noborder" type="checkbox" name="path" value="/mamuz/de/impressum">
<label for="searchbox_currentfolder_only" style="cursor: pointer">nur im aktuellen Bereich</label>
</div>
<div class="LSResult" id="LSResult">
<div class="LSShadow" id="LSShadow"></div>
</div>
</div>
</form>
<div id="portal-advanced-search" class="hiddenStructure">
Erweiterte Suche…
</div>
</aside>
</div>
I'm familiar with diazo but pretty new to xslt. What is wrong? I tired several types of placements like import before it gets modified. Nothing helps.
Using the replace directive on attribute itself should work:
<replace attributes="action"
css:content="#portal-searchbox form"
css:theme="#searchform" />