I'm trying to update the Listbox in PySimpleGUI to resize based on length of list but the update(size=len(mylist) says that size is not an allowed argument. Any work around to this?
I've seen some people try to make the window/layout into a function but I'm not sure if that's the right approach.
Thanks in advance.
Basically, the height or the width of a Listbox element should not be revised after initialized, or the size of window will be also changed and maybe out of screen.
There's no option provided to change the height or the width of the Listbox element in PySimpleGUI, but you can do it by tkinter code, element.Widget.configure(height=height, width=width).
Example Code
import PySimpleGUI as sg
name_list = sorted(['James', 'Robert', 'John', 'Michael', 'David', 'William', 'Richard', 'Joseph', 'Thomas', 'Charles'])
layout = [
[sg.Input('', key='Name'), sg.Button('Add')],
[sg.Listbox(name_list, size=(20, len(name_list)), expand_x=True, key='Names')],
]
window = sg.Window('Title', layout, finalize=True)
window['Name'].bind('<Return>', ' Return')
while True:
event, values = window.read()
if event == sg.WINDOW_CLOSED:
break
elif event in ('Add', 'Name Return'):
name = values['Name']
if name and name not in name_list:
name_list = sorted(name_list+[name])
window['Names'].Widget.configure(height=len(name_list))
window['Names'].update(values=name_list)
window.move_to_center()
window.close()
Related
im new to dart and need to create a dynamic dom structure.
At the moment i use the dart_web_toolkit but im missing a position function for elements.
You can set the width and height but no position(top, left) for the element.
Am i missing something there, or can someone give me a solution for this?
Edit:
I have a Label with 2 Buttons in it and i can edit the Buttons size with "setPixelSize"
but i need something like "b1.setPosition" and i cant find this method to position my elements (in this example buttons).
At the moment they are just put after another in relation to the Label.
final el = querySelector('#body');
ui.Label rootLabel = new ui.Label();
rootLabel.addStyleName("root-style");
ui.RootPanel.get().addWidget(rootLabel, el);
final el1 = querySelector('.root-style');
ui.Button b1 = new ui.Button();
b1.text = "Button 1";
b1.addStyleName("b1");
b1.setPixelSize(30, 50);
ui.RootPanel.get().addWidget(b1, el1);
ui.Button b2 = new ui.Button();
b2.text = "Button 2";
b2.addStyleName("b2");
b1.setPixelSize(60,60);
ui.RootPanel.get().addWidget(b2, el1);
I just looked a bit thought the code of https://github.com/akserg/dart_web_toolkit/blob/afac7aac09e3bcd9d3e1f926815eb85040e46e07/lib/src/ui/button_base.dart
and it seems you should get the Element instance by calling b1.getElement() which should allow to access all elements properties like
b1.getElement().style
..position = 'absolute'
..top = '10px'
..left = '25px';
not tested though.
I'm new to kivy and need some assistance with the following problem. I adding numbers/operators as widgets (labels) dynamically and at a random position to a layout(FloatLayout). The idea is that when I clicked on a number/operator it will draw a circle around the number/operator. I get some very strange behaviour. Does not matter what number/operator I click the selection circle is only drawn around the last added label. Then to confuse me even more the other number/operator is circled if I press on some random point on the screen
following is the core of my code:
class SelectedObject(Label):
selected = BooleanProperty()
refresh = BooleanProperty()
def __init__(self, **kwargs):
super(SelectedObject, self).__init__(**kwargs)
self.center_x = randint(0, Window.width/2)
self.center_y = randint(0, Window.height/2)
self.bind( refresh = self.redraw )
def redraw(self, *args):
#print('Redraw for: ' + self)
self.canvas.after.clear()
if self.selected:
with self.canvas.after:
Line(circle=(self.center_x, self.center_y, 20))
self.canvas.ask_update()
def on_touch_down(self, touch):
print("touch#: " + str(touch))
if not self.collide_point(touch.x, touch.y):
return False
print("yip: " + self)
self.selected = not self.selected
self.refresh = not self.refresh # force a redraw
return True
class GameNumber(SelectedObject):
pass
class Operator(SelectedObject):
pass
class GameApp(App):
numberArr = ListProperty([])
operatorArr = ListProperty([])
def build(self):
f = FloatLayout()
#populate numberArr and operatorArr
self.buildLevel()
for number in self.numberArr:
numberItem = GameNumber(text = str(number))
f.add_widget(numberItem)
for operator in self.operatorArr:
f.add_widget(Operator(text = operator))
return f
The problem here is that you have not set sizes to the labels. So each label takes up as much space as it can and the last label being on top, it gets the circle.
You need to pass each GameNumber and Operator some sort of size_hint and/or size. For example, if you want each label to be 10 by 10, you can do something like this: numberItem = GameNumber(text=str(number), size_hint=(None, None), size=(10, 10)). You can set their size relative to the window size by for example setting size_hint=(0.1, 0.1).
Remember that size_hint is always (1, 1) by default, so you need to change it something else if you want your widgets to be smaller than the space of the container and set size_hint=(None, None) if you want to set a fixed size yourself.
If you want to position the labels randomly around the screen, take a look at pos_hint, which is more convenient than playing with the size of the window directly. Also, remember that there's a chance that multiple labels might get on top of each other or at the very borders of the window or even outside if you are not careful.
EDIT: To help you find the source of these kind of problems (that usually relate to layout issues), take a look at Kivy Widget Area Display
Can't find any manual about changing width of taglist element size.
Taglist element is wider than icons I had set. It looks really awful =(
Screenshot: http://s12.postimg.org/fkva7xywd/Screenshot_16_02_2014_16_04_07.png
Taglist element consist of icon, text and gap between them. This gap defined in awful.widget.common.list_update function in line
m = wibox.layout.margin(tb, 4, 4)
Despite you have no text, double gap is still here. To solve this problem you can copy list_update function to your rc file, fix it and send as fifth(!) argument in awful.widget.taglist.
just tell your imagebox not to be resizable, example:
wibox.widget.imagebox(beautiful.clock, false)
or you can even resize you wibox:
mywibox[s] = awful.wibox({ position = "top", screen = s, height = 32 })
you just need to modify height value
or another method using wibox.layout.constraint:
clock_icon = wibox.widget.imagebox(beautiful.clock, true)
local const = wibox.layout.constraint()
const:set_widget(clock_icon)
const:set_strategy("exact")
const:set_height(16)
then, instead of adding your icon to the layout, just add the constraint.
Scrolling a div that is within a .sortable() container will start dragging the div when you release the scrollbar
In the fiddle, there are 3 different sortables, 1 of them is a scrolling one
http://jsfiddle.net/wnHWH/1/
Bug: click on the scrollbar and drag it up or down to scroll through the content, when you release the mouse, the div starts to drag, which makes it follow your mouse around and there is no way to unstick it without refreshing the page.
You can use .mousemove event of jquery like this:
$('#sortable div').mousemove(function(e) {
width = $(this).width();
limit = width - 20;
if(e.offsetX < width && e.offsetX > limit)
$('#sortable').sortable("disable");
else
$('#sortable').sortable("enable");
});
I have create fiddle that works here http://jsfiddle.net/aanred/FNzEF/. Hope it meets your need.
sortable() can specify a selector for a handle much like draggable() does. Then only the matched elements get the click events. You specify the handle selector like this:
$('#sortable').sortable( {handle : '.handle'});
You already have most of what you need for the rest. The inner div on your overflowing element makes a suitable handle, like this:
<div style="height: 200px;overflow:auto">
<div class="handle" style="height: 300;">
blah
blah
blah
Then you need to restore the sortability of everything else. You'd think you could just give those divs the handle class, but it's looking for children, so you need to wrap all of them like so:
<div><div class="handle">asadf</div></div>
Modified fiddle
Supplement to SubRed's answer:
This worked perfectly for my needs. However, rather than rely on the width of the scrollbar being 20 pixels (as above), I used the code from:
How can I get the browser's scrollbar sizes?
This allows the code to handle different scrollbar widths on different setups. The code is pasted here for convenience:
function getScrollBarWidth ()
{
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild (inner);
document.body.appendChild (outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild (outer);
return (w1 - w2);
}
I've also used the width value for the height of the scrollbar and modified SubRed's code to suit. This now works with one or both scrollbars.
I also used code from:
Detecting presence of a scroll bar in a DIV using jQuery?
To determine the presence of either scroll bar and adapted the turning on/off of the sortable code accordingly.
Many thanks.
I have used the coin slider in my application.But the coin slider is restricted by the width.In my application ,I have split the document into two columns.The first column only contains coin slider.The second column contains the login panel.According to the width of the second column,the first column was adjust.I need to run my application in various screen size like 1280*768,800*600.is there any image slider in jquery without restrict width of image?Please help me. Thanks in advance.
jQuery(document).ready(function() {
id = '#coin-slider1'.replace(/:/g, "\\:");
var sliderWidth="";
jQuery(id).coinslider({width:sliderWidth,height:screen.height/4,delay:500});
})
Measure the width of the first column before using that value in the options array that you pass into the plugin...
jQuery(document).ready(function() {
id = '#coin-slider1'.replace(/:/g, "\\:");
var sliderWidth = $('#column1').width();
jQuery(id).coinslider({width:sliderWidth,height:screen.height/4,delay:500});
})
I have fix my problem with the help of calumbrodie.Thanks to calumbrodie.
I set the width of the tabPanel(parne to fo div of slider) as width of slider.
i got the width by the below code
document.getElementById('homeContentSubView:homeForm:tabPanel').offsetWidth
And my full code is,
jQuery(document).ready(function() {
id = '#coin-slider1'.replace(/:/g, "\\:");
var sliderWidth = ""; sliderWidth=document.getElementById('homeContentSubView:homeForm:tabPanel').offsetWidth-30; jQuery(id).coinslider({width:sliderWidth,height:screen.height/4,delay:750});
})
Thanks to all.