CMSMS does not display html code in edito - cmsmadesimple

I have a very weird problem with CMSMS. I have some HTML in my header file, there should be 2 links, but every time I paste a second one and click Apply- it disappears from editor. Although it shows on website.
CMSMS version: 1.11.9
<div class="header">
<div class="container">
<div class="row-fluid">
<div class="logo_wrapper">
<div class="logo"><img src="{root_url}/ui/images/logo.png" alt="" /></div>
</div>
<div class="span6 pull-right">{if $sid == 1 }
<div class="kabinet pull-right"><a class="rounded" href="apps/customer/web/profile/edit"> Профиль</a></div>
{else}
<div class="kabinet pull-right"><a class="rounded dark" href="#"> Статус доставки</a> <a class="rounded" href="apps/customer/web/login"> Личный кабинет</a></div>
{/if}</div>
</div>
<hr />
<div>
<div class="nav">
<div class="nav-inner">{menu loadprops=0}</div>
</div>
</div>
</div>
</div>
It should be after save:
<div class="header">
<div class="container">
<div class="row-fluid">
<div class="logo_wrapper">
<div class="logo"><img src="{root_url}/ui/images/logo.png" alt="" /></div>
</div>
<div class="span6 pull-right">{if $sid == 1 }
<div class="kabinet pull-right"><a class="rounded" href="apps/customer/web/profile/edit"> Профиль</a>
(this link keeps disappearing)
<a class="rounded no-bg-color" href="apps/customer/web/logout"><i class="icon-off icon-white"></i></a>
</div>
{else}
<div class="kabinet pull-right"><a class="rounded dark" href="#"> Статус доставки</a> <a class="rounded" href="apps/customer/web/login"> Личный кабинет</a></div>
{/if}</div>
</div>
<hr />
<div>
<div class="nav">
<div class="nav-inner">{menu loadprops=0}</div>
</div>
</div>
</div>
</div>

It's probably the HTML editor (MicroTiny I expect) believing that link is invalid HTML and throwing it away.
Set the editor to HTML mode so that you can edit the HTML directly (not WYSIWYG). It will then accept your edits and not try to edit them.

Related

Bootstrap Why text doesn't change line properly

The text doesn't change line properly, I thought it should run in the column and auto change to next line, so they are stay in the column. That's what I saw in the video but is not working.
Thanks for helping.
Here are pictures.
https://ppt.cc/fr1JQx , https://ppt.cc/fPDr2x
Here is my code.
<style type="text/css">
.item:first-letter{
font-size: 50px;
float: left;
}
.item{
background-color: rgb(62, 116, 163);
}
</style>
</head>
<body>
<div class="container">
<div class="row g-5">
<div class="col-3 mb-4" >
<div class="item h-100 width-10">
A abcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcd</div>
</div>
<div class="col-3 mb-4">
<div class="item h-100">
B abcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcd
</div>
</div>
<div class="col-3 mb-4">
<div class="item h-100">
C abcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd
</div>
</div>
<div class="col-3 mb-4">
<div class="item h-100">
D abcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd</div>
</div>
</div>
</div>
Two options to fix:
I found this answer which explains in a bit more detail, but if this is really your content (I doubt it) you need to add this to your CSS:
word-wrap:break-word;
Otherwise I've slightly tweaked your layout and added some real content:
<div class="container">
<div class="row">
<div class="col-3 mb-4">
<p class="h-100 item">
A This is some normal text. I don't know the difference?
</p>
</div>
<div class="col-3 mb-4">
<p class="h-100 item">
B You need to use a normal paragraph structure, testing testing testing testing
</p>
</div>
<div class="col-3 mb-4">
<p class="h-100 item">
C abcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd
</p>
</div>
<div class="col-3 mb-4">
<p class="h-100 item">
D abcdabcdabcdabcdabcdabcdabcd
abcdabcdabcdabcdabcdabcdabcdabcd
</p>
</div>
</div>
</div>
You can see that the columns with garbage content are still broken, but the ones I changed work fine.

Parse a challenging block of html with beautifulsoup

