My site has a newsbanner which is displayed on every page, thus I have created static_placeholders to manage the content of it. However, the banner has a different look on mobile, which means I've created 2 sections, where one displays the large screen newsbanner and the other section displays the mobile version. The content, however, is the same, so I have duplicated the static_placeholder from the large screen section to the mobile section like this:
<div class="section no-padding">
<div class="row hide-on-large-only hide" id="announcement-mobile" style="background: linear-gradient(to bottom, #26a69a 0%, #26a69a 50%, #ffffff 50%, #ffffff 100%); ">
<div class="col s12">
<div class="card">
<div class="card-image"><a class="btn-floating btn-flat waves-effect waves-default transparent hide-announcement" href="#!" style=""><i class="material-icons">close</i> </a>
{% static_placeholder "CTA billede" %}
<span class="card-title"><i class="material-icons">fiber_new</i> {% static_placeholder "CTA overskrift" %}</span></div>
<div class="card-content">
<p class="teal-text text-lighten-1 left-align">{% static_placeholder "CTA tekst" %}</p>
</div>
<div class="card-action">
{% static_placeholder "CTA links" %}
</div>
</div>
</div>
</div>
</div><!-- end mobile -->
<div class="section no-padding">
<div class="row hide-on-med-and-down hide" id="announcement" style="background: linear-gradient(to bottom, #26a69a 0%, #26a69a 50%, #ffffff 50%, #ffffff 100%); ">
<div class="col s12 m8 offset-m2">
<div class="card horizontal hoverable">
<div class="card-image">
{% static_placeholder "CTA billede" %}
</div>
<div class="card-stacked">
<a class="btn-floating btn-flat waves-effect waves-default transparent hide-announcement" href="#!"><i class="material-icons blue-grey-text">close</i> </a>
<div class="card-content blue-grey-text">
<span class="card-title light blue-grey-text"><i class="material-icons small">fiber_new</i>{% static_placeholder "CTA overskrift" %} </span>
<div class="divider blue-grey" style="padding-bottom: 5px; margin-bottom: 15px;"></div>
<p class="blue-grey-text left-align">{% static_placeholder "CTA tekst" %}</p>
</div>
<div class="card-action">
{% static_placeholder "CTA links" %}
</div>
</div>
</div>
</div>
</div><!-- end desktop -->
</div><!-- End CTA -->
This however throws the following error:
Which results in placeholder becoming uneditable.
python version 3.6.1
Django version 1.10.7
Djangocms version 3.4.4
Related
The HTML is located below, If the span value is less than 20%, then I want to remove the span child up until the <div class="action"> parent only.
So for example:
<div class="item">
<div class="info">
<div class="action">
<div class="content">
<span class="content-name"> 5% </span>
</div>
</div>
</div>
</div>
From the above HTML, these code should only be removed:
<div class="action">
<div class="content">
<span class="content-name"> 5% </span>
</div>
</div>
So what should left is:
<div class="item">
<div class="info">
</div>
</div>
This is my current python code:
items = WebDriverWait(driver, 10).until(EC.visibility_of_all_elements_located((By.XPATH, "//span[#class='content-name']")))
for item in items:
percentage_text = re.findall("\d+", item.text)[0]
if int(percentage_text) <= 20:
driver.execute_script("arguments[0].remove();", item)
But it only removes the span class and not its parent.
Here is the full HTML, I think it needs javascript to remove elements but I am very new on javascript I researched for more than 2 hours and I still can't find solutions. Thank you very much.
<div class="item">
<div class="info">
<div class="action">
<div class="content">
<span class="content-name"> 5% </span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="info">
<div class="action">
<div class="content">
<span class="content-name"> 95% </span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="info">
<div class="action">
<div class="content">
<span class="content-name"> 32% </span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="info">
<div class="action">
<div class="content">
<span class="content-name"> 15% </span>
</div>
</div>
</div>
</div>
get to the parent of the parent:
driver.execute_script("arguments[0].parentElement.parentElement.remove();", item)
I am creating the dashboard view for my CRM. However while displaying the card view, only two of the three card views are visible. Can anyone help me regarding this? Is this a code formatting issue?
I am adding an image of the dashboard for my CRM below as well as the code for the cards given below.
example.html:
{% extends 'base.html' %}
{% block content %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<!-- Begin Page Content -->
<div class="container-fluid">
<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4 mt-4">
<h1 class="h3 mb-0 text-gray-800">Welcome to NexCRM</h1>
<i class="fas fa-download fa-sm text-white-50"></i> Generate Report
</div>
<!-- Main Content Here -->
<div class="row">
<!-- Company Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Companies</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">4,083</div>
</div>
<div class="col-auto">
<i class="fas fa-building fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Company Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Companies</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">4,083</div>
</div>
<div class="col-auto">
<i class="fas fa-building fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Contact Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-warning shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Contacts</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">18,002</div>
</div>
<div class="col-auto">
<i class="fas fa-comments fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Content Row -->
<div class="row">
<!-- Area Chart -->
<div class="col-xl-8 col-lg-7">
<div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Earnings Overview</h6>
<div class="dropdown no-arrow">
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
</a>
<div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
<div class="dropdown-header">Dropdown Header:</div>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<!-- Card Body -->
<div class="card-body">
<div class="chart-area">
<canvas id="myAreaChart"></canvas>
</div>
</div>
</div>
</div>
<!-- Pie Chart -->
<div class="col-xl-4 col-lg-5">
<div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Revenue Sources</h6>
<div class="dropdown no-arrow">
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
</a>
<div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
<div class="dropdown-header">Dropdown Header:</div>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<!-- Card Body -->
<div class="card-body">
<div class="chart-pie pt-4 pb-2">
<canvas id="myPieChart"></canvas>
</div>
<div class="mt-4 text-center small">
<span class="mr-2">
<i class="fas fa-circle text-primary"></i> Direct
</span>
<span class="mr-2">
<i class="fas fa-circle text-success"></i> Social
</span>
<span class="mr-2">
<i class="fas fa-circle text-info"></i> Referral
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
{% endblock content %}
I'm trying to make it like the following: https://getbootstrap.com/docs/4.3/examples/pricing/
it shows the screen divided into three section
so it should be like this I think...
<div class="row mb-2">
<div class="col-4 bg-danger">
.col-4
</div>
<div class="col-4 bg-warning">
.col-4
</div>
<div class="col-4 bg-success">
.col-4
</div>
</div>
But the problem is I am using django jinja template and for loop. so it groups the whole content.
This is my code but it won't do what's like in the link
<div class="row">
<div class="col-6 col-md-4">
<div class="card">
{% for all_episode in episode %}
<img class="card-img-top" src='{{all_episode.image.url}}'>
<div class="card-body">
<h5 class="card-title">
{{ all_episode.title }}
</h5>
<p class="card-text">{{ all_episode.story |slice:":100" }}...</p>
</div>
<div class="card-footer">
<small class="text-muted">
<span class="h5">
{{ all_episode.series }}
</span> /
<span class="h6">{{ all_episode.season }}</span></small>
</div>
{% endfor %}
</div>
</div>
I'm new to Jinja and this is my first post here on Stack Overflow.
I'm trying to loop through a gallery of images handled by bootstrap carousel/modal. I was able to let it work; <img> and <div> are rendered correctly, however I can't loop through the active element. Searching the web, I found that macros can help achieve it but I'm not familiar with using them. Here's the code I'm working on:
<div class="modal fade" id="myModalGal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<!-- Wrapper for slides -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
{% for content in porte %}
{% if content.gal_porte %}
<img src="{{content.gal_porte}}" class="img-responsive" alt="test">
<div class="carousel-caption"></div>
</div>
<div class="item">
{% elif content.gal_porte %} <img src="{{content.gal_porte}}" class="img-responsive" alt="test1">
<div class="carousel-caption"></div>
{% endif %}
{% endfor %}
</div>
<!-- Controls -->
<a class="home-icon left" href="#carousel-example-generic" role="button" data-slide="prev"> <i class="fa fa-arrow-left"></i>
</a> <a class="home-icon right" href="#carousel-example-generic" role="button" data-slide="next"> <i class="fa fa-arrow-right" style="text-align: right;"></i>
</a>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
Jinja for loops have counters so you can check if you are on the first iteration of the loop and make that one the active slide.
Something like this:
<div class="carousel-inner">
{% for content in porte %}
<div class="item{% if loop.index == 1 %} active{% endif %}">
<img src="{{content.gal_porte}}" class="img-responsive" alt="test1">
<div class="carousel-caption"></div>
</div>
{% endfor %}
<!-- Controls -->
<a class="home-icon left" href="#carousel-example-generic" role="button" data-slide="prev">
<i class="fa fa-arrow-left"></i>
</a>
<a class="home-icon right" href="#carousel-example-generic" role="button" data-slide="next">
<i class="fa fa-arrow-right" style="text-align: right;"></i>
</a>
</div>
I tried the following to identify elements but I am getting "No element found" message when I run my scripts.
Method1 tried:
self.driver.find_element_by_xpath("//button[text()='Adopt and Initial']").click()
Method2 tried:
self.driver.find_element_by_css_selector(".btn-primary.btn.left.item-alt").click()
HTML of the button:
Updated Html code for the element. This is for docusign.
<div class="dialog is-signature-mode" tabindex="0">
<header class="dialog-header">
<h1 class="dialog-title">
<span class="item-alt" data-group="tagType" data-group-item="signature">Adopt Your Signature</span>
<span class="item-alt" data-group="tagType" data-group-item="initials" data-selected="">Adopt Your Initials</span>
</h1>
<nav class="icons">
<a class="close" data-action="cancelAdoptSignature">
<i class="icon-close"></i>
</a>
</nav>
</header>
<section class="dialog-body">
<article id="adopt">
<header class="ds-title p">
Confirm your name, initials, and signature.
</header>
<div class="full-name">
<div class="wrapper">
<label for="full-name">Full Name</label> <span class="error hidden">Name required</span>
<br>
<div class="text-input-wrapper">
<input id="full-name" disabled="" value="QAAuto 01Dec2014_10.41.03" name="fullname" type="text" class="required text-input" maxlength="50">
</div>
</div>
</div>
<div class="initials">
<div class="wrapper">
<label for="initials">Initials</label> <span class="error hidden">Initials required</span>
<br>
<div class="text-input-wrapper">
<input id="initials" disabled="" value="Q0" name="initials" type="text" class="required text-input" maxlength="50">
</div>
</div>
</div>
<div class="clear-float"></div>
</article>
<header class="tab-nav">
<ul>
<li>Select Style</li>
<li>Draw</li>
</ul>
</header>
<article id="select-style" class="tab-panel panel-select-style selected">
<h4 class="normal">Preview <span class="error"></span></h4>
<div class="signature-preview">
<div class="signature"><img alt="" src="https://demo.docusign.net/Signing/image.aspx?ti=56b2faad38e7427a99defd1dfaa258ce&insession=1&i=asig150&force=154&s=QAAuto+01Dec2014_10.41.03&f=7_DocuSign&nochrome=0" height="75px" class="signature-img left">
<img alt="" src="https://demo.docusign.net/Signing/image.aspx?ti=56b2faad38e7427a99defd1dfaa258ce&insession=1&i=ainit150&force=155&s=Q0&n=QAAuto+01Dec2014_10.41.03&f=7_DocuSign&nochrome=0" height="75px" class="initials-img right">
<div class="clear-float"></div></div>
<a class="change-style">
Change Style
</a>
<div class="clear-float"></div>
</div>
</article>
<article id="draw" class="tab-panel panel-draw">
<h4 class="normal">
<span class="item-alt-inline" data-group="tagType" data-group-item="signature">Draw your signature</span>
<span class="item-alt-inline" data-group="tagType" data-group-item="initials" data-selected="">Draw your initials</span>
<span class="error"></span>
</h4>
<a class="clear" data-ds="clear">Clear</a>
<div class="signature-draw signature">
<div class="canvas-wrapper"><canvas class="canvas" width="0" height="0"></canvas><canvas class="canvas" width="0" height="0"></canvas></div></div>
</article>
<p class="legalese">By clicking Adopt and Sign, I agree that the signature and initials will be the electronic representation of my signature and initials for all purposes when I (or my agent) use them on documents, including legally binding contracts - just the same as a pen-and-paper signature or initial.</p>
<hr>
<button class="btn-primary btn left item-alt" data-group="tagType" data-group-item="signature" type="button" data-ds="submit" value="initials">Adopt and Sign</button>
<button class="btn-primary btn left item-alt" data-group="tagType" data-group-item="initials" type="button" data-ds="submit" value="initials" data-selected="">Adopt and Initial</button>
<button class="close left btn btn-default" type="button" data-action="cancelAdoptSignature">Cancel</button>
<div class="clear-float"></div>
<div class="styles"></div></section>
</div>
Please try below xpath and let me know what happens
assertTrue(driver.getPageSource().contains("Adopt and Initial"));
self.driver.find_element_by_xpath("//button[conatins(text(),'Adopt and Initial')]".click();
Now Make sure you use assertion before the command because if the assertion fails then the element is not present in the current frame. so we will have to switch the correct frame before we perform the action.
Let me know if you try this.