pyqt: how to put a border frame around a widget

python pyqt qt-designer qframe
foosion picture foosion · Oct 30, 2011 · Viewed 11.6k times · Source

I'm making some changes to an existing PyQt project. The UI was created with Qt Designer.

The relevant part is a QWidget that displays text. I'm trying to put margins around the text. I'd think the simplest way to do this would be to put a border around the QWidget whose background color is the same as the QWidget's background (white).

The QWidget is on a QFrame. I'd like to put a white border inside the QFrame and around the edge of the QWidget. The closest I've come is to put short vertical and horizontal spacers around the QWidget, but that displays the underlying grey QFrame. I can't figure out how to make that white. I'd prefer leaving the frame grey and just add a white border around the QWidget.

Any pointers would be be appreciated.

EDIT:

The ui file: 

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>EbookViewer</class>
 <widget class="QMainWindow" name="EbookViewer">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>920</width>
    <height>774</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>E-book Viewer</string>
  </property>
  <property name="windowIcon">
   <iconset resource="../../../../resources/images.qrc">
    <normaloff>:/images/viewer.png</normaloff>:/images/viewer.png</iconset>
  </property>
  <widget class="QWidget" name="centralwidget">
   <layout class="QGridLayout" name="gridLayout_2">
    <item row="0" column="0">
     <widget class="QSplitter" name="splitter">
      <property name="orientation">
       <enum>Qt::Horizontal</enum>
      </property>
      <widget class="QTreeView" name="toc">
       <property name="focusPolicy">
        <enum>Qt::WheelFocus</enum>
       </property>
      </widget>
      <widget class="QFrame" name="frame">
       <property name="frameShape">
        <enum>QFrame::StyledPanel</enum>
       </property>
       <property name="frameShadow">
        <enum>QFrame::Raised</enum>
       </property>
       <layout class="QGridLayout" name="gridLayout">
        <item row="0" column="0" colspan="2">
         <widget class="QWidget" name="view_bg" native="true">
          <property name="sizePolicy">
           <sizepolicy hsizetype="Maximum" vsizetype="Maximum">
            <horstretch>0</horstretch>
            <verstretch>0</verstretch>
           </sizepolicy>
          </property>
          <property name="minimumSize">
           <size>
            <width>0</width>
            <height>0</height>
           </size>
          </property>
          <property name="styleSheet">
           <string notr="true">background:white</string>
          </property>
          <layout class="QGridLayout" name="gridLayout_3">
           <property name="leftMargin">
            <number>200</number>
           </property>
           <property name="topMargin">
            <number>30</number>
           </property>
           <property name="rightMargin">
            <number>200</number>
           </property>
           <property name="bottomMargin">
            <number>30</number>
           </property>
           <item row="0" column="0">
            <widget class="DocumentView" name="view" native="true">
             <property name="minimumSize">
              <size>
               <width>0</width>
               <height>0</height>
              </size>
             </property>
            </widget>
           </item>
          </layout>
         </widget>
        </item>
        <item row="0" column="2">
         <widget class="QScrollBar" name="vertical_scrollbar">
          <property name="orientation">
           <enum>Qt::Vertical</enum>
          </property>
         </widget>
        </item>
        <item row="1" column="1">
         <widget class="QScrollBar" name="horizontal_scrollbar">
          <property name="orientation">
           <enum>Qt::Horizontal</enum>
          </property>
         </widget>
        </item>
        <item row="2" column="1" colspan="2">
         <widget class="QFrame" name="dictionary_box">
          <property name="frameShape">
           <enum>QFrame::StyledPanel</enum>
          </property>
          <property name="frameShadow">
           <enum>QFrame::Raised</enum>
          </property>
          <layout class="QHBoxLayout" name="horizontalLayout">
           <item>
            <widget class="QWebView" name="dictionary_view">
             <property name="minimumSize">
              <size>
               <width>0</width>
               <height>150</height>
              </size>
             </property>
             <property name="url">
              <url>
               <string>about:blank</string>
              </url>
             </property>
            </widget>
           </item>
           <item>
            <widget class="QToolButton" name="close_dictionary_view">
             <property name="toolTip">
              <string>Close dictionary</string>
             </property>
             <property name="text">
              <string>...</string>
             </property>
             <property name="icon">
              <iconset resource="../../../../resources/images.qrc">
               <normaloff>:/images/window-close.png</normaloff>:/images/window-close.png</iconset>
             </property>
            </widget>
           </item>
          </layout>
         </widget>
        </item>
       </layout>
      </widget>
     </widget>
    </item>
   </layout>
  </widget>
  <widget class="QToolBar" name="tool_bar">
   <property name="sizePolicy">
    <sizepolicy hsizetype="Fixed" vsizetype="Preferred">
     <horstretch>0</horstretch>
     <verstretch>0</verstretch>
    </sizepolicy>
   </property>
   <property name="windowTitle">
    <string>toolBar</string>
   </property>
   <property name="movable">
    <bool>true</bool>
   </property>
   <property name="iconSize">
    <size>
     <width>32</width>
     <height>32</height>
    </size>
   </property>
   <property name="floatable">
    <bool>false</bool>
   </property>
   <attribute name="toolBarArea">
    <enum>LeftToolBarArea</enum>
   </attribute>
   <attribute name="toolBarBreak">
    <bool>false</bool>
   </attribute>
   <addaction name="action_back"/>
   <addaction name="action_forward"/>
   <addaction name="separator"/>
   <addaction name="action_open_ebook"/>
   <addaction name="action_copy"/>
   <addaction name="action_font_size_larger"/>
   <addaction name="action_font_size_smaller"/>
   <addaction name="action_table_of_contents"/>
   <addaction name="action_full_screen"/>
   <addaction name="separator"/>
   <addaction name="action_previous_page"/>
   <addaction name="action_next_page"/>
   <addaction name="separator"/>
   <addaction name="action_bookmark"/>
   <addaction name="action_reference_mode"/>
   <addaction name="separator"/>
   <addaction name="action_preferences"/>
   <addaction name="action_metadata"/>
   <addaction name="separator"/>
   <addaction name="action_print"/>
  </widget>
  <widget class="QToolBar" name="tool_bar2">
   <attribute name="toolBarArea">
    <enum>TopToolBarArea</enum>
   </attribute>
   <attribute name="toolBarBreak">
    <bool>false</bool>
   </attribute>
   <addaction name="action_find_next"/>
   <addaction name="action_find_previous"/>
  </widget>
  <action name="action_back">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/back.png</normaloff>:/images/back.png</iconset>
   </property>
   <property name="text">
    <string>Back</string>
   </property>
  </action>
  <action name="action_forward">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/forward.png</normaloff>:/images/forward.png</iconset>
   </property>
   <property name="text">
    <string>Forward</string>
   </property>
  </action>
  <action name="action_next_page">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/next.png</normaloff>:/images/next.png</iconset>
   </property>
   <property name="text">
    <string>Next page</string>
   </property>
  </action>
  <action name="action_previous_page">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/previous.png</normaloff>:/images/previous.png</iconset>
   </property>
   <property name="text">
    <string>Previous page</string>
   </property>
  </action>
  <action name="action_font_size_larger">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/font_size_larger.png</normaloff>:/images/font_size_larger.png</iconset>
   </property>
   <property name="text">
    <string>Font size larger</string>
   </property>
  </action>
  <action name="action_font_size_smaller">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/font_size_smaller.png</normaloff>:/images/font_size_smaller.png</iconset>
   </property>
   <property name="text">
    <string>Font size smaller</string>
   </property>
  </action>
  <action name="action_table_of_contents">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/chapters.png</normaloff>:/images/chapters.png</iconset>
   </property>
   <property name="text">
    <string>Table of Contents</string>
   </property>
  </action>
  <action name="action_metadata">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/dialog_information.png</normaloff>:/images/dialog_information.png</iconset>
   </property>
   <property name="text">
    <string>Metadata</string>
   </property>
  </action>
  <action name="action_open_ebook">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/document_open.png</normaloff>:/images/document_open.png</iconset>
   </property>
   <property name="text">
    <string>Open ebook</string>
   </property>
  </action>
  <action name="action_find_next">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/arrow-down.png</normaloff>:/images/arrow-down.png</iconset>
   </property>
   <property name="text">
    <string>Find next</string>
   </property>
   <property name="toolTip">
    <string>Find next occurrence</string>
   </property>
   <property name="shortcut">
    <string>F3</string>
   </property>
  </action>
  <action name="action_copy">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/edit-copy.png</normaloff>:/images/edit-copy.png</iconset>
   </property>
   <property name="text">
    <string>Copy to clipboard</string>
   </property>
  </action>
  <action name="action_preferences">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/config.png</normaloff>:/images/config.png</iconset>
   </property>
   <property name="text">
    <string>Preferences</string>
   </property>
  </action>
  <action name="action_reference_mode">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/lookfeel.png</normaloff>:/images/lookfeel.png</iconset>
   </property>
   <property name="text">
    <string>Reference Mode</string>
   </property>
  </action>
  <action name="action_bookmark">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/bookmarks.png</normaloff>:/images/bookmarks.png</iconset>
   </property>
   <property name="text">
    <string>Bookmark</string>
   </property>
  </action>
  <action name="action_full_screen">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/page.png</normaloff>:/images/page.png</iconset>
   </property>
   <property name="text">
    <string>Toggle full screen</string>
   </property>
  </action>
  <action name="action_print">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/print.png</normaloff>:/images/print.png</iconset>
   </property>
   <property name="text">
    <string>Print</string>
   </property>
  </action>
  <action name="action_find_previous">
   <property name="icon">
    <iconset resource="../../../../resources/images.qrc">
     <normaloff>:/images/arrow-up.png</normaloff>:/images/arrow-up.png</iconset>
   </property>
   <property name="text">
    <string>Find previous</string>
   </property>
   <property name="toolTip">
    <string>Find previous occurrence</string>
   </property>
   <property name="shortcut">
    <string>Shift+F3</string>
   </property>
  </action>
 </widget>
 <customwidgets>
  <customwidget>
   <class>QWebView</class>
   <extends>QWidget</extends>
   <header>QtWebKit/QWebView</header>
  </customwidget>
  <customwidget>
   <class>DocumentView</class>
   <extends>QWidget</extends>
   <header>calibre/gui2/viewer/documentview.h</header>
   <container>1</container>
  </customwidget>
 </customwidgets>
 <resources>
  <include location="../../../../resources/images.qrc"/>
 </resources>
 <connections/>