I've tried a lot of options with beautifulsoup but cannot seem to figure how to parse the following:
<div class="docSection profileQuestionsSection">
<div id="D_memberProfileQuestions" class="dotted-section">
<div id="D_memberProfileMeta" class="line">
<div class="unit size1of3">
<div class="D_memberProfileContentItem">
<h4 class="flush--bottom">Location:</h4>
<p itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<span class="locality" itemprop="addressLocality">website</span>, <span class="region" itemprop="addressRegion">WA</span><span class="display-none country-name" itemprop="addressCountry">USA</span>
</p>
</div>
</div>
<div class="unit size1of3">
<div class="D_memberProfileContentItem">
<h4 class="flush--bottom">Member since:</h4>
<p>July 14, 2021</p>
</div>
</div>
<div class="size1of3 lastUnit">
<div class="D_memberProfileContentItem">
</div>
</div>
</div>
<div class="line">
</div>
<div class="D_memberProfileContentItem">
<h4 class="flush--bottom">What types of events in the area interest you?</h4>
<p class="D_empty">No answer yet</p>
</div>
<div class="D_memberProfileContentItem">
<h4 class="flush--bottom">Introduction</h4>
<p class="D_empty">No introduction yet</p>
</div>
</div>
</div>
From the above snippet I'm trying to parse the following bolded text from <p>:
What types of events in the area interest you?
No answer yet
If I try the following the just prints blank lists [] what might i be doing wrong?
req=requests.get(member)
soupp=BeautifulSoup(req.text, "html.parser")
div=soupp.find('div',attrs={"class":"D_memberProfileContentItem"})
children=div.findChildren("div", recursive=True)
for child in children:
print(child)
Any thoughts? Thanks.
from bs4 import BeautifulSoup
html = '''<div class="docSection profileQuestionsSection">
<div id="D_memberProfileQuestions" class="dotted-section">
<div id="D_memberProfileMeta" class="line">
<div class="unit size1of3">
<div class="D_memberProfileContentItem">
<h4 class="flush--bottom">Location:</h4>
<p itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<a href="https://www.website.com/cities/us/97298/"><span class="locality"
itemprop="addressLocality">website</span>, <span class="region"
itemprop="addressRegion">WA</span></a><span class="display-none country-name"
itemprop="addressCountry">USA</span>
</p>
</div>
</div>
<div class="unit size1of3">
<div class="D_memberProfileContentItem">
<h4 class="flush--bottom">Member since:</h4>
<p>July 14, 2021</p>
</div>
</div>
<div class="size1of3 lastUnit">
<div class="D_memberProfileContentItem">
</div>
</div>
</div>
<div class="line">
</div>
<div class="D_memberProfileContentItem">
<h4 class="flush--bottom">What types of events in the area interest you?</h4>
<p class="D_empty">No answer yet</p>
</div>
<div class="D_memberProfileContentItem">
<h4 class="flush--bottom">Introduction</h4>
<p class="D_empty">No introduction yet</p>
</div>
</div>
</div>'''
soup = BeautifulSoup(html, 'lxml')
print(soup.select_one('.D_memberProfileContentItem:nth-child(3) > p').text)
Output:
No answer yet

Why is get route showing TypeError: Cannot read property 'title' of null and crashing the website?

