CODEWITHSUNDEEP
pythoncsswebkitgtkpygtk
Kumar Varun
Kumar Varun

Reputation: 11

python gtk webkit with CSS, issue in Width

I am creating a desktop app using Python GTK and WebKit. Mostly based on this tutorial.

I was creating my view in HTML5 and using CSS.

Problem is when i'm using width:100% or repeat-x the width of my window is keeps getting increased upto infinity.

i tried to put max-width:100% in <body> but it din't help.

for now, i made it fix width which is working fine, but i want to make he window resizable and so all the content inside without making it looking ugly.

Any help or work-around for this?

UPDATE

I am using the same code as given in this tutorial

http://www.aclevername.com/articles/python-webgui/

In the HTML file i just added one Header and Footer. For footer i just created a div,

 <div id="footer" style="width:100%; 
 position:absolute; align:center; bottom:0px; padding-top:10px; 
height:50px; background:url(img/int-bg.png) left top;">
</div>

Which is making thids window to expand its width infinitely.

if i fix the width in CSS then it won't do the expansion. and work fine, for fixed size window.

 <div id="footer" style="width:800px;
 position:absolute; align:center; bottom:0px; padding-top:10px; 
height:50px; background:url(img/int-bg.png) left top;">
</div>

but i want to make it re-sizable. how to achieve that flexibility?

Upvotes: 1

Views: 1696

Answers (1)

David Baird
David Baird

Reputation: 772

This may help (I've included some context to help other readers see that this is an issue involving PyWebKitGtk wanting to resize its parent container),

import gtk
import webkit

window = gtk.Window()
browser = webkit.WebView()
box = gtk.VBox(homogeneous=False, spacing=0)
window.add(box)
# ...
box.pack_start(browser, expand=True, fill=True, padding=0)
browser.set_size_request(400, 600) # <-- constrain width and height of browser
window.show_all()

The problem occurs because: setting "width: 100%" would result in overflow scrolling. But in this Gtk example, it instead triggers a resize that makes the parent window grow larger. Because the parent just grew larger, "width: 100%" now represents slightly more space, which results in an unstable feedback cycle.

A better solution may be to adjust padding and margins, etc. so that they do not trigger a resize at all when requesting "width: 100%". For example, using the CSS reset here seems to do the trick: http://meyerweb.com/eric/tools/css/reset/

I am also the author of the article, and glad that it is still giving inspiration despite that the article is also getting dated.

Upvotes: 1

Related Questions