</ui>

Answer

ekhumoro picture ekhumoro · Oct 30, 2011

Put your QWidget inside another QWidget with its background set to the same colour.

You can then use the layout of the parent QWidget to adjust the width of the margin on each side (this can all be done within Qt Designer).

EDIT

Here are the steps to take in Qt Designer to achieve this:

  1. Select the frame widget containing the text widget and break its layout.
  2. Add a new QWidget to the frame widget (you could name it "borderWidget").
  3. Set the background colour of the border widget using the styleSheet property in the Property Editor: e.g. background-color: white. (nb: it might help if you temporarily set this to a contrasting colour so you can more easily see what's going on).
  4. Drag and drop the text widget onto the border widget.
  5. Select the border widget and set it's layout (e.g. "Lay Out in a Grid").
  6. Select the frame widget and set it's layout (e.g. "Lay Out in a Grid").
  7. Select the border widget. Go to the Layout section in the Property Editor. There you will see properties like layoutTopMargin, layoutLeftMargin, etc which can be used to adjust the size of the border.

Related questions

Linking a qtDesigner .ui file to python/pyqt?

So if I go into QtDesigner and build a UI, it'll be saved as a .ui file. How can I make this as a python file or use this in python?

Read More
How to convert a .ui file to .py file

This .ui file is made by Qt Designer. It's just a simple UI. All the commands or codes for doing this on the websites I have looked through are not for windows.

Read More
Best way to display logs in pyqt?

I am currently working on a GUI using qt designer. I am wondering how I should go about printing strings on the GUI that acts like a logger window. I am using pyqt5.

Read More