Hi,
I met with a problem when i usde Qt Stylesheet's border-image property. I got my pushButton's text truncated.
pushBtn->setText("Entrexe regVunsorg"); // For testing
pushBtn->setStyleSheet(
"color : #f5f5f5;"
" border-image: url(:/resouces/images/border/border-image.png);"
" margin-top:0px;"
" margin-left:0px;"
" margin-bottom:1px;"
" margin-right:1px;"
" border-left-width: 22px;"
" border-right-width: 22px;"
);
pushBtn->setGeometry(430, 100, 180, 44);
QPushButton *pushBtn = new QPushButton(&w);
pushBtn->setText("Entrexe regVunsorg"); // For testing
pushBtn->setStyleSheet(
"color : #f5f5f5;"
" border-image: url(:/resouces/images/border/border-image.png);"
" margin-top:0px;"
" margin-left:0px;"
" margin-bottom:1px;"
" margin-right:1px;"
" border-left-width: 22px;"
" border-right-width: 22px;"
);
pushBtn->setGeometry(430, 100, 180, 44);
To copy to clipboard, switch view to plain text mode
The result of the button is:
result.png
The border-image is like this:
border-image.png
When I tried in chrome by using CSS:
.button1 {
/* button setting environment */
background: #ffffff;
font-size: 16px;
font-family: ArialUnicode;
white-space: nowrap;
display: flex;
justify-content: center;
text-align: center;
/* example the sample as Qt style sheet */
height: 44px;
width: 180px;
color: #f5f5f5;
border-image: url(D:\\workdir\\test\\border-image.png) 0 22 0 22 stretch stretch;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 1px;
margin-right: 1px;
border-left-width: 22px;
border-right-width: 22px;
}
.button2 {
/* button setting environment */
background: #ffffff;
font-size: 16px;
font-family: ArialUnicode;
white-space: nowrap;
display: flex;
justify-content: center;
text-align: center;
height: 44px;
width: 180px;
color: #f5f5f5;
border-image: url(D:\\workdir\\test\\border-image.png) 0 22 0 22 stretch stretch;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 1px;
margin-right: 1px;
/* border-left-width: 22px; */
/* border-right-width: 22px; */
border-image-slice: 22;
border-image-width: 22px;
}
.button1 {
/* button setting environment */
background: #ffffff;
font-size: 16px;
font-family: ArialUnicode;
white-space: nowrap;
display: flex;
justify-content: center;
text-align: center;
/* example the sample as Qt style sheet */
height: 44px;
width: 180px;
color: #f5f5f5;
border-image: url(D:\\workdir\\test\\border-image.png) 0 22 0 22 stretch stretch;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 1px;
margin-right: 1px;
border-left-width: 22px;
border-right-width: 22px;
}
.button2 {
/* button setting environment */
background: #ffffff;
font-size: 16px;
font-family: ArialUnicode;
white-space: nowrap;
display: flex;
justify-content: center;
text-align: center;
height: 44px;
width: 180px;
color: #f5f5f5;
border-image: url(D:\\workdir\\test\\border-image.png) 0 22 0 22 stretch stretch;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 1px;
margin-right: 1px;
/* border-left-width: 22px; */
/* border-right-width: 22px; */
border-image-slice: 22;
border-image-width: 22px;
}
To copy to clipboard, switch view to plain text mode
Html Code:
<body>
<div class="demo">
<p>Qt Sample</p>
<button class="button1" >Entrexe regVunsorg</button>
<p>Modidied Sample in Chrome</p>
<button class="button2">Entrexe regVunsorg</button>
<button class="button3">Entrexe regVunsorg</button>
</body>
<body>
<div class="demo">
<p>Qt Sample</p>
<button class="button1" >Entrexe regVunsorg</button>
<p>Modidied Sample in Chrome</p>
<button class="button2">Entrexe regVunsorg</button>
<button class="button3">Entrexe regVunsorg</button>
</body>
To copy to clipboard, switch view to plain text mode
The results are as follows:
result.png
I wonder whether Qt Stylesheet can achieve the result like the 3rd picture, the second button.
If it works, could someone here tell me how to achieve this?
Many thanks,
Eason
Bookmarks