Results 1 to 1 of 1

Thread: QPushButton text truncated by using StyleSheet border-image

  1. #1
    Join Date
    Feb 2020
    Posts
    1
    Qt products
    Qt5
    Platforms
    Unix/X11

    Default QPushButton text truncated by using StyleSheet border-image

    Hi,

    I met with a problem when i usde Qt Stylesheet's border-image property. I got my pushButton's text truncated.

    Qt Code:
    1. QPushButton *pushBtn = new QPushButton(&w);
    2. pushBtn->setText("Entrexe regVunsorg"); // For testing
    3. pushBtn->setStyleSheet(
    4. "color : #f5f5f5;"
    5. " border-image: url(:/resouces/images/border/border-image.png);"
    6. " margin-top:0px;"
    7. " margin-left:0px;"
    8. " margin-bottom:1px;"
    9. " margin-right:1px;"
    10. " border-left-width: 22px;"
    11. " border-right-width: 22px;"
    12. );
    13. 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:
    Qt Code:
    1. .button1 {
    2. /* button setting environment */
    3. background: #ffffff;
    4. font-size: 16px;
    5. font-family: ArialUnicode;
    6. white-space: nowrap;
    7. display: flex;
    8. justify-content: center;
    9. text-align: center;
    10. /* example the sample as Qt style sheet */
    11. height: 44px;
    12. width: 180px;
    13. color: #f5f5f5;
    14. border-image: url(D:\\workdir\\test\\border-image.png) 0 22 0 22 stretch stretch;
    15. margin-top: 0px;
    16. margin-left: 0px;
    17. margin-bottom: 1px;
    18. margin-right: 1px;
    19. border-left-width: 22px;
    20. border-right-width: 22px;
    21.  
    22. }
    23.  
    24. .button2 {
    25. /* button setting environment */
    26. background: #ffffff;
    27. font-size: 16px;
    28. font-family: ArialUnicode;
    29. white-space: nowrap;
    30. display: flex;
    31. justify-content: center;
    32. text-align: center;
    33.  
    34. height: 44px;
    35. width: 180px;
    36. color: #f5f5f5;
    37. border-image: url(D:\\workdir\\test\\border-image.png) 0 22 0 22 stretch stretch;
    38. margin-top: 0px;
    39. margin-left: 0px;
    40. margin-bottom: 1px;
    41. margin-right: 1px;
    42. /* border-left-width: 22px; */
    43. /* border-right-width: 22px; */
    44. border-image-slice: 22;
    45. border-image-width: 22px;
    46. }
    To copy to clipboard, switch view to plain text mode 

    Html Code:
    Qt Code:
    1. <body>
    2. <div class="demo">
    3. <p>Qt Sample</p>
    4. <button class="button1" >Entrexe regVunsorg</button>
    5. <p>Modidied Sample in Chrome</p>
    6. <button class="button2">Entrexe regVunsorg</button>
    7.  
    8. <button class="button3">Entrexe regVunsorg</button>
    9. </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
    Last edited by Eason Peng; 10th February 2020 at 09:20.

Similar Threads

  1. Replies: 0
    Last Post: 2nd April 2013, 11:48
  2. Replies: 1
    Last Post: 29th December 2012, 10:07
  3. Replies: 3
    Last Post: 23rd December 2009, 17:18
  4. Replies: 1
    Last Post: 8th October 2007, 00:02
  5. Replies: 3
    Last Post: 28th January 2007, 18:24

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.