I create a list of 64 items using scrollAreaWidgetContents on Qt the list is like this:
I want when I press the scroll down arrow I got 4 sentences not 5. So for one click down or up of the arrow I skip one sentence.
The code of scrollArea's stylesheet:
QFrame{
border:solid;
}
QScrollBar:vertical {
width: 15px;
margin: 30px 0 30px 0;
border-style: solid;
}
QScrollBar::handle:vertical {
min-height: 30px;
border: solid ;
}
QScrollBar::add-line:vertical {
subcontrol-position: bottom;
subcontrol-origin: margin;
border: solid ;
height: 30px;
}
QScrollBar::sub-line:vertical {
subcontrol-position: up;
subcontrol-origin: margin;
border: solid ;
height: 30px;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
background: none;
}
QScrollBar::up-arrow:vertical
{
image: url(icons/Freccia_Su.png);
}
QScrollBar::down-arrow:vertical
{
image: url(icons/Freccia_Giu.png);
}
I found the setPage in the documentation of QScrollBar but I don't understand how to add it? Can someone help me to fix this issue?
I think you may be expecting too much from QScrollArea. I can't tell from your question how you have set the contents of the QScrollArea, but if you have set a QTextEdit as its widget, then the QScrollArea doesn't know anything about the size of the text, for example.
You may be better off looking at QListWidget:
//assuming a ui with a QListWidget called listWidget
ui.setupUi(this);
QStringList items;
for (int i = 0; i < 100; i++)
items << "item " + QString::number(i);
ui.listWidget->insertItems(0, items);
This will automatically scroll by one item per click of the scroll bars.
You can create more complicated list entries using QListWidgetItem (see the docs for QListWidget).
The items can contain widgets themselves, so you can have a custom widget with radiobuttons etc, and use QListWidget::setItemWidget() to set it on each item. The scrolling will take the widget size into account.
Related
I use vaadin 14.6.1 and the grid.
I have already made the row heights smaller / denser with the following css via #CssImport:
[part~="cell"] {
font-size: 12px;
min-height: 20px;
padding: 0px;
margin: 0px;
}
:host(.kalkulation-material-grid) [part="row"] {
min-height: 20px;
max-height: 20px;
}
The grid has a headerRow with appendHeaderRow() in which TextFields are to be displayed, which serve as filters for this column. How do I get these text fields smaller / denser. I cannot adjust the rowHeight of the headerRow.
The first line has also a wrong row height, see screenshot.
How can I adjust those row heights ?
From Discord:
This is how the Dense Grid Cookbook example does it:
grid.setThemeName("dense");
:host([theme~="dense"]) [part~="cell"] {
min-height: var(--lumo-size-xxs);
}
:host([theme~="dense"]) {
font-size: var(--lumo-font-size-xs);
}
:host([theme~="dense"]) [part~="cell"] ::slotted(vaadin-grid-cell-content) {
padding: 1px var(--lumo-space-s);
}
:host([theme~="dense"]:not([theme~="no-row-borders"])) [part="row"][first] [part~="cell"]:not([part~="details-cell"]) {
border-top: 0;
min-height: calc(var(--lumo-size-xxs) - var(--_lumo-grid-border-width));
}
There is only regular text content in that example, so the TextFields may need some additional styling.
i am trying to show the opened tab text in left .i wrote that in stylesheet.but it is not working.
here is the stylesheet i used
QTabWidget QTabBar{
background-color: #373738;
height: 30px;
}
QTabWidget QTabBar::tab{
text-align: left;
background-color: #136ba2;
border-style: 1px rgb(67, 67, 67);
height: 30px;
width: 130px;
color: #136ba2;
padding: 0px 5px 0px 5px;
}
QTabWidget QTabBar::tab:selected{
background-color: #5A5B5C;
font-weight: bold;
color: #ffffff;
}
QTabWidget QTabBar::tab:!selected{
background-color:#353536;
color: #B4B4B4;
}
QTabWidget QTabBar::tab:hover{
background-color: #5A5B5C;
color: #ffffff;
}
here is an image
I think it is not possible with stylesheet, according to the doc :
text-align [...] This property is currently supported only by QPushButton and QProgressBar.
https://doc.qt.io/qt-5/stylesheet-reference.html#list-of-properties
This can be accomplished using the tab button widget to show the tab text.
Have a label, with left aligned text:
QLabel * button = new QLabel("text");
button->setAlignment(Qt::AlignLeft);
Set the tab text to empty string if necessary:
ui->tabWidget->tabBar()->setTabText(index, "");
Set the label as the tab button widget:
ui->tabWidget->tabBar()->setTabButton(index, QTabBar::LeftSide, button);
You can still style the label, adding a QLabel entry in the tab widget stylesheet:
QLabel{ color: white; }
Only problem here: no way to style the label text depending on selection (i.e. making the selected tab text bold) using CSS. But still feasible catching the tab widget currentChanged signal:
void Form::on_tabWidget_currentChanged(int index)
{
for(int i=0; i<ui->tabWidget->tabBar()->count(); i++)
{
QWidget * button = ui->tabWidget->tabBar()->tabButton(i, QTabBar::LeftSide);
if(button != nullptr)
{
QFont font = button->font();
font.setBold(i == index);
button->setFont(font);
}
}
}
One workaround(not clean method) I found is add some extra space at the end of the title;
QString tabTitle = "Page 1 ";
Will move the text towards left.
I am building a webapp in .net using some of the AJAX features; in this case it is TabContainer.
Below is a screenshot of the area I want to play with.
The menu on the left is the tabs of TabContainer. The right side is tab's content. I would like to have the "Update PCR" button to be right underneath "Disciplines Affected". The problem is that the left and right side are a part of ONE block, which is TabContainer.
Are there any suggestions to how would I format the CSS of the Button to align right underneath TabContainer's menu? I could add the button as a part of the menu but, then I would have to set the control to AutoPostback, which defeats its purpose in this case in the first place... Any suggestions would be appreciated!
EDIT:
Here is the existing CSS
.ajax_tabController .ajax__tab_tab
{
background-color: #3c6f91;
padding: 5px;
border: 1px solid #ffffff;
color:#ffffff;
border-left: 3px solid #5AB0DB;
}
.ajax_tabController .ajax__tab_hover .ajax__tab_tab
{
background-color:#5AB0DB;
text-decoration:none;
}
.ajax_tabController .ajax__tab_active .ajax__tab_tab
{
background-color:#5AB0DB;
text-decoration: underline;
}
Also, there is CSS that overrides some settings to make TabContainer Vertical instead of Horizontal. I know, that there is a property .UseVerticalStripPlacement but it messes up with the height of the control and throws a JavaScript error.
.ajax__tab_header
{
float: left;
}
.ajax__tab_body
{
margin-left: 160px;
}
.ajax__tab_outer
{
display: block !important;
}
.ajax__tab_tab
{
width: 210px;
height: auto !important;
}
You need to position the top of the button relative to the bottom of the tab elements. This can be done with jquery. See How to position one element relative to another with jQuery?
It's going to be a bit hit and miss, but try something along the lines of:
.updatePcrButton {
position: absolute;
top: 100px; /* These will be whatever the measurement is to */
left: 5px; /* be directly under the last element */
z-index: 99; /* Arbitrary amount to put it above any other elements */
}
This is pretty messy to be honest - it relies on your not changing the position of the control thereafter.
Perhaps a better way would be to add an extra tab to the TabContainer and handle any Tab clicks yourself.
-- Edit -- May be more useful --
Nikita, I had completely forgotten about this as it was in an old Classic ASP app of mine, but you could try these two JS functions that are probably more useful to you:
function curTop(obj){
rv = 0;
while(obj) {
rv += obj.offsetTop;
obj = obj.offsetParent;
}
return rv;
}
function curLeft(obj){
rv = 0;
while(obj) {
rv += obj.offsetLeft;
obj = obj.offsetParent;
}
return rv;
}
They pull the position from the specified object. If you add the height of the button that you want to position under then you may find this improves the location for you and prevents any funny business with CSS.
Kind regards,
Westie.
I want to style my tabs in my Qt app as follows:
I used following style sheet:
QTabBar{background-color: #fff; border-top: 0px;}
QTabBar::tab {
border-image: url(:/New_UI/tab_inactive.png) 7 17 7 2;
margin-left: 2px;
border-right: 17px;
border-top: 5px;
border-bottom: 5px;
font: 400 9.2pt "Segoe UI";
color: #ccc;
padding: 0px 13px 0px 5px;
max-height: 26px;
}
QTabBar::tab:selected, QTabBar::tab:hover {
border-image: url(:/New_UI/tab_active.png) 6 17 6 2;
}
QTabBar::close-button {
image: url(:/New_UI/tab_close.png);
subcontrol-origin: padding;
subcontrol-position: right;
width: 13px;
height: 13px;
}
The result is as follows (close button position is not as I wanted):
What am I doing wrong & how could I get my desired result ?
EDIT : I know this post is old, but I hope it could help someone else.
After a couple of tests, I think there is one way to do this, but it does not use Qt style sheets :
Subclass your QTabWidget to have complete access to the protected features
Create your own QWidget or QPushButton as your close button
Manage the position of your button with the stylesheet property (margin-right for example)
Add your button to the tab tabBar()->setTabButton(index, QTabBar::RightSide, closeButton);
The code I used for the test :
MyTab::MyTab(QWidget *parent) : QTabWidget(parent)
{
/// Create your button
QPushButton *close = new QPushButton(this);
// Add a tab
addTab(new QWidget(), QIcon(), "Tab 1");
setStyleSheet("QTabBar::tab { width : 150px;}");
// Size and move your button
close->setStyleSheet("max-height: 14px; max-width: 15px; margin-right: 50px;");
// Add your button to the tab
tabBar()->setTabButton(0, QTabBar::RightSide, close);
}
Finally, in the MainWindow, I added my own TabWidget to a layout :
ui->layout->addWidget(new MyTab(this));
The result :
But now you will have to handle the close action manually by connecting the button and get the index for a removeTab(index) call.
I am doing the same thing as you do, here is my stylesheet:
QTabBar::close-button{
image:url(:tabclose.png);
margin-right:4px;
}
Do not use "width" and "height" property, those two doesn't work here, setting a "image:url()" on sub controls implicitly sets the width and height of the sub-control (unless the image in a SVG).
Use "margin-right" property to control the distance from the right edge of the tab;
Add a custom button is a good answer.but if you use margin to decide close-button's position,the close-button's mouse area will be abnormal,so I add a SpacerItem and button in a widget,finally add this widget to TabWidget.
void TabBarCloseable::tabInserted(int index)
{
QWidget *widget = new QWidget(this);
QHBoxLayout *layout = new QHBoxLayout(this);
widget->setLayout(layout);
QToolButton *closeBtn = new QToolButton(this);
layout->addWidget(closeBtn);
layout->insertSpacing(1, 15);
closeBtn->setStyleSheet("max-height: 16px; max-width: 16px;");
this->setTabButton(index, QTabBar::RightSide, widget);
QTabBar::tabInserted(index);
}
You have wrong padding
Top
QTabBar::tab {
min-width: 25ex;
padding: 10px 50px 10px 10px;
}
buttom
QTabBar::tab {
min-width: 25ex;
padding: 10px 0px 10px 10px;
}
This is a pure stylesheet solution, without creating the buttons manually:
QTabBar::close-button {
image: url(:/tab-close.png);
padding-left: -13px;
}
If you check the Qt source, the image painting code uses only the padding values, not the margin values.
I want to know how can I set a style sheet for a Phonon::SeekSlider as like as a QSlider in Qt. With QSliders we can assign so many attributes by easily calling something like this.
QSlider::handle:horizontal {
background:white;
border: 1px solid white;
width: 6px;
margin-top: -2px;
margin-bottom: -2px;
border-radius: 0px;
}
But how can I do this same with SeekSlider.I cannot set attributes by calling Phonon::SeekSlider or QSlider. Only I can do is set attributes by calling QWidget {} and it has no use on SeekSlider. I must be able to customize the handle,page etc...
Please anyone has ideas...Help me !!!
You can access Phonon::SeekSlider slider control like that:
Phonon--SeekSlider > QSlider {
}
Phonon--SeekSlider > QSlider::handle {
}
etc.