I want to add a header to my application, and followed the guidelines for the default application markup. By using this sample code:
<v-app>
<v-app-bar>
header
</v-app-bar>
<v-main>
<v-container fluid>
<v-container>
<v-card>
<v-card-title>
card title
</v-card-title>
</v-card>
</v-container>
</v-container>
</v-main>
</v-app>
It produces this result:
As you can see, the header stretches to the bottom. If there is more content in the card, it doesn't. See Codepen for reproduction purposes.
Is this behaviour a desired one? How can I prevent it from doing that? I don't want the header to be fixed so I removed the app prop from the v-app-bar. So this is an example of how the header bar should behave on scrolling etc.
#header {
background: yellow;
}
#content {
background: green;
}
<div id="header">
Header
</div>
<div id="content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue
nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore
dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
</div>
Just add app property (if you don't want it to be fixed, then add absolute property as well)
<v-app-bar app absolute>
From app property docs:
Designates the component as part of the application layout. Used for
dynamically adjusting content sizing. Components using this prop
should reside outside of v-main component to function properly. You
can more information about layouts on the application page. Note: this
prop automatically applies position: fixed to the layout element. You
can overwrite this functionality by using the absolute prop
Related
I am working with Quarto to create a pdf document from rstudio. I use the quarto_titlepages extension to create a title page, which is followed by a text of several pages. The first one of these pages is shown with a very large bottom margin, which is probably a heritage of the title page. However, this only happens with the bottom margin and not with the top one.
I tried re-stablishing the margins in the pdf format section with margin-left, margin-right, margin-bottom and margin-top. Then I tried the same approach but using geometry instead. None of the two options worked.
Here is the code with margin-top and so on.
---
title: "Here we have a title, not too long"
author: "First Author and Second Author"
date: last-modified
date-format: "d-MMMM-YYYY"
lang: "es"
format:
titlepage-pdf:
documentclass: scrreport
titlepage: plain
titlepage-geometry:
- top=90mm
- bottom=60mm
- right=30mm
- left=30mm
titlepage-logo: "images/anyimages.png"
titlepage-bg-image: "images/anyimage2.png"
titlepage-theme:
elements: ["\\titleblock", "\\logoblock", "\\authorblock", "(some additional information)" ]
page-fontfamily: "Helvetica Neue"
page-align: center
title-fontsize: 30
title-align: center
title-fontstyle: []
title-space-after: 3cm
author-fontsize: 16
author-style: plain
logo-align: center
logo-size: 4cm
logo-space-after: 4cm
bg-image-location: "ULCorner"
bg-image-size: 21cm
pdf:
# Fonts
mainfont: Helvetica Neue
fontsize: 12pt
papersize: A4
margin-top: 25mm
margin-bottom: 25mm
margin-left: 25mm
margin-right: 25mm
toc: true
toc-depth: 2
toc-title: Táboa de contidos
editor: visual
---
## Introdución
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec condimentum eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue tellus at vehicula interdum. Vivamus dapibus ante vitae rhoncus posuere. Ut ut ipsum nisl. Nullam luctus viverra augue id feugiat. Fusce sollicitudin sed massa eget blandit. Pellentesque tempus lacinia metus, nec facilisis massa varius eget. Proin in felis sed arcu faucibus scelerisque. Sed hendrerit tortor nisl, sed mattis lectus luctus at. Nulla et lorem ac est venenatis posuere. Vivamus eget vehicula purus, sit amet mollis nunc. Phasellus pellentesque nisi eu porttitor egestas. Aliquam a aliquam lectus, eu iaculis mauris.
Suspendisse eu gravida orci. Suspendisse vehicula sagittis libero quis lobortis. Suspendisse potenti. Sed imperdiet ligula eu tellus tincidunt rutrum. Vivamus vel nibh vel lacus efficitur tempus. Maecenas sit amet erat at sapien blandit congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus vel nunc hendrerit, venenatis sapien nec, commodo libero. Ut vehicula porta euismod. Vivamus eu dolor neque. Mauris a dui faucibus, elementum dui nec, condimentum nibh.
Etiam aliquam, arcu eget ornare elementum, leo magna sollicitudin augue, vel dapibus lectus nisi ac ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper lacus mauris, ac maximus lectus volutpat nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed interdum, velit non sollicitudin volutpat, purus tellus aliquam lacus, et scelerisque ex nisi et ex. Vivamus porta purus ac mauris placerat, venenatis suscipit augue accumsan. Cras consequat dapibus efficitur.
Phasellus diam felis, condimentum vitae diam nec, tincidunt bibendum elit. Donec condimentum, orci in euismod vestibulum, sapien massa maximus lectus, vel interdum magna magna non lectus. Integer vitae nunc nec urna feugiat venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent sapien velit, molestie nec molestie vel, sodales at mauris. Maecenas accumsan malesuada ipsum eget pellentesque. Nam aliquet leo sit amet felis facilisis facilisis. Vivamus aliquam iaculis eros, non bibendum elit convallis ut. Quisque ut varius arcu. Vivamus pellentesque nisi vitae nisi vulputate, quis dapibus est efficitur. Aenean eget ipsum in lorem aliquet efficitur aliquet a est. In sit amet vehicula eros. Donec dui nulla, ultrices ut nisi non, ornare viverra ante.
Proin facilisis sit amet velit placerat porttitor. In congue risus id tempus congue. Cras rutrum justo at ultricies faucibus. Ut sed turpis nec nulla malesuada feugiat sed eu risus. In mattis eu tellus sit amet commodo. Nam molestie vulputate ullamcorper. Curabitur egestas ligula ut urna blandit faucibus.
And this is what I get in the two pages after the title page
UPDATE
I solved it partially, by following samcarter_is_at_topanswers.xyz's advice (using \restoregeometry). Then I realized that it was not only geometry, but I was also losing all other formats detailed under pdf:. To solve it I erased the pdf: line; that is, all pdf formats should directly go under "titlepage-pdf:". But, again, by doing so, the first page appeard with a large bottom margin, even when using \restoregeometry.
This is my code now:
---
title: "Here we have a title"
author: "Author 1 with surname & Author 2 with surname"
date: last-modified
date-format: "d-MMMM-YYYY"
lang: "es"
format:
titlepage-pdf:
documentclass: scrreport
titlepage: plain
titlepage-geometry:
- top=90mm
- bottom=60mm
- right=30mm
- left=30mm
titlepage-logo: "images/circularNegro.png"
titlepage-bg-image: "images/OsTres.png"
titlepage-theme:
elements: ["\\titleblock", "\\logoblock", "\\authorblock", "(some additional text)" ]
page-fontfamily: "Helvetica Neue"
page-align: center
title-fontsize: 30
title-align: center
title-fontstyle: []
title-space-after: 3cm
author-fontsize: 16
author-style: plain
logo-align: center
logo-size: 4cm
logo-space-after: 4cm
bg-image-location: "ULCorner"
bg-image-size: 21cm
# Fonts
mainfont: Helvetica Neue
fontsize: 12pt
papersize: A4
margin-top: 25mm
margin-bottom: 25mm
margin-left: 25mm
margin-right: 25mm
toc: true
toc-depth: 2
toc-title: Táboa de contidos
editor: visual
---
\restoregeometry
## Introdución
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec condimentum eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue tellus at vehicula interdum. Vivamus dapibus ante vitae rhoncus posuere. Ut ut ipsum nisl. Nullam luctus viverra augue id feugiat. Fusce sollicitudin sed massa eget blandit. Pellentesque tempus lacinia metus, nec facilisis massa varius eget. Proin in felis sed arcu faucibus scelerisque. Sed hendrerit tortor nisl, sed mattis lectus luctus at. Nulla et lorem ac est venenatis posuere. Vivamus eget vehicula purus, sit amet mollis nunc. Phasellus pellentesque nisi eu porttitor egestas. Aliquam a aliquam lectus, eu iaculis mauris.
Suspendisse eu gravida orci. Suspendisse vehicula sagittis libero quis lobortis. Suspendisse potenti. Sed imperdiet ligula eu tellus tincidunt rutrum. Vivamus vel nibh vel lacus efficitur tempus. Maecenas sit amet erat at sapien blandit congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus vel nunc hendrerit, venenatis sapien nec, commodo libero. Ut vehicula porta euismod. Vivamus eu dolor neque. Mauris a dui faucibus, elementum dui nec, condimentum nibh.
Etiam aliquam, arcu eget ornare elementum, leo magna sollicitudin augue, vel dapibus lectus nisi ac ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper lacus mauris, ac maximus lectus volutpat nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed interdum, velit non sollicitudin volutpat, purus tellus aliquam lacus, et scelerisque ex nisi et ex. Vivamus porta purus ac mauris placerat, venenatis suscipit augue accumsan. Cras consequat dapibus efficitur.
Phasellus diam felis, condimentum vitae diam nec, tincidunt bibendum elit. Donec condimentum, orci in euismod vestibulum, sapien massa maximus lectus, vel interdum magna magna non lectus. Integer vitae nunc nec urna feugiat venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent sapien velit, molestie nec molestie vel, sodales at mauris. Maecenas accumsan malesuada ipsum eget pellentesque. Nam aliquet leo sit amet felis facilisis facilisis. Vivamus aliquam iaculis eros, non bibendum elit convallis ut. Quisque ut varius arcu. Vivamus pellentesque nisi vitae nisi vulputate, quis dapibus est efficitur. Aenean eget ipsum in lorem aliquet efficitur aliquet a est. In sit amet vehicula eros. Donec dui nulla, ultrices ut nisi non, ornare viverra ante.
Proin facilisis sit amet velit placerat porttitor. In congue risus id tempus congue. Cras rutrum justo at ultricies faucibus. Ut sed turpis nec nulla malesuada feugiat sed eu risus. In mattis eu tellus sit amet commodo. Nam molestie vulputate ullamcorper. Curabitur egestas ligula ut urna blandit faucibus.
And this is what I get:
The problem is that quarto and/or the titlepage extension issues \restoregeometry at the wrong place. If one looks at the intermediate .tex file, one will see code like this:
...
\clearpage
\restoregeometry
%%% TITLE PAGE END
\end{titlepage}
...
However \restoregeometry needs to be used after the title page is closed (it would also make more sense to have the \clearpage after the title page...)
You can work around it my manually adding one more \restoregeometry before your text:
---
title: "Here we have a title, not too long"
author: "First Author and Second Author"
date: last-modified
date-format: "d-MMMM-YYYY"
lang: "es"
format:
titlepage-pdf:
documentclass: scrreport
titlepage: plain
titlepage-geometry:
- top=90mm
- bottom=60mm
- right=30mm
- left=30mm
titlepage-logo: "example-image-duck"
titlepage-bg-image: "example-image-duck"
titlepage-theme:
elements: ["\\titleblock", "\\logoblock", "\\authorblock", "(some additional information)" ]
page-fontfamily: "Helvetica Neue"
page-align: center
title-fontsize: 30
title-align: center
title-fontstyle: []
title-space-after: 3cm
author-fontsize: 16
author-style: plain
logo-align: center
logo-size: 4cm
logo-space-after: 4cm
bg-image-location: "ULCorner"
bg-image-size: 21cm
editor: visual
---
\restoregeometry
## Introdución
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec condimentum eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue tellus at vehicula interdum. Vivamus dapibus ante vitae rhoncus posuere. Ut ut ipsum nisl. Nullam luctus viverra augue id feugiat. Fusce sollicitudin sed massa eget blandit. Pellentesque tempus lacinia metus, nec facilisis massa varius eget. Proin in felis sed arcu faucibus scelerisque. Sed hendrerit tortor nisl, sed mattis lectus luctus at. Nulla et lorem ac est venenatis posuere. Vivamus eget vehicula purus, sit amet mollis nunc. Phasellus pellentesque nisi eu porttitor egestas. Aliquam a aliquam lectus, eu iaculis mauris.
Suspendisse eu gravida orci. Suspendisse vehicula sagittis libero quis lobortis. Suspendisse potenti. Sed imperdiet ligula eu tellus tincidunt rutrum. Vivamus vel nibh vel lacus efficitur tempus. Maecenas sit amet erat at sapien blandit congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus vel nunc hendrerit, venenatis sapien nec, commodo libero. Ut vehicula porta euismod. Vivamus eu dolor neque. Mauris a dui faucibus, elementum dui nec, condimentum nibh.
Etiam aliquam, arcu eget ornare elementum, leo magna sollicitudin augue, vel dapibus lectus nisi ac ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper lacus mauris, ac maximus lectus volutpat nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed interdum, velit non sollicitudin volutpat, purus tellus aliquam lacus, et scelerisque ex nisi et ex. Vivamus porta purus ac mauris placerat, venenatis suscipit augue accumsan. Cras consequat dapibus efficitur.
Phasellus diam felis, condimentum vitae diam nec, tincidunt bibendum elit. Donec condimentum, orci in euismod vestibulum, sapien massa maximus lectus, vel interdum magna magna non lectus. Integer vitae nunc nec urna feugiat venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent sapien velit, molestie nec molestie vel, sodales at mauris. Maecenas accumsan malesuada ipsum eget pellentesque. Nam aliquet leo sit amet felis facilisis facilisis. Vivamus aliquam iaculis eros, non bibendum elit convallis ut. Quisque ut varius arcu. Vivamus pellentesque nisi vitae nisi vulputate, quis dapibus est efficitur. Aenean eget ipsum in lorem aliquet efficitur aliquet a est. In sit amet vehicula eros. Donec dui nulla, ultrices ut nisi non, ornare viverra ante.
Proin facilisis sit amet velit placerat porttitor. In congue risus id tempus congue. Cras rutrum justo at ultricies faucibus. Ut sed turpis nec nulla malesuada feugiat sed eu risus. In mattis eu tellus sit amet commodo. Nam molestie vulputate ullamcorper. Curabitur egestas ligula ut urna blandit faucibus.
I have a pandas dataframe with multiple columns. I am working on a specific column named "Text_annotated" whose structure is like :
Text_annotated
<html> Lorem ipsum dolor sit amet, <phrase>consectetur adipiscing elit</phrase>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <phrase>Ut enim ad minim veniam</phrase>, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</html>
<html> Faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Pellentesque sit amet porttitor eget dolor morbi. <phrase>Tincidunt praesent semper feugiat nibh sed pulvinar. Lobortis elementum nibh tellus molestie nunc non blandit.</phrase> Tellus at urna condimentum mattis.</html>
<html>Pulvinar etiam non quam lacus. Amet purus gravida quis blandit. Scelerisque eu ultrices vitae auctor eu augue ut. Tincidunt lobortis feugiat vivamus at augue eget arcu dictum varius. Pellentesque adipiscing commodo elit at imperdiet.</html>
and I want to extract only the text between the <phrase></phrase> tags. For this reason, I decided to use PyQuery. So far I have tried
text_phrases= df['Text_annotated'].tolist()
doc = pq(f"{text_phrases}")
phrase_macro = doc.find("phrase").text()
which returns a pyquery.pyquery.PyQuery where each "newline" contains only one result e.g.
consectetur adipiscing elit
Ut enim ad minim veniam
Tincidunt praesent semper feugiat nibh sed pulvinar. Lobortis elementum nibh tellus molestie nunc non blandit.
Thus, my question is whether it's possible to group the results for each row in the df separated by a comma e.g.
consectetur adipiscing elit, Ut enim ad minim veniam
Tincidunt praesent semper feugiat nibh sed pulvinar. Lobortis elementum nibh tellus molestie nunc non blandit.
(I have also tried to iterate over the objects phrases_res = [h.text() for h in doc('phrase').items()] which didn't work)
Any help/suggestion is much appreciated.
PS. Each row is just wrapped with a <html> tag, without any other particular structure.
EDIT: Tried also to "separate" somehow according to the html tag, but returned the previous result.
rows = doc('html')
for row in rows.text():
phrase_res = doc.find("phrase").text()
new_df['Phrases_res'] = phrase_res
new_df.head(5)
You can use pandas.Series.str.findall with a regex expression to return a list of all the strings between two delimiters.
Try this :
import pandas as pd
pd.options.display.max_colwidth = None
data = ['<html> Lorem ipsum dolor sit amet, <phrase>consectetur adipiscing elit</phrase>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <phrase>Ut enim ad minim veniam</phrase>, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</html>',
'<html> Faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Pellentesque sit amet porttitor eget dolor morbi. <phrase>Tincidunt praesent semper feugiat nibh sed pulvinar. Lobortis elementum nibh tellus molestie nunc non blandit.</phrase> Tellus at urna condimentum mattis.</html>',
'<html>Pulvinar etiam non quam lacus. Amet purus gravida quis blandit. Scelerisque eu ultrices vitae auctor eu augue ut. Tincidunt lobortis feugiat vivamus at augue eget arcu dictum varius. Pellentesque adipiscing commodo elit at imperdiet.</html>']
df = pd.DataFrame(data, columns=['Text_annotated'])
df['Phrases'] = df['Text_annotated'].str.findall(r"<phrase>(.*?)</phrase>")
>>> display(df)
I'm having trouble understanding why the two chunks of HTML below render differently. The yellow and pink table is missing a BR tag, and flows efficiently, the green and blue table has the <BR> tag in the middle of the text in the blue cell, and has unwanted space in the green cell. I've tried rendering as flex boxes and tables, and they render the same way. I've tried different browsers, and they render the same way.
What rule is being followed in the green and blue layout that causes the whitespace in the green cell?
How can I get rendering like the yellow-and-pink case and use <BR> tags? I'm actually after <P> tags, but let's just talk about <BR> tags, which I figure are the most simple case.
<html><body>
<div style="display: flex; flex-flow: row;">
<div style="background-color: green;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div style="background-color: blue;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
<br/>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
</div>
</div>
<br/>
<table>
<tr>
<td style="background-color: yellow;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</td>
<td style="background-color: pink;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
<xbr/>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
</td>
</table>
<br/>
</body></html>
Screenshot:
If a height is assigned to a div, the whitespace is not removed (see the darker green below), and if a <br> tag is allowed into a table which has a height on the cell, the whitespace is split between the top and bottom of the cell (see the lighter green below) - but the height attribute doesn't affect the rendering anyway:
This behaviour is exhibited in FireFox 80.0 and Chrome Version 85.0.4183.83
Here's what's going on:
Inside of the div with display: flex; flex-flow: row you have two children, the green and the blue divs.
The browser calculates their individual widths (it's the width because flex-flow: row) as follows:
The calculation of the green div's width is straight forward. It's the width of the whole text on one line.
=> greenWidth
The calculation of the blue div is a little bit more involved because of the <br>. This causes the text to be split in two. The browser then calculates the widths of these two bits of text that they would take on one line each. Then it takes the wider of these.
=> blueWidth
Both, the green and the blue box have their default value for flex-basis which is auto. For the green box, the browser takes greenWidth and for the blue box it takes blueWidth as the result of auto.
I still haven't come up with an actual solution but maybe, based on the above, you might be able to figure something out.
In the flex-box the items are stretched to the height of the container (if height of items is not defined). However, You can change this behaviour by gibing the green div a height.
Suppose the height is 100px;
<html><body>
<div style="display: flex; flex-flow: row;">
<div style="background-color: green; height: 100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div style="background-color: blue;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo.
<br/>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
</div>
</div>
<br/>
<table>
<tr>
<td style="background-color: yellow;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</td>
<td style="background-color: pink;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo.
<xbr/>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
</td>
</tr>
</table>
<br/>
</body></html>
Christian pointed in the right direction. Understanding that the problem is down to sizing being affected by tags, I allowed the browser to size the un-tagged content, but hid its rendering.
The "solution" is to have two text bodies, one rendering with tags and the other without. The text without tags is color:transparent; and positioned with normal text flow. The text with tags is rendered on top of the document text flow in the location of the transparent text by using a z-index higher than the normal text. There is a chance that the text with tags will overflow the table, so layout your page with this possibility under consideration (or pad the text without tags a little):
<html><body>
<div style="display: flex; flex-flow: row;">
<div style="background-color: #FFA;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div style="position: relative; background-color: #FDD;">
<div style="position: absolute; z-index:2;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
<br/>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
</div>
<div style="color:transparent;">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
<xbr/>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
</div>
</div>
</div>
</body></html>
I want to load a whole html file as testdata with liquibase. So far I've used the approach with loading testdata from csv file, but it is not designed to handle huge html's.
Is there a way to achieve it?
Here is an example to make it clear:
I have a table named Movie. The fields are: id, title, description. In a databaseChangeLog section I point to a file where I store the testdata:
<loadData encoding="UTF-8"
file="config/liquibase/testdata/movie.csv"
separator=";"
tableName="movie"/>
The content is as follows:
id;title;description
1;Titanic;great movie
2;Forrest Gump;another great movie
Now I want to change the description to something that is closer to the real usecase. Lets say this HTML:
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porta pulvinar lacus eget egestas. Ut quis efficitur turpis. Nunc tincidunt turpis lorem, eget vestibulum nisi sodales at. Quisque in tortor et sapien ornare venenatis. Integer pulvinar nec ipsum malesuada porta. Sed massa metus, condimentum non varius ornare, sollicitudin at dui. Praesent porta, ante et interdum convallis, tellus augue tempus nisl, sit amet mollis augue nisl vel metus.
</p>
<p>
Nam quis libero rhoncus, facilisis magna ut, bibendum urna. Nullam sit amet volutpat turpis. Praesent eget aliquet orci. Duis dignissim tellus erat, eget fermentum augue dapibus sed. Quisque vitae est ipsum. Quisque sit amet libero eget nisi faucibus maximus vel a sem. Proin maximus neque arcu, sit amet eleifend dolor ornare at. Suspendisse laoreet lobortis tellus sed consequat. Nunc commodo ligula eget neque porta consectetur. Mauris sagittis elit in sodales luctus.
</p>
</div>
The content won't fit into the csv file. I could delete all the newlines, but it makes the file unmaintainable.
loadData has a column attribute which in turn has a valueClobFile attribute where you could put in a path to a (html) file.
Checkout these two files in the liquibase integration tests that show a use of this:
batchInsert.changelog.xml
batchInsert.csv
I want to convert a long string (json later) to binary data, to send it as a message in Service Broker. Now I have a problem with the string length, since it's cut after a few chars.
declare #astring varbinary(MAX) = CONVERT(varbinary(MAX), 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.');
When I convert this back to varchar
convert(varchar(MAX), #longerstring)
the result is 126 chars: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliq".
I tried varchar(8000) too, can't see an improvement.. what am I doing wrong? Thanks.
I've just run the following in SQL Server Management Studio 2008 R2 and it works as expected (592 characters):
declare #astring varbinary(MAX) = CONVERT(varbinary(MAX), 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.');
print convert(varchar(MAX), #astring)
Note that I changed #longerstring to #astring as part of this, as I do not know where #longerstring came from.