i am building an express app with mongodb in nodejs, When i make a get request to the show posts route , then all posts are rendered correctly when i pass them in ejs file but after the show page is displayed it gives an error on the terminal
events.js:291 throw er; // Unhandled 'error' event ^ TypeError: Cannot read property 'title' of null
this is my get route in router/posts.js
router.get("/commerce", (req,res)=>{
if(req.query.search){
var noMatch;
// gives search results on author name, content and title of the post
const regex = new RegExp(escapeRegex(req.query.search), 'gi')
Post.find({$or: [{title:regex} , {content:regex}, {'author.username':regex}], subject: "commerce"}, function(err,allposts){
if(err) console.log(err)
else{
if(allposts.length<1){
noMatch = "No posts matched the search results , please try again"
}
console.log("searched", allposts)
res.render("commerce", {posts: allposts, noMatch: noMatch, message: req.flash('success')});
}
})
} else{
Post.find({subject: "commerce"}, function(err,allposts){
if(err) {
console.log(err);
res.statusCode = 500;
res.end('error');
}
else{
console.log("actually all posts",allposts)
res.render("commerce", {posts: allposts, noMatch: noMatch , message: req.flash('success')});
}
})
}
})
commerce.ejs
<%- include("./partials/header1.ejs") %>
<link rel="stylesheet" href="/stylesheets/commerce.css">
<%- include("./partials/header2.ejs") %>
<div class="top-horiz-bar">
<div class="logo-section-in-bar">
<img class="top-img-logo" src="./finallogopic.png" alt="logo-pic" height="60px" width="60px">
<!-- <img class="top-name-logo" src="./zoomed-brand-name.png" alt="logo-name" height="80px" width="130px"> -->
<h2 class="top-name-logo">Backbanchers</h2>
</div>
<div class="other-icons">
<div class="search-box">
<input id="search-font" class="search-txt" type="text" name="" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
<div class="person-account">
<a class="account-info" href="#">
<i class="far fa-user-circle fa-2x"></i>
<span>Sign-in/up</span>
</a>
</div>
</div>
</div>
<div class="vertical-nav-bar">
Home<span><i class="fas fa-home"></i></span>
<a class="blog-section-left" href="#">Blogs<span><i class="fas fa-user-graduate"></i></span>
<!-- <ul class="sections-blog">
<a class="option-blog" href="#"><li>Business & Economics</li></a>
<a class="option-blog" href="#"><li>Commerce</li></a>
<a class="option-blog" href="#"><li>Personality Devlopment</li></a>
</ul> -->
</a>
Authors<span><i class="fas fa-pencil-alt"></i></span>
Newsletter<span><i class="fas fa-newspaper"></i></span>
Contact US<span><i class="fas fa-phone-alt"></i></span>
<!-- Services<span><i class="fas fa-question"></i></span> -->
About Us<span><i class="fas fa-users"></i></span>
<!-- Services<span><i class="fas fa-question"></i></span> -->
</div>
<div class="all-engineering-articles">
<div class="side-box">
<div class="one-of-3-heading">
<h2 class="side-box-heading-one">Trending</h2>
<div class="sub-part-section">
<h2 class="title-side-box">How 3D cameras with integrated data processing reduce the load on network and host PC</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
<div class="sub-part-section">
<h2 class="title-side-box">Indy Cars Get a Little Safer—Thanks to a 200+ mph Windshield</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
<div class="sub-part-section">
<h2 class="title-side-box">Additive Manufacturing Qualification & Certification During Crises</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
</div>
<div class="two-of-3-heading">
<h2 class="side-box-heading-two">Recommended</h2>
<div class="sub-part-section">
<h2 class="title-side-box">Autonomous Mobile Robots and Cobots Improve Worker Safety and Retention</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
<div class="sub-part-section">
<h2 class="title-side-box">Sustainable Control Panel Design</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
<div class="sub-part-section">
<h2 class="title-side-box">The Difference Between: Push-In Terminals versus Other Types of Connections</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
</div>
<div class="three-of-3-heading">
<h2 class="side-box-heading-three">Popular</h2>
<div class="sub-part-section">
<h2 class="title-side-box">
Why Using IIoT for Pneumatics is Simple, Yet Critical</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
<div class="sub-part-section">
<h2 class="title-side-box">
IR Camera Captures Defects in 3D Printing</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
<div class="sub-part-section">
<h2 class="title-side-box">Additive Manufacturing Qualification & Certification During Crises</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
</div>
</div>
<% posts.forEach(function(post){ %>
<div class="blog-post">
<div class="blog-post__img">
<img src="https://image.freepik.com/free-photo/cyborg-hand-pressing-keyboard-laptop-3d-rendering_117023-946.jpg" alt="article-pic" class="blog-post__article-img">
</div>
<div class="blog-post__info">
<div class="blog-post__date">
<span><%= post.publishDay%></span>
<span><%= post.publish_date %></span>
</div>
<div class="author-name">
<ul class="author-content">
<li class="name-aut"><%= post.author.username %>></li>
<li class="save-to-later"><i class="fas fa-plus "></i></li>
</ul>
</div>
console.log(<%= post.title %>)
<h1 class="blog-post__title"><%= post.title %></h1>
<p class="blog-post__text"><%= post.content.substring(0,120) %></p>
Read more
<ul class="btns-on-blogcard">
<!-- <li class="btns-blog"><i class="far fa-eye fa-2x "></i></li> -->
<li class="btns-blog"><i class="far fa-hand-peace fa-2x "></i></li>
<li class="btns-blog"><i class="fas fa-share fa-2x "></i></li>
</ul>
</div>
</div>
<% }) %>
<div class="page-end">
</div>
<div class="next-page">
<h2 class="new-page-blogs">-Page 1 of 1- <span class="next-page-btn">Next page</span></h2>
</div>
</div>
<section class="footer" >
<footer id="foo">
<div class="overall-footer">
<div class="first-part">
<h2 class="our-name">Backbenchers</h2>
<img id="logo-of-learners" src="finallogopic.png" alt="our-logo" height="40%" width="14%">
</div>
<div class="bordering-right">
</div>
<div class="second-part">
<h2 class="second-links">Quick Links</h2>
<ul class="ul-class-footer">
<li class="quick-buttons">Home</li>
<li class="quick-buttons">Buisness & Economics</li>
<li class="quick-buttons">Commerce</li>
<li class="quick-buttons">Engineering</li>
<li class="quick-buttons">Personality Devlopment</li>
</ul>
</div>
<div class="third-party">
<div class="name-social-footer">
<li class="quick-buttons-2">Facebook</li>
<li class="quick-buttons-2">Instagram</li>
<li class="quick-buttons-2">LinkedIn</li>
</div>
<style>
a{
text-decoration: none;
color: white;
}
</style>
<div class="media-buttons-footer">
<a class="btns-footer-class-1" href="#"><i id="facebook-1" class="fab fa-facebook-f "></i></a>
<a class="btns-footer-class-2" href="#"><i id="instagram-1" class="fab fa-instagram "></i></a>
<a class="btns-footer-class-3" href="#"><i id="linkedin-1" class="fab fa-linkedin-in "></i></a>
</div>
</div>
<div class="fourth-party">
<h2 class="fourth-links">Social</h2>
<a href="mailto:ritishgupta45#gmail.com">
<span id="envolope-footer" class="fas fa-envelope fa-2x"></span>
<span id="email-footer" class="text">Backbenchers#gmail.com</span>
</a>
<input id="name-id-id" type="email" placeholder="Name">
<input id="email-id-id" type="email" placeholder="Email-id" required>
<input id="leave-msg-id-id" type="text" placeholder="leave a message">
<div class="send-button-footer">
<button id="send-id-id" type="submit">Send</button>
</div>
</div>
<div class="fifth-party">
<h2 class="fifth-links">Connect with Us</h2>
<h2 class="heading-of-news-footer">Newsletter subscription</h2>
<p class="para-of-news-footer">Subscribe to our fortnightly newsletter <br> to gain great knowledge exposure. <br> Also, stand a chance to participate <br> in brainstorming competitions <br> and win exciting prizes.</p>
<div class="suscribe-footer">
<input id="footer-suscribe-btns" type="email" placeholder="enter your email id" required>
<div class="red-btn-suscribe">
<button id="suscribing" type="button">Subscribe</button>
</div>
</div>
</div>
<div class="final-part">
<div class="box-copy">
<div class="btns-margin">
<h2 class="bottom-copy-footer">About Us</h2>
<h2 class="bottom-copy-footer">Privacy Policy</h2></a>
<h2 class="bottom-copy-footer">Terms and conditions</h2>
</div>
<h2 class="final-copywrite">copyright © All Rights Reserved | Backbenchers</h2>
</div>
</div>
</footer>
</section>
<%- include("./partials/footer.ejs") %>
output ss 1 of console.log("actually all posts",allposts)
output ss 2 of console.log("actually all posts",allposts)
in these output ss
i have added console.log("actually all posts",allposts) before res.render() and got the output whrere all posts are printed and at last null is also printed where is that null coming from? , and after this null , error is printed on the console as visible in the scrrenshots above

What would be the equivalent of following code in .hbs file

I was working on a project involving node, mongoose, handlebars, express. What would be the equivalent of the following code in handlebars?
<div class="panel panel-default" ng-init="getExams()">
<div class="panel-heading">
<h3 class="panel-title">Exams</h3>
</div>
<div class="panel-body">
<div class="row">
<div ng-repeat="exam in exams">
<div class="col-md-6">
<div class="col-md-6">
<h4>{{exam.examName}}</h4>
<a class="btn btn-primary" href="#/exams/details/{{exam._id}}">View Details</a>
</div>
</div>
</div>
</div>
I want to display all the rows of the output of the following function in my model.
module.exports.getExams = (callback, limit) => {
Exam.find(callback).limit(limit);
}
In node.js, when you're rendering :
res.render('your view'),{exams:exams}
In handlebars :
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Exams</h3>
</div>
<div class="panel-body">
<div class="row">
{{#each exams}}
<div>
<div class="col-md-6">
<div class="col-md-6">
<h4>{{examName}}</h4>
<a class="btn btn-primary" href="#/exams/details/{{_id}}">View Details</a>
</div>
</div>
</div>
{{/each}}
</div>

Toolbar to follow up after the keyboard appears in Material

how to make the toolbar remains at the bottom, do not go up on top after the keyboard appears ??
what's wrong with my code or less some plugins for cordova or framework7! maybe someone can help me to solve this problem.
<div class="views">
<div class="view">
<div class="pages">
<div data-page="viewprofil" class="page navbar-fixed toolbar-fixed">
<div class="navbar" style="background-color: #1abc9c;box-shadow: 0 5px 10px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.1);">
<div class="navbar-inner" >
<div id="kembali" class="left sliding button">
<i class="icon icon-back"></i>
</div>
<div class="left sliding">Akun</div>
</div>
</div>
<div class="toolbar toolbar-bottom">
<div class="toolbar-inner">
<a id="kembali">
<i class="fa fa-home fa-2x" aria-hidden="true"></i>
</a>
<a href="{{pathFor 'history'}}" >
<i class="fa fa-clock-o fa-2x"></i>
</a>
<a href="{{pathFor 'viewprofil'}}" class="toolbar-aktif">
<i class="fa fa-user fa-2x"></i>
</a>
</div>
</div>
<div class="page-content" style="background-color: #ecf0f1;color: #444444;">
<div class="content-block-title" style="top: 0px; margin-top:0px;"><h2>Pengaturan Akun</h2></div>
<div class="list-block">
<ul class="box-data">
<li>
<div class="item-content">
<div class="item-media"><i class="icon material-icons">person</i></div>
<div class="item-inner">
<div class="item-input">
<input id="namalengkap" type="text" placeholder="Nama lengkap" value="{{nama}}">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon material-icons">email</i></div>
<div class="item-inner">
<div class="item-input">
<input type="text" value="{{email}}" disabled>
</div>
</div>
</div>
</li>
<li>
<li class="accordion-item">
<a class="item-content item-link">
<div class="item-media"><i class="icon material-icons" aria-hidden="true">lock</i></div>
<div class="item-inner">
<div class="item-title">Kata Sandi</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block" style="margin-left: 80px;">
<input type="password" placeholder="Kata Sandi baru">
</div>
<div class="content-block" style="margin-left: 80px;">
<input type="password" placeholder="Ulangi Kata Sandi">
</div>
</div>
</li>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon material-icons">call</i></div>
<div class="item-inner">
<div class="item-input">
<input type="tel" placeholder="No. Handphone" value="{{notelp}}">
</div>
</div>
</div>
</li>
</ul>
<div class="content-block">
<div class="logButton button button-fill button-raised color-red" id="logout" ><i class="fa fa-power-off " aria-hidden="true"></i> Keluar</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
After
Before
I never came out of an idea to keep it in the bottom, but here is a quick fix:
var myApp = new Framework7({
material: true
});
var mainView = myApp.addView('.view-main', {
});
$$ = Dom7;
$$('#my-input').on('focus', function() {
mainView.hideToolbar();
});
$$('#my-input').on('blur', function() {
mainView.showToolbar();
});
Simply show and hide the toolbar on input focus and blur events.
Live Example: https://jsfiddle.net/wowq3n64/

Resources