Using Bootstrap 5.2.0's flex-column flex-md-row - but I need Section 2 (red) to come in between 1 and 3 in mobile. On desktop it's fine.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<title>flex column example</title>
</head>
<body>
<div class="container">
<div class="d-flex flex-column flex-md-row">
<div class="d-flex flex-column">
<div class="bg-warning">
Section 1: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div class="bg-primary">
Section 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>
<div class="d-flex flex-row">
<div class="bg-danger">
Section 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>
</div>
</div>
</body>
</html>
Here you go...
You could use Bootstrap's order classes (read more about it here), but these are the most helpful when ordering elements that are inside the same wrapper (e.g., inside the same row). But there's an alternative solution...
The trick is to create Section 2 twice. Show Section 2 on desktop (add classes d-md-block d-none) and show Section 2 on mobile (add classes d-md-none d-block).
See the snippet below.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<title>flex column example</title>
</head>
<body>
<div class="container">
<div class="d-flex flex-column flex-md-row">
<div class="d-flex flex-column">
<div class="bg-warning">
Section 1: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book.
</div>
<div class="bg-danger d-md-none d-block">
Section 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book.
</div>
<div class="bg-primary">
Section 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book.
</div>
</div>
<div class="d-flex flex-row">
<div class="bg-danger d-md-block d-none">
Section 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book.
</div>
</div>
</div>
</div>
</body>
</html>
Related
I was wondering, in the following example why the stretchy attribute of mo tag is giving similar display. I thought the second MathML below (with <mo stretchy="false">∑</mo> would display the upper and lower limits on top and bottom of the summation symbol (as shown in figure 2 below). But both the examples (with <mo stretchy="true">∑</mo> and <mo stretchy="false">∑</mo> respectively) are displaying the limits on sides of summation symbol instead:
Remark: I'm using MathJax
HTML with MathML
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>MathJax TeX to MathML Page</title>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
</head>
<body>
<p>With stretchy="true"</p>
<math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><msubsup><mo stretchy="true">∑</mo><mrow><mi>k</mi><mo>=</mo><mn>0</mn></mrow><mrow><mi>n</mi></mrow></msubsup><mrow><mfenced separators="|"><mrow><mfrac linethickness="0pt"><mrow><mi>n</mi></mrow><mrow><mi>k</mi></mrow></mfrac></mrow></mfenced><msup><mrow><mi>x</mi></mrow><mrow><mi>k</mi></mrow></msup><msup><mrow><mi>a</mi></mrow><mrow><mi>n</mi><mo>-</mo><mi>k</mi></mrow></msup></mrow></mrow></math>
<p>With stretchy="false"</p>
<math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><munderover><mo stretchy="false">∑</mo><mrow><mi>k</mi><mo>=</mo><mn>0</mn></mrow><mrow><mi>n</mi></mrow></munderover><mrow><msup><mrow><mi>r</mi></mrow><mrow><mi>k</mi></mrow></msup></mrow></mrow></math>
</body>
</html>
Display of the above HTML [using MathJax]:
Desired display of second MathML (with <mo stretchy="false">∑</mo>):
You have used the wrong attribute. It is not strethy="false" that you want, but movablelimits="false" (or use <math display="block"> or <mstyle displaystyle="true"> around the expression).
For example:
<script src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/mml-chtml.js"></script>
<p>
<b>movablelimits="false"</b>
<br>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<munderover>
<mo movablelimits="false">∑</mo>
<mrow>
<mi>k</mi>
<mo>=</mo>
<mn>0</mn>
</mrow>
<mi>n</mi>
</munderover>
<msup>
<mi>r</mi>
<mi>k</mi>
</msup>
</math>
</p><p>
<b>display="block"</b>
<br>
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<munderover>
<mo>∑</mo>
<mrow>
<mi>k</mi>
<mo>=</mo>
<mn>0</mn>
</mrow>
<mi>n</mi>
</munderover>
<msup>
<mi>r</mi>
<mi>k</mi>
</msup>
</math>
</p><p>
<b>mstyle displaystyle="true"</b>
<br>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mstyle displaystyle="true">
<munderover>
<mo>∑</mo>
<mrow>
<mi>k</mi>
<mo>=</mo>
<mn>0</mn>
</mrow>
<mi>n</mi>
</munderover>
<msup>
<mi>r</mi>
<mi>k</mi>
</msup>
</mstyle>
</math>
</p>
Note, however, that these generate different output. The first uses a smaller summation sign (since it is in-line math style), the second uses a separate line with the math centered on it, and the third is in-line, but uses the display-mode layout rules.
I want to scrape a web page (German complaint website) using BeautifulSoup. Here is a good example (https://de.reclabox.com/beschwerde/44870-deutsche-bahn-berlin-erstattungsbetrag-sparpreisticket)
<div id="comments" class="kt">
<a name="comments"></a>
<span class="bb">Kommentare und Trackbacks (7)</span>
<br><br><br>
<a id="comment100264" name="comment100264"></a>
<div class="data">
19.12.2011 | 11:04
</div>
von Tom K.
<!--
-->
| <a class="flinko" href="/users/login?functionality_required=1">Regelverstoß melden</a>
<div class="linea"></div>
TEXT I AM INTEREST IN<br><br>MORE TEXT I AM INTEREST IN<br><br>MORETEXT I AM INTEREST IN
<br><br>
<a id="comment100265" name="comment100265"></a>
<div class="data">
19.12.2011 | 11:11
</div>
von Tom K.
<!--
-->
| <a class="flinko" href="/users/login?functionality_required=1">Regelverstoß melden</a>
<div class="linea"></div>
TEXT I AM INTEREST IN<br><br>MORE TEXT I AM INTEREST IN
<br><br>
<a id="comment101223" name="comment101223"></a>
<div class="commentbox comment-not-yet-solved">
<div class="data">
25.12.2011 | 10:14
</div>
von ReclaBoxler-4134668
<!--
--><img alt="noch nicht gelöste Beschwerde" src="https://a1.reclabox.com/assets/live_tracking/not_yet_solve-dbf4769c625b73b23618047471c72fa45bacfeb1cf9058655c4d75aecd6e0277.png" title="noch nicht gelöste Beschwerde">
| <a class="flinko" href="/users/login?functionality_required=1">Regelverstoß melden</a>
<div class="linea"></div>
TEXT I AM NOT INTERESTED IN <br><br>TEXT I AM NOT INTERESTED IN
</div>
<br><br>
<a id="comment101237" name="comment101237"></a>
<div class="data">
25.12.2011 | 11:01
</div>
von ReclaBoxler-3315297
<!--
-->
| <a class="flinko" href="/users/login?functionality_required=1">Regelverstoß melden</a>
<div class="linea"></div>
TEXT I AM INTERESTED IN
<br><br>
etc...
<br><br>
<br><br>
</div>
I was able to scrape most of the content I want (thanks to a lot of Q&A's I read here:-)) except for the comments (<div id="comments" class="kt">) which are not in a class ="commentbox" (I got the commentboxes already with another command). The comments outside the comment boxes seem to be not in a normal tag, that's why I just did not manage to get them via "soup.find(_all)". I'd like to scrape these comments as well as information about the person posting the comment ("von") as well as the date and time (<div class="data">).
It would be absolutely fantastic if someone knows how to solve this one. Thanks in advance for your help!
The common task to extract all texts from a page as follows
from urllib.request import Request, urlopen
from bs4 import BeautifulSoup
doc = """xxxxxxxx""" // url name
soup = BeautifulSoup(doc, "html.parser")
print(soup.get_text())
I've have two smart search index as experiments. One type is 'Pages', the other is 'Pager Crawler'.
My pages have a section, using a repeater, that is a custom page type. it renders out like this:
<div class="fullWrap pageBanner">
<div class="container pageHeading">
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="pageHeading--headingCopy">
<h1>This is the Home Page. Buy some RESPs.</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat posuere posuere.</h2>
Learn More
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="pageHeading--heroImage">
<img src="/kffCorporate/media/KFFCorporate/headerImages/0-0_KFF_Home_Image-555px-gradient.jpg?ext=.jpg" class="img-responsive" alt="This is the Home Page. Buy some RESPs.">
</div>
</div>
</div>
</div>
</div>
Nothing too fancy, just a basic bootstrap fluid container, with two columns.
My search results, don't pick up any of the copy from 'pageHeading--headingCopy', but i do get the image url.
This is the output from the search transformation.
Registered Educational Savings Plans ~/kffCorporate/media/KFFCorporate/headerImages/home-benefits.jpg CTA Heading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus vehi...
and here's the relevant part of the transformation.
<%-- Search result content --%>
<div class="content">
<%#SearchHighlight(HTMLHelper.HTMLEncode(TextHelper.LimitLength(HttpUtility.HtmlDecode(HTMLHelper.StripTags(CMS.ExtendedControls.ControlsHelper.RemoveDynamicControls(GetSearchedContent(DataHelper.GetNotEmpty(Eval("Content"), ""))), false, " ")), 200, "...")), "<span class='searchTerm'>", "</span>")%>
</div>
I thought the transformation would pick up the first 200 characters of what's rendered on the page, but it's missing the H1 and H2, as well has other items. If i search against the copy in the H1 or H2, the page is returned in the result, but the content displayed in the search result that's off.
Any thoughts?
For custom page types, you can define which fields from the page type line up with the designated search fields.
Go to your custom page type, and go to the "Search Fields" tab. From here, you can choose which fields will show up for the various search fields. In your case, you need to assign the "Content" field to the corresponding custom field.
Each search result item has this set of mapped fields, "Title, Content, Image, Date" which you can set to correspond with any field from your custom page type in order to make your search results more consistent and easier to manage. By default, the "Content" field lines up with "Document Content" which combines all of the editable regions on the page/page type. If the H1 and H2 are stored as separate fields however, it will not pick them up by default.
I might be getting this completely wrong, but trying to create a webpage where Div 1 is in top left corner, and div 2 is aligned bottom right (or end end). And I wanted to do this in the right way using material design.
I want it like this (sorry for the ASCII art, but it is cool)
_____________33____50________________
| | |
| 1 | |
| | _________________| 33
-------------| | |
| | 2 |
| | |
| | |
--------------------------------------
50
Here is the code so far, but the problem is I can get it to affect the alignment on column one, but I cant set them independently on the two divs
<md-content layout="column" layout-fill>
<div layout="column" flex="33"><H1>Welcome to My page</H1>
</div>
<div layout="row" layout-align="end end" flex="33">
<div layout="column" layout-align="end end" flex="50">
<H3>Welcome to my page</H3>
<p>This is my page, there are many like it <bold>But this page is mine</bold></p>
<ul>
<li>
My page is my best friend
</li><li>
I must master its code
</li><li>
like I must master my life
</li>
</ul>
</div>
</div>
</md-content>
Not certain the JS fiddle works at all, managed to get the first bit working, but cant get the end. Is this just because we don't know how big the screen is?
Here is a simple JS fiddle, and Material Design is working, and I can get the flex to work, but not the align
https://jsfiddle.net/p02Ls1dh/3/
OK, sorry, me being silly, material design still don't know the height, so the way to do it is to set height (you can use javascript and window) to set the height to say 900px (style="height: 900px;" below), once that is done it works.
<md-content layout="column" layout-fill style="height: 900px">
<div layout="column" flex="33"><H1>Welcome to My page</H1>
</div>
<div layout="row" layout-align="end end" flex="33">
<div layout="column" layout-align="end end" flex="50">
<H3>Welcome to my page</H3>
<p>This is my page, there are many like it <bold>But this page is mine</bold></p>
<ul>
<li>
My page is my best friend
</li><li>
I must master its code
</li><li>
like I must master my life
</li>
</ul>
</div>
</div>
</md-content>
<div class="vcard" itemscope itemtype="http://schema.org/LocalBusiness">
<strong class="fn org" itemprop="name">Commercial Office Bangalore</strong><br/>
<span class="adr" itemprop="address" itemscope itemtype="httep:schema.org/PostalAddress">
<span class="street-address"itemprop="streetAddress">330, Raheja Arcade, 1/1 Koramangala Industrial Layout</span><br/>
<span class="locality"itemprop="addressLocality">Bangalore</span>
<span itemprop="postalCode"class="postal-code">560095</span><br/>
<span class="region"itemprop="addressRegion">Karnataka</span><br/>
<span class="country-name">India</span><br/>
<span class="tel id"="phone"itemprop="telephone">+91-80-41101360</span><br/>
<span class="geo"itemprop="geo"itemscope itemtype="http://schema.org/GeoCordinates">
<abbr class="latitude" property="latitude">12.936504</abbr>
<abbr class="longitude" property="longitude">77.6321344</abbr>
<meta itemprop="latitude" content="12.936504" />
<meta itemprop="longitude" content="77.6321344" />
</span>
</span>
I want to make lat and logitude invisible for user and visible for Google bot. What shall I do?
If you mean the Microdata (using Schema.org):
Just remove the abbr elements. You are already giving this data in meta elements (which can be used in the body), which is the correct way to provide data that should/can not be visible on the page:
<meta itemprop="latitude" content="12.936504" />
<meta itemprop="longitude" content="77.6321344" />
(Note that you were using property attributes, but they are not allowed in Microdata, only in RDFa.)
(Also note that you use http://schema.org/GeoCordinates but it should be http://schema.org/GeoCoordinates. And httep:schema.org/PostalAddress is also wrong.)
If you mean the Microformat (using hCard):
You could reuse the meta elements used with Microdata:
<meta class="latitude" itemprop="latitude" content="12.936504" />
<meta class="longitude" itemprop="longitude" content="77.6321344" />
But I’m not sure if all Microformat parsers support this.
The abbr elements with lat and lon can be set to display:none, which does exactly what you are asking for, hiding the content from humans, while still serving it up to bots:
abbr{display:none}
/** or **/
.latitude,
.longitude{display:none}
Although I can't honestly see what's wrapping them in your example. Ff the span with class .geo is the parent element, you could make that display:none instead.