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>
Related
I have made a sandbox example of what I need: https://codesandbox.io/s/vue-tailwind-css-template-forked-7uhkgl?file=/src/App.vue
<div class="flex h-screen flex-col">
<header class="sticky top-0 h-12 w-full bg-white">header</header>
<main class="h-screen overflow-scroll bg-blue-200 p-4">
<div class="h-full rounded-xl bg-green-200 p-4">
<p class="h-full overflow-scroll rounded-xl p-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa dicta quasi, fugit aperiam quis laudantium dolorem libero mollitia provident maxime odio. Sint dolore libero magnam atque dolorem ex pariatur voluptatum. Alias eos amet quis, nostrum explicabo excepturi, odio perspiciatis omnis sunt mollitia reiciendis ut ipsa doloremque! Ut, rem fugiat impedit, iusto, nam repellat labore aspernatur vero ad ducimus numquam veritatis. Tenetur iure voluptatem sint quo ut qui rerum pariatur officiis exercitationem? Harum exercitationem suscipit hic soluta deleniti doloremque ullam temporibus quis, magnam rerum velit laudantium illum quidem animi blanditiis ducimus. Aliquam excepturi dolores temporibus ducimus voluptatem ullam maiores nihil adipisci quo debitis! Quo, atque voluptatibus laboriosam minus nulla hic rerum, eaque dicta modi quidem beatae officia, temporibus eligendi fugiat animi. Nihil quos, sed fugiat sunt vel suscipit similique libero aut deleniti at soluta rem iure dolores sapiente tempore iste accusantium, impedit quisquam molestiae eos asperiores cumque tenetur eveniet ullam? Aut. Distinctio alias nemo fugiat explicabo eaque tenetur unde maxime laborum reiciendis voluptas maiores incidunt dolorum expedita, dolore hic consequuntur provident laudantium porro? Quas unde dolorem, quidem numquam quis vero quam. Ex quibusdam labore voluptatum rerum obcaecati! Sed unde incidunt, laudantium animi pariatur accusamus laboriosam dolores vero aliquam alias quis eos sapiente distinctio deleniti quidem modi ipsam? Illo voluptatibus fugit ducimus! Eius adipisci laborum eum tenetur. Explicabo animi temporibus neque doloremque laboriosam assumenda maxime, veritatis autem? Odio consequuntur quasi dignissimos accusamus, fuga temporibus labore architecto esse sed fugiat asperiores sapiente. Vel! Dicta veniam tempore consequuntur, aliquam ratione, quidem eaque id aspernatur quis voluptatum voluptas a in quibusdam voluptate quaerat sequi saepe animi accusantium nihil optio, porro esse. Officia eius quaerat officiis. Architecto aliquid, et vero tempore consequuntur deleniti reprehenderit expedita voluptatum totam ipsam similique praesentium numquam? Molestiae itaque, nobis harum, dolores quibusdam mollitia ex labore in magni sit, iure quo necessitatibus. Architecto fugiat, eius labore natus commodi nostrum ipsam, sequi nobis possimus ducimus ipsa? Expedita vero doloremque tenetur dolore ipsum at ea eligendi quos incidunt ut quibusdam eveniet nostrum, fuga optio? Libero cum a repellendus tempora facere aliquam animi ipsam perferendis nostrum! Quidem ducimus eaque fugit culpa accusantium, temporibus harum soluta hic quae maxime tempore eos, sed magni veniam atque est! Error obcaecati quasi sequi explicabo quas magni fugit possimus, temporibus animi nemo minima. Accusamus illum enim, fuga odit reprehenderit dolore, inventore nisi amet aperiam molestiae eaque maxime voluptates asperiores voluptas. Laboriosam sint ducimus tempora reprehenderit neque corrupti consectetur et possimus esse quas dicta maxime quis autem cupiditate, quaerat doloribus doloremque aliquid quae alias iusto, quisquam natus illo eum mollitia. Nihil! Aspernatur natus velit delectus eaque dolore cupiditate ipsa doloribus atque voluptatem iure sequi inventore odio vitae at, dolorem dolor quo quibusdam quod voluptatibus quas molestiae tenetur? Illum minus corporis incidunt. Fuga, nam unde. Magni nobis similique minus, quae itaque reprehenderit nulla ex suscipit voluptate quos distinctio, est placeat accusamus blanditiis cumque labore, soluta impedit. In aliquam consequatur exercitationem provident rerum? Voluptatem repudiandae magnam sed nulla cupiditate corporis debitis at fuga similique inventore impedit quae alias, dolores error dicta, iure ipsam velit. Tempora eaque deleniti at nam ad obcaecati fugit ullam? Minus aut soluta neque quod sunt suscipit tempora! Nulla quisquam dolorem assumenda dolor optio ratione aperiam sunt iste blanditiis. Ex minus, enim nulla voluptatum veniam animi amet qui deserunt sequi. Praesentium in ratione qui animi deleniti, id similique fugit quas veniam ipsam iusto nemo! Corporis consequuntur, autem nisi quasi facilis saepe reiciendis nesciunt qui facere laudantium, in, eos ad voluptatum! Aliquid laudantium, ab debitis atque praesentium quia quaerat alias, quo repellat et obcaecati dolore assumenda aperiam? Facere tempora autem deserunt nam, at nihil rem, eius quis adipisci eligendi, esse consectetur!</p>
</div>
</main>
<footer class="sticky bottom-0 h-12 w-full bg-white">footer</footer>
</div>
Everything is fine until I try this on real mobile device, then the main content is a bit cropped and it is not what I want.
This is what I got:
My project is in Vue3.
If you are using flex-col, you don't need to use sticky or absolute positioning for your header and footer. They just need to be stacked inside the flex and your content section set to flex-1 to take up all of the available remaining vertical space. adding overflow-hidden on <main> and moving the scrollbar into the green container should fix the scrollbar issue. For example:
<template>
<div class="flex h-screen flex-col">
<header class="h-12 w-full bg-white">header</header>
<main class="flex-1 bg-blue-200 p-4 overflow-hidden">
<div class="h-full rounded-xl bg-green-200 p-4 overflow-y-scroll ">
<p class="h-full rounded-xl p-4">
...
</p>
</div>
</main>
<footer class="h-12 w-full bg-white">footer</footer>
</div>
</template>
This removes the h-space from your content wrapper which will hopefully resolve the issue you are seeing on mobile devices.
Also, replacing overflow-scroll with overflow-y-scroll will get rid of the internal horizontal scrollbar.
There are three QGraphicsView in one line. If these QGraphicsView is vertically located (orientation is 0), to select texts with mouse is no problem. But if these QGrahpicsView is horizontally located, goes bad.Even if horizontally located, I must select texts vertically.
It seems that the mouse point at the time of mouse press event is decided by QTextEdit coordinate at first.
At the time of mouse move event, the mouse point is decided by the position of mouse press event as the anchor.
So is the time of mouse release event.
Is there way to select texts with mouse naturally? Or does Qt allow us to select texts with mouse vertically only?
from PySide6.QtWidgets import QApplication, QGraphicsView, QGraphicsScene, QGraphicsProxyWidget, QTextEdit
from PySide6.QtGui import QTextDocument, QPageSize, QPainter, QBrush, QTextCharFormat, QTextOption
from PySide6.QtCore import Qt, Signal, QRect, QRectF, QEvent, QSize, QSizeF, QPointF
class MainGraphicsView(QGraphicsView):
def __init__(self, parent=None):
super(MainGraphicsView, self).__init__(parent)
self._mainscene = MainGraphicsScene(1)
self._mainscene._mainview = self
self.setScene(self._mainscene)
class MainGraphicsScene(QGraphicsScene):
def __init__(self, orientation = 1, parent=None):
super(MainGraphicsScene, self).__init__(parent)
if orientation == 0:
self.rootView = TextGraphicsView()
self.rootView.main_scene = self
self.root_proxywidget = self.addWidget(self.rootView)
self.rootView.setSceneRect(0, 0, self.document()._pageWidth, self.document()._pageHeight)
self.secondaryView = SecondaryTextGraphicsView(2, self.rootView.scene())
self.secondaryView.setSceneRect(0, self.document()._pageHeight, self.document()._pageWidth, self.document()._pageHeight)
self.secondary_proxywidget = self.addWidget(self.secondaryView)
self.secondary_proxywidget.setPos(0, self.document()._pageHeight)
self.thirdView = SecondaryTextGraphicsView(3, self.rootView.scene())
self.thirdView.setSceneRect(0, self.document()._pageHeight*2, self.document()._pageWidth, self.document()._pageHeight)
self.third_proxywidget = self.addWidget(self.thirdView)
self.third_proxywidget.setPos(0, self.document()._pageHeight*2)
if orientation == 1:
self.rootView = TextGraphicsView()
self.rootView.main_scene = self
self.root_proxywidget = self.addWidget(self.rootView)
self.rootView.setSceneRect(0, 0, self.document()._pageWidth, self.document()._pageHeight)
self.secondaryView = SecondaryTextGraphicsView(2, self.rootView.scene())
self.secondaryView.setSceneRect(0, self.document()._pageHeight, self.document()._pageWidth, self.document()._pageHeight)
self.secondary_proxywidget = self.addWidget(self.secondaryView)
self.secondary_proxywidget.setPos(self.document()._pageWidth, 0)
self.thirdView = SecondaryTextGraphicsView(3, self.rootView.scene())
self.thirdView.setSceneRect(0, self.document()._pageHeight*2, self.document()._pageWidth, self.document()._pageHeight)
self.third_proxywidget = self.addWidget(self.thirdView)
self.third_proxywidget.setPos(self.document()._pageWidth*2, 0)
self.setBackgroundBrush(QBrush(Qt.gray))
def view(self):
return self._mainview
def textedit(self):
return self.document().parent()
def document(self):
return self.rootView.document()
class TextGraphicsView(QGraphicsView):
def __init__(self, parent=None):
super().__init__(parent)
self.page = 1
self.initScene()
def mousePressEvent(self, event):
SecondaryTextGraphicsView.selectedPage = self.page
return QGraphicsView.mousePressEvent(self, event)
def initScene(self):
self.common_scene = TextGraphicsScene()
self.common_scene.root_view = self
self.setScene(self.common_scene)
self.setSceneRect(0, self.document()._pageHeight*(self.page -1), self.document()._pageWidth, self.document()._pageHeight)
self.resize(int(self.document()._pageWidth), int(self.document()._pageHeight))
self.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
self.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
def view(self):
return self.main_scene._mainview
def textedit(self):
return self.common_scene.textedit
def document(self):
return self.common_scene.textedit.document()
class SecondaryTextGraphicsView(QGraphicsView):
def __init__(self, page, scene, parent=None):
super().__init__(scene, parent)
self.page = page
self.initScene()
self.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
self.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
def initScene(self):
self.setSceneRect(0, self.document()._pageHeight*(self.page-1), self.document()._pageWidth, self.document()._pageHeight)
self.resize(int(self.document()._pageWidth), int(self.document()._pageHeight))
def view(self):
return self.scene().root_view.view()
def textedit(self):
return self.scene().textedit()
def document(self):
return self.scene().textedit.document()
class TextGraphicsScene(QGraphicsScene):
def __init__(self, parent=None):
super().__init__(parent)
self.textedit = TextEdit(scene=self)
self.addWidget(self.textedit)
def view(self):
return self.root_view
def document(self):
return self.textedit.document()
class TextEdit(QTextEdit):
def __init__(self, scene, parent=None):
super().__init__(parent)
self.setAttribute(Qt.WA_InputMethodEnabled, True)
self.setMouseTracking(False)
self.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
self.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
self.scene = scene
self.setDocument(TextDocument(parent=self))
self.setWordWrapMode(QTextOption.WrapAtWordBoundaryOrAnywhere)
self.setLineWrapMode(self.LineWrapMode.FixedPixelWidth)
self.setLineWrapColumnOrWidth(self.document()._pageWidth)
self.setAttribute(Qt.WA_InputMethodEnabled, True)
self.setInputMethodHints(Qt.ImhMultiLine)
self.resize(self.document()._pageSize.toSize().width(), self.document()._pageSize.toSize().height()*3)
self.setPlainText("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. \
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. \
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\
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. \
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. \
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\
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. \
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. \
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\
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. \
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. \
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\
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. \
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. \
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\
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. \
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. \
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\
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. \
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. \
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\
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. \
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. \
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\
\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. \
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. \
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\
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. \
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. \
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\
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. \
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. \
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
def mouseMoveEvent(self, event):
print(event.position())
return QTextEdit.mouseMoveEvent(self, event)
def view(self):
return self.scene.root_view
def pageSize(self):
return self.document()._pageSize
class TextDocument(QTextDocument):
def __init__(self, parent=None):
super().__init__(parent)
self._pageSize = QPageSize.size(QPageSize.A4, QPageSize.Point)
self._pageHeight = self._pageSize.height()
self._pageWidth = self._pageSize.width()
self.setDocumentMargin(30.5)
def main():
import sys
app = QApplication([]) if QApplication.instance() is None else QApplication.instance()
m = MainGraphicsView()
m.show()
sys.exit(app.exec())
if __name__ == "__main__":
main()
from your comment:
if I use QGraphicsView and shows the each page, I don't have to calculate the position of QTextLines when the document is horizontally layouted. QGraphicsView can show each page horizontally, but in actual QTextEdit is all vertically layouted. That is why it is very simple.
You need not to draw the lines on the basis of QTextLayout.
QTextLine also has draw method.
Please use QTextLine instead of QTextLayout.
QTextLine draw
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
It's possible to create a v-list in vuetify with fixed height and when my user add some content he show a scrollbar in the v-list
tks
What your asking is not entirely clear, but with CSS you can add a scroll bar to a card if its not automatic.
Here is the codepen:
https://codepen.io/AleaQ/pen/WJZqWb
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-layout>
<v-flex xs6>
<v-card class="scroll" height="100">
"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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
//CSS MARKUP
.scroll {
overflow-y: auto;
}
I'm trying to create a TextBlock that transitions its content when its value changes (slide in from left).
The problem is that the transition is replayed each time the user scrolls the TextBlock (which is wrapped inside a ScrollViewer)
<ScrollViewer Width="300" Height="200" VerticalScrollBarVisibility="Auto" VerticalScrollMode="Enabled" >
<TextBlock TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}">
<TextBlock.Transitions>
<TransitionCollection>
<ContentThemeTransition HorizontalOffset="-500" />
</TransitionCollection>
</TextBlock.Transitions>
"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. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 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? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</TextBlock>
</ScrollViewer>
Am I doing something wrong, or is this a WinRT bug?
I think I responded to your Connect bug, but can you use EntranceThemeTransition instead here?