I am using an ExtJs Panel to display an SQL query on the screen.
For highlighting the query I am using SyntaxHighlighter.
Problem: I am not getting scrollbars in the panel even after setting "autoScroll: true" for the panel.
I have tried the following:
Earlier Highlighter Code:
'<pre class="brush: sql">' + sqlOutput + '</pre>'
Thing I tried:
'<pre class="brush: sql;wrap-lines: false">' + sqlOutput + '</pre>';
But no success.
Can anyone help me with this.
UPDATE
I am able to get a vertical scrollbar in Chrome but no horizontal scrollbar
This is how it looks:
You may either specify a maxWidth on the panel (quick n' dirty solution) or add a fixed-width layout specification in the parent container of the panel.
Related
I have a QScrollArea Widget, which starts empty;
It has a vertical layout, with a QGridLayout, and a vertical spacer to keep it at the top, and prevent it from stretching over the whole scroll area;
Elsewhere in the program, there is a QTextEdit, which when changed, has its contents scanned for "species" elements, and then they are added to the QGridLayout. Any species elements which have been removed are removed too. This bit works;
I have turned the vertical scrollbar on all the time, so that when it appears it does not sit on top of the other stuff in there. Note that the scroll bar is larger than the scroll box already though, despite not needing to be.
This is the problem. The scroll area seems to be preset, and i cannot change it. If i add more rows to the QGridLayout, the scroll area doesn't increase in size.
Instead, it stays the same size, and squeezes the QGridLayout, making it look ugly (at first);
And then after adding even more it becomes unusable;
Note that again, the scroll bar is still the same size as in previous images. The first two images are from Qt Designer, the subsequent 3 are from the program running.
If I resize the window so that the QScrollArea grows, then I see this:
Indicating that there's some layout inside the scroll area that is not resizing properly.
My question is; what do I need to do to make the scrollable area of the widget resize dynamically as I add and remove from the QGridLayout?
If you're coming here from Google and not having luck with the accepted answer, that's because you're missing the other secret invocation: QScrollArea::setWidget. You must create and explicitly identify a single widget which is to be scrolled. It's not enough to just add the item as a child! Adding multiple items directly to the ScrollArea will also not work.
This script demonstrates a simple working example of QScrollArea:
from PySide.QtGui import *
app = QApplication([])
scroll = QScrollArea()
scroll.setWidgetResizable(True) # CRITICAL
inner = QFrame(scroll)
inner.setLayout(QVBoxLayout())
scroll.setWidget(inner) # CRITICAL
for i in range(40):
b = QPushButton(inner)
b.setText(str(i))
inner.layout().addWidget(b)
scroll.show()
app.exec_()
The documentation provide an answer :
widgetResizable : bool
This property holds whether the scroll area should resize the view widget.
If this property is set to false (the default), the scroll area honors the size of its widget.
Set it to true.
Why don't you use a QListView for your rows, it will manage all the issues for you? Just make sure that after you add it you click on the Class (top right window of designer) and assign a layout or it wont expand properly.
I use a QLIstWidget inside a QScrollArea to make a scrollable image list
Try this for adding other objects to the list, this is how I add an image to the list.
QImage& qim = myclass.getQTImage();
QImage iconImage = copyImageToSquareRegion(qim, ui->display_image->palette().color(QWidget::backgroundRole()));
QListWidgetItem* pItem = new QListWidgetItem(QIcon(QPixmap::fromImage(iconImage)), NULL);
pItem->setData(Qt::UserRole, "thumb" + QString::number(ui->ImageThumbList->count())); // probably not necessary for you
QString strTooltip = "a tooltip"
pItem->setToolTip(strTooltip);
ui->ImageThumbList->addItem(pItem);
Update on Artfunkel's answer:
Here's a PySide6 demo that uses a "Populate" button to run the for loop adding items to the scroll area. Each button will also delete itself when clicked.
from PySide6.QtWidgets import *
app = QApplication([])
scroll = QScrollArea()
scroll.setWidgetResizable(True) # CRITICAL
inner = QFrame(scroll)
inner.setLayout(QVBoxLayout())
scroll.setWidget(inner) # CRITICAL
def on_remove_widget(button):
button.deleteLater()
def populate():
for i in range(40):
b = QPushButton(inner)
b.setText(str(i))
b.clicked.connect(b.deleteLater)
inner.layout().addWidget(b)
b = QPushButton(inner)
b.setText("Populate")
b.clicked.connect(populate)
inner.layout().addWidget(b)
scroll.show()
app.exec()
I am creating a uwp app and when i set my xaml code to this
<Controls:HamburgerMenu x:Name="MyHamburgerMenu" HamburgerBackground="#FFD13438"
HamburgerForeground="White"
NavAreaBackground="# FF2B2B2B"
NavButtonBackground="#FFD13438"
SecondarySeparator="White"
NavButtonForeground="White"
LostFocus="MyHamburgerMenu_LostFocus"
DisplayMode="CompactOverlay"
>
Its not changing the color of the Hamburger Panel I have tried all colors.Its still shows the default colors only.
Also even when i change the display mode it still pushes the Title Page.
I dont whats causing the issue.My Template 10 version is v1.1.10.
The issue
To set the background color of the hamburger panel, you have to use the NavAreaBackground dependency property as you did. It should work fine. The problem is the space character between '#' and the hexadecimal value 'FF2B2B2B' in your code. Just remove the space character and it will work : NavAreaBackground="#FF2B2B2B"
In your Shell.xaml.cs file just comment this line HamburgerMenu.RefreshStyles(_settings.AppTheme, true);
It should work.
When editing an image content element in TYPO3, usually there is a tab "appearance" with options for image size, alignment, position etc. In my installation that tab is not showing, but instead a "nameless" tab. I'm using the t3sbootstrap extension and this behaviour might be caused by bootstrap.
Does anyone know how I can make the appearance tab visible and usable again? I've searched the internet but didn't find anything helpful so far. Thanks for your help!
Here is a screenshot from my backend:
Apparently this problem is caused by a corrupted TCA. I made the following changes in default TCA using System -> Configuration:
To restore the options for Layout, Top and bottom margins and frames, I set the following:
$TCA['tt_content']['palettes']['frames']['showitem'] = 'layout;LLL:EXT:cms/locallang_ttc.xlf:layout_formlabel, spaceBefore;LLL:EXT:cms/locallang_ttc.xlf:spaceBefore_formlabel, spaceAfter;LLL:EXT:cms/locallang_ttc.xlf:spaceAfter_formlabel, section_frame;LLL:EXT:cms/locallang_ttc.xlf:section_frame_formlabel';
To restore the appearance tab title:
In $TCA['tt_content']['types']['image']['showitem'] I changed LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:tabs.appearance to LLL:EXT:cms/locallang_ttc.xlf:tabs.appearance
To restore the image adjustments:
In $TCA['tt_content']['types']['image']['showitem'] I changed --div-- to --palette-- right after the frames part and I added LLL:EXT:cms/locallang_ttc.xlf:palette.image_settings;image_settings, --palette--;LLL:EXT:cms/locallang_ttc.xlf:palette.imageblock;imageblock, --div--; after the frames part.
This is the result:
$TCA['tt_content']['types']['image']['showitem'] = '--palette--;LLL:EXT:cms/locallang_ttc.xlf:palette.general;general, --palette--;LLL:EXT:cms/locallang_ttc.xlf:palette.header;header, --div--;LLL:EXT:cms/locallang_ttc.xlf:tabs.images, image, --palette--;LLL:EXT:cms/locallang_ttc.xlf:palette.imagelinks;imagelinks, --div--;LLL:EXT:cms/locallang_ttc.xlf:tabs.appearance, --palette--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:palette.frames;frames, --palette--;LLL:EXT:cms/locallang_ttc.xlf:palette.image_settings;image_settings, --palette--;LLL:EXT:cms/locallang_ttc.xlf:palette.imageblock;imageblock, --div--;LLL:EXT:cms/locallang_ttc.xlf:tabs.access, --palette--;LLL:EXT:cms/locallang_ttc.xlf:palette.visibility;visibility, --palette--;LLL:EXT:cms/locallang_ttc.xlf:palette.access;access, --div--;LLL:EXT:cms/locallang_ttc.xlf:tabs.extended, , --div--;LLL:EXT:flux/Resources/Private/Language/locallang.xlf:tt_content.tabs.relation, tx_flux_parent, tx_flux_column, tx_flux_children;LLL:EXT:flux/Resources/Private/Language/locallang.xlf:tt_content.tx_flux_children';
Result
After making these changes, the result is the following:
I'm trying to change the HTML rendered by the Kendo UI autocomplete MVC helper, but it seems Kendo has hard coded it to be a UL. Here's my code sample:
#(Html.Kendo().AutoComplete()
.Name("clientsAutoComplete")
.DataTextField("ClientCode")
.DataSource(source => source.Read(read => read.Action("GetClients", "Profile").Type(HttpVerbs.Post)))
.Template("<table style='width:600px'>" +
"<thead>" +
"<tr><th>Client</th><th>Code</th></tr>" +
"</thead>" +
"<tbody>" +
"<tr><td> " +
"${ data.Firstname }asdfasdfasdf</td><td>${ data.ClientCode }</td></tr>" +
"</tbody>" +
"</table>")
//.TemplateId("javascriptTemplate")
))
What you end up with is a table repeated for each record. If you change the template value to have only the row definitions of a table as in the following:
.Template("<tr><td>${ data.Firstname }asdfasdfasdf</td><td>${ data.ClientCode }</td></tr>")
Then Kendo removes the TR and TD tags altogether and leaves you with the LI's.
I've even tried using a client side template using a script element as suggested by Kendo, but it has pretty much the same erratic results.
I need a table to render in the drop down, which will have a headers row (THead) and the content in the TBODY section. Anyone know how to achieve this scenario?
Regards,
Jacques
As far as I can tell, tables aren't supported by the templating system. There's a HeaderTemplate property, but no FooterTemplate that you can use to close your table with.
Source link:
http://docs.kendoui.com/api/web/autocomplete#configuration-headerTemplate
I have .jsff page that contain command button and inline frame. What I want to do is, I want to make command button remain static at the same place and only inline frame can move when scroll the page.
Currently what I do is I set some panel stretch layout(StyleClass:AFStetchWidth). I put the command button at the top. Inline frame in scroll panel group at the center.
Here is my structure:
af:panelStetchLayout(StyleClass:AFStretchWidth)
>
Panel Stretch Layout facets
bottom
center
af:panelGroupLayout-scroll
af:inlineFrame (StyleClass:AFStretchWidth)
end
start
top
af:panelGroupLayout-horizontal
af:commandButton-back
When I run this page: command button remain static at the top. This is correct, but the size of the inline frame is small. Is there a way to make an inline frame to be stretch?
set the (StyleClass:AFStretchWidth) on the af:panelGroupLayout-scroll.
Did you try putting this attribute :
sizing="preferred"
I have used it and it works pretty well inside panel stretch layout.
just i solve it as following:
<af:panelGroupLayout id="pgl1" halign="center">
<af:inlineFrame id="if1" source="/index.html" styleClass="AFStretchWidth" inlineStyle="height:100%;"/>
</af:panelGroupLayout>
inlineStyle="height:100%;"
on default af:panelGroupLayout
thats all.
I was getting the same issue. Here I have solved it as below:
I have used panel splitter for inline frame.
<af:panelSplitter styleClass="AFStretchWidth" inlineStyle="height:500px;" id="ps3" dimensionsFrom="parent"
positionedFromEnd="false">
<f:facet name="first">
<af:panelGroupLayout id="pgl11" >
<af:inlineFrame styleClass="AFStretchWidth" partialTriggers="cb3" source="#{pdfHandler.servletString}"
id="if1" visible="true" binding="#{pdfHandler.inLineFrame}" shortDesc=" "
inlineStyle="height:500px;"/>
</af:panelGroupLayout>
</f:facet>
Here as shown above,
I have added inlineStyle for height in both panelSplitter and in inlineFrame.
Added dimensionFrom for panelSplitter as 'parent'
Surround inlineFrame with panelGroupLayout.
With this, It worked for me.