Not able to extract urls from HTML BeautifulSoup object - python-3.x

I am looking to extract following url "https://mania.bg/p/pulover-alexander-mcqueen-p409648" from html (BeautifulSoup object) named urls that looks like:
[<a class="product sellout product-sellout float-left status-1" data-id="409648" data-producturl="https://mania.bg/p/pulover-alexander-mcqueen-p409648" data-status="1" href="https://mania.bg/p/pulover-alexander-mcqueen-p409648"> <div class="product-hover clearfix prevent-flicker"><div class="module-icons favourite tooltip" data-id="409648" data-title=" Любима находка на 24 клиент/и. "> <img alt="" class="favourite-product like-product unactivated" data-id="409648" src="dist/assets/icon_favourite_off.png"/></div> <div class="campaign" style="color: #FFF;background-color: #000000;"> NIGHT </div> <div class="profit-icons-wrapper clearfix"> </div> <div class="product-basic-info"> <div class="image-wrapper"> <img alt="Пуловер Alexander McQueen" class="front" data-url="https://media.mania.bg/product/048/409648/300/pulover-alexander-mcqueen-2.jpg" src="https://media.mania.bg/product/048/409648/300/pulover-alexander-mcqueen-1.jpg" title="Пуловер Alexander McQueen - Mania"> </img></div> <div class="clearfix brand-line"> <div class="brand float-left text-uppercase">Alexander McQueen</div> <div class="size float-right">S</div> </div> </div> <div class="prices-section"> <div class="prices-inner-section"> <div class="price-wrapper clearfix"> <div class="price-title text-uppercase float-left"> Начална цена </div> <div class="price old"> <span>98.00</span> <span class="currency">лв.</span> </div> </div> <div class="price-wrapper clearfix"> <div class="discount price-title text-uppercase float-left"> -40% </div> <div class="price old"> <span>58.80</span> <span class="currency">лв.</span> </div> </div> <div class="price-wrapper clearfix"> <div class="discount price-title text-uppercase float-left" style="color: #FFF;background-color: #000000"> -40% </div> <div class="price"> <span>35.28</span> <span class="currency">лв.</span> </div> </div> </div> </div> </div> <div class="button button-auction buy-now text-center float-left tooltip prevent-popup-close" data-id="409648" data-title="Може да добавите този продукт към количката.">ДОБАВЯМ<img alt="" class="bag-icon" src="dist/assets/icon_bag_button.svg"> </img></div> </a>]
With following code:
for num in range(len(urls)):
url = urls[num - 1].a['href']
I also tried to use:
url = urls[num - 1].a['data-producturl']
I get "TypeError: 'NoneType' object is not subscriptable" as url is None.

import requests
import bs4
url = 'https://mania.bg/p/pulover-alexander-mcqueen-p409648'
data = requests.get(url)
soup = bs4.BeautifulSoup(data.text,'html.parser')
urls = soup.find_all('a', attrs={'class': 'product sellout product-sellout float-left status-1'})
for num in range(len(urls)):
url = urls[num]['href']
print(url)

Try this. Here's an example:https://github.com/yiyedata/simplified-scrapy-demo/tree/master/doc_examples
from simplified_scrapy.simplified_doc import SimplifiedDoc
html ='''
[<a class="product sellout product-sellout float-left status-1" data-id="409648" data-producturl="https://mania.bg/p/pulover-alexander-mcqueen-p409648" data-status="1" href="https://mania.bg/p/pulover-alexander-mcqueen-p409648"> <div class="product-hover clearfix prevent-flicker"><div class="module-icons favourite tooltip" data-id="409648" data-title=" Любима находка на 24 клиент/и. "> <img alt="" class="favourite-product like-product unactivated" data-id="409648" src="dist/assets/icon_favourite_off.png"/></div> <div class="campaign" style="color: #FFF;background-color: #000000;"> NIGHT </div> <div class="profit-icons-wrapper clearfix"> </div> <div class="product-basic-info"> <div class="image-wrapper"> <img alt="Пуловер Alexander McQueen" class="front" data-url="https://media.mania.bg/product/048/409648/300/pulover-alexander-mcqueen-2.jpg" src="https://media.mania.bg/product/048/409648/300/pulover-alexander-mcqueen-1.jpg" title="Пуловер Alexander McQueen - Mania"> </img></div> <div class="clearfix brand-line"> <div class="brand float-left text-uppercase">Alexander McQueen</div> <div class="size float-right">S</div> </div> </div> <div class="prices-section"> <div class="prices-inner-section"> <div class="price-wrapper clearfix"> <div class="price-title text-uppercase float-left"> Начална цена </div> <div class="price old"> <span>98.00</span> <span class="currency">лв.</span> </div> </div> <div class="price-wrapper clearfix"> <div class="discount price-title text-uppercase float-left"> -40% </div> <div class="price old"> <span>58.80</span> <span class="currency">лв.</span> </div> </div> <div class="price-wrapper clearfix"> <div class="discount price-title text-uppercase float-left" style="color: #FFF;background-color: #000000"> -40% </div> <div class="price"> <span>35.28</span> <span class="currency">лв.</span> </div> </div> </div> </div> </div> <div class="button button-auction buy-now text-center float-left tooltip prevent-popup-close" data-id="409648" data-title="Може да добавите този продукт към количката.">ДОБАВЯМ<img alt="" class="bag-icon" src="dist/assets/icon_bag_button.svg"> </img></div> </a>]
'''
doc = SimplifiedDoc(html)
urls = doc.selects('a.product sellout product-sellout float-left status-1')
print ([(url.href,url['data-producturl']) for url in urls])
Result:
[('https://mania.bg/p/pulover-alexander-mcqueen-p409648', 'https://mania.bg/p/pulover-alexander-mcqueen-p409648')]

find_all already gives you the list of a elements; you just need to get the href from each.
from bs4 import BeautifulSoup
import requests
url = 'https://mania.bg/p/pulover-alexander-mcqueen-p409648'
r = requests.get(url)
soup = BeautifulSoup(r.content, 'html.parser')
for a in soup.find_all(
'a',
attrs={'class':
'product sellout product-sellout float-left status-1'}):
print(a['data-producturl'])

Related

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

Find string with tag search inside a line using Beautifuloup

I want to extract holy place from <p class="answer"> <i class="fa fa-circle" aria-hidden="true"></i> holy place</p>
and plays from
<p class="answer"><i class="fa fa-circle" aria-hidden="true"></i> plays</p>
HTML Source Code
<div class="card card-custom custom-color">
<h1 class="card-header card-custom-font">A pilgrim is a person who undertakes a journey to a --- <br>
</h1>
<div class="card-body">
<div class="row">
<div class="col-sm-12">
<p class="answer"><i class="fa fa-circle" aria-hidden="true"></i> holy place</p>
</div>
<div class="col-sm-12">
<p class="answer"><i class="fa fa-circle-o" aria-hidden="true"></i> a mosque</p>
</div>
<div class="col-sm-12">
<p class="answer"><i class="fa fa-circle-o" aria-hidden="true"></i> a bazar</p>
</div>
<div class="col-sm-12">
<p class="answer"><i class="fa fa-circle-o" aria-hidden="true"></i> a new country</p>
</div>
</div>
<div class="card card-custom custom-color">
<h1 class="card-header card-custom-font">Shakespeare is known mostly for his--- <br>
</h1>
<div class="card-body">
<div class="row">
<div class="col-sm-12">
<p class="answer"><i class="fa fa-circle-o" aria-hidden="true"></i> poetry</p>
</div>
<div class="col-sm-12">
<p class="answer"><i class="fa fa-circle-o" aria-hidden="true"></i> novels</p>
</div>
<div class="col-sm-12">
<p class="answer"><i class="fa fa-circle-o" aria-hidden="true"></i> autobiography</p>
</div>
<div class="col-sm-12">
<p class="answer"><i class="fa fa-circle" aria-hidden="true"></i> plays</p>
</div>
</div>
My code
question_block = soup.find_all('div', attrs = {'class':'card card-custom custom-color'})
right_answer = question_block.find('p', attrs={'class':'answer','i':'fa fa-circle'}).get_text(strip=True)
Getting output: None
Thanks in advance and your answer will be highly appreciated.
Happy Coding :)
You want to call the appropriate css pattern on each question block. In this case .answer > .fa-circle will move you adjacent to the value you want, and next_sibling will then return the value you want:
from bs4 import BeautifulSoup as bs
html = '''your html'''
soup = bs(html, 'lxml')
question_blocks = soup.find_all('div', attrs = {'class':'card card-custom custom-color'})
for q in question_blocks:
# print(q)
print(q.select_one('.card-header').text)
print(q.select_one('.answer > .fa-circle').next_sibling.strip())
print('*' * 50)
I have taken you data as html where i have used css selector to locate element i tag and looping over it to find previous tag which contains correct answer text
from bs4 import BeautifulSoup
soup=BeautifulSoup(html,"html.parser")
main_div=soup.select("p > i.fa.fa-circle")
for data in main_div:
print(data.find_previous('p').text)
Output:
holy place
plays
You can directly select the p with class name answer and extract the text inside it.
x = soup.find('p', class_="answer")
print(x.text)
This code will extract only holy place and plays from p tags.
p = soup.findAll('p', class_='answer')
for i in p:
if i.text.strip() in ('plays', 'holy place'):
print(i.text.strip())
Output:
holy place
plays

Views not refreshing correctly using SailsJS

in my code, i have a view called "show.ejs" which shows client details. the proble; now is that if i update client details (image, associated docs, ...) the content remains the same and changes only if i refresh the page ( by F5 ) .
this my update and show actions in ClientController :
findOne : function(req,res){
Client.findOne({
id : req.param('id')
})
.populate('docs')
.populate('sites')
.exec(function(err,client){
if(err) throw err;
if(client) {
return res.view('client/show', {
client : client
});
} else {
return res.redirect('/client');
}
})
},
update : function(req,res){
var name = req.param('name'),
id = req.param('id'),
town = req.param('town'),
adress = req.param('adress'),
postalCode = req.param('postalCode'),
telephone = req.param('telephone'),
email = req.param('email'),
fax = req.param('fax'),
responsable = req.param('responsable'),
website = req.param('website'),
activity = req.param('activity');
Client.findOne({id : id}).exec(function(err,client) {
if(err) console.log(err);
client.name = name;
client.town = town;
client.adress = adress;
client.telephone = telephone;
client.fax = fax;
client.website = website;
client.email=email;
client.responsable=responsable;
client.postalCode=postalCode;
client.activity = activity;
client.save();
req.file('logo').upload({
dirname: require('path')
.resolve(sails.config.appPath+'/assets/uploads/clients/logos/')
}, function (err, logo) {
if (err) throw err;
if(typeof logo !== 'undefined' && logo.length > 0 ) {
require('fs').unlink('./assets/uploads/clients/logos/'+client.logo, function(err){
if(err) console.log(err)
client.logo = require('path').basename(logo[0].fd);
client.save();
})
}
return res.redirect('/client/'+client.id );
});
})
}
and this is how i setup the view :
<div class="row">
<div class="col-md-12">
<!-- BEGIN PROFILE SIDEBAR -->
<div class="profile-sidebar" style="background-color: #f5f5f5;">
<!-- PORTLET MAIN -->
<div class="portlet light profile-sidebar-portlet " style="background-color: #f5f5f5;">
<!-- SIDEBAR USERPIC -->
<div class="profile-userpic">
<img src="/uploads/clients/logos/<%= client.logo %>" class="img-responsive img-circle" alt="image client"> </div>
<!-- END SIDEBAR USERPIC -->
<!-- SIDEBAR USER TITLE -->
<div class="profile-usertitle ">
<div class="profile-usertitle-name"><%= client.name %></div>
<div class="profile-usertitle-job"> Client </div>
</div>
</div>
<!-- END PORTLET MAIN -->
<!-- PORTLET MAIN -->
<div class="portlet light " style="background-color: #f5f5f5;">
<!-- STAT -->
<div class="row list-separated profile-stat">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="uppercase profile-stat-title"> <%= 44 %> </div>
<div class="uppercase profile-stat-text"> Sites </div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="uppercase profile-stat-title"><%= 49 %> </div>
<div class="uppercase profile-stat-text"> Documents </div>
</div>
</div>
<!-- END STAT -->
<div>
<div class="margin-top-20 profile-desc-link">
<i class="fa fa-map-marker"></i>
<span class="profile-desc-text" ><%= client.adress %></span>
</div>
<div class="margin-top-20 profile-desc-link">
<i class="fa fa-envelope"></i>
<%= client.email %>
</div>
<div class="margin-top-20 profile-desc-link">
<i class="fa fa-globe"></i>
<%= client.website %>
</div>
</div>
</div>
<!-- END PORTLET MAIN -->
</div>
<!-- END BEGIN PROFILE SIDEBAR -->
<!-- BEGIN PROFILE CONTENT -->
<div class="profile-content">
<div class="row">
<div class="col-md-12">
<div class="portlet light ">
<div class="portlet-title tabbable-line">
<div class="caption caption-md">
<i class="icon-globe theme-font hide"></i>
<span class="caption-subject font-blue-madison bold uppercase">Client N° <strong> <%= client.id %></strong></span>
</div>
<ul class="nav nav-tabs">
<li class="active">
informations
</li>
<li>
Documents
</li>
<li>
Sites
</li>
</ul>
</div>
<div class="portlet-body">
<div class="tab-content">
<!-- PERSONAL INFO TAB -->
<div class="tab-pane active" id="tab_1_1">
<form class="form-horizontal" role="form" action="edit">
<div class="form-actions">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-offset-10 col-md-2">
<input type="text" hidden name="id" value="<%=client.id%>">
<button type="submit" class="btn green">
<i class="fa fa-pencil"></i> Modifier</button>
</div>
</div>
</div>
</div>
</div>
<div class="form-body">
<h3 class="form-section">Informations Personneles </h3>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">ID :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.id %> </p></strong>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Nom :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.name %> </p></strong> </strong>
</div>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Responsable :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"><%= client.responsable %></p></strong>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Email :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.email %> </p></strong>
</div>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Téléphone :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.telephone %> </p></strong>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Fax :</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.fax %> </p></strong>
</div>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
<h3 class="form-section">Adresse</h3>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label col-md-3">#</label>
<div class="col-md-9">
<strong> <p class="form-control-static"> <%= client.adress %> </p></strong>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">Ville:</label>
<div class="col-md-8">
<strong> <p class="form-control-static"> <%= client.town %> </p></strong>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-6">Code postal:</label>
<div class="col-md-6">
<strong> <p class="form-control-static"> <%= client.postalCode %></p></strong>
</div>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
</div>
</form>
</div>
<!-- END PERSONAL INFO TAB -->
<!-- CHANGE AVATAR TAB -->
<div class="tab-pane" id="tab_1_2">
<div class="form-actions">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-offset-9 col-md-3">
<button type="submit" class="btn green" data-toggle="modal" href="#basic">
<i class="fa fa-plus"></i> Ajouter un doc </button>
</div>
</div>
</div>
</div>
</div>
<!--- doc model -->
<div class="modal fade" id="basic" tabindex="-1" role="basic" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Ajouter un Document</h4>
</div>
<div class="modal-body">
<form action="/client/addDocument" method="POST" enctype="multipart/form-data">
<input type="text" hidden name="id" value="<%= client.id %>">
<div class="form-group" style="padding-bottom: 22px;">
<label class="col-md-3 control-label">Titre</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon input-circle-left">
<i class="fa fa-info-circle"></i>
</span>
<input type="text" class="form-control input-circle-right" placeholder="titre du document" name="title"> </div>
</div>
</div>
<br>
<div class="form-group" style="padding-bottom: 22px;">
<label class="col-md-3 control-label">Description</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon input-circle-left">
<i class="fa fa-info-circle"></i>
</span>
<textarea type="text" class="form-control input-circle-right" name="description" placeholder="description du document"> </textarea>
</div>
</div>
</div>
<div class="form-group" style="padding-bottom: 22px; padding-top: 40px;">
<label class="col-md-3 control-label">Document</label>
<div class="col-md-9">
<div class="input-group">
<div class="fileinput fileinput-new" data-provides="fileinput">
<span class="btn green btn-file">
<span class="fileinput-new"> Selectionner Fichier </span>
<span class="fileinput-exists"> Changer </span>
<input type="file" name="fichier"> </span>
<span class="fileinput-filename"> </span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn dark btn-outline" data-dismiss="modal">Fermer</button>
<button type="submit" class="btn green">Enregistrer</button>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- fin doc model -->
<br>
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption font-green">
<i class=" fa fa-file font-green"></i>
<span class="caption-subject bold uppercase" style="margin-right : 11px;">Liste des Documents</span>
</div>
</div>
<div class="portlet-body">
<table class="table table-striped table-bordered table-hover dt-responsive" width="100%" id="sample_1">
<thead>
<tr>
<th class="all">#</th>
<th class="min-tablet">Titre</th>
<th class="desktop">Description</th>
<th class="all" style="width : 66px">Action.</th>
</tr>
</thead>
<tbody>
<% _.each(client.docs, function (doc) { %>
<tr>
<td ><%=doc.id%></td>
<td ><%= doc.title %></td>
<td ><%= doc.description %></td>
<center> <td>
<a href="#" title="telecharger" class="btn btn-circle btn-icon-only green" ><i class="fa fa-download" ></i></a>
<a href="#" title="Supprimer" class="btn btn-circle btn-icon-only purple-sharp" data-toggle="confirmation" data-placement="left" data-btn-ok-label="Continuer" data-btn-ok-icon="icon-like" data-btn-ok-class="btn-success" data-btn-cancel-label="Annuler!"
data-btn-cancel-icon="icon-close" data-btn-cancel-class="btn-danger"><i class="fa fa-trash-o"></i></a>
</td></center>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
</div>
Actually following your code, the problems reside in
client.save()
which is an asynchronous function.
the problem is you are changing the client and you are not waiting for the changes to be saved to upload the logo and reload the data.
here's the official doc, which is stating that model.save has a callback to it.
client.save(function(){
/*your code */
})
The view, with those EJS functions is doing what is expected to do. You see, you are not providing some way to magically change data on-the-fly. Instead what EJS and your controller is doing is this: Get all data needed - with findOne -> Put that data on the view - with EJS and <% %> markers -> Render and serve a static HTML document - res.view.
If you need data to change on the fly you need a more powerful framework on the frontend, like Vuejs or Angular... EJS is meant to assembly a static page with dynamic data ONCE. Take a look at the docs

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/

CMSMS does not display html code in edito

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.

Resources