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.
Related
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()
Here on the right , I have a list of items in a composable , Every item is inside a row , All the items are inside a column
All the children of the are getting clipped to fit the screen which I don't want , I want these items to render completely even if outside of screen since I have a zoomable container above them
As you can see how text in the text field is all in one line vertically rather than expanding the width , This is the problem
Code :
Row(
modifier = modifier.zIndex(3f),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center,
) {
SimpleNodesList(
modifier = Modifier.padding(8.dp),
parentNode = state.center,
nodes = state.center.left,
renderRight = false,
)
SimpleNode(node = state.center, parentNode = null)
SimpleNodesList(
modifier = Modifier.padding(8.dp),
parentNode = state.center,
nodes = state.center.right,
renderLeft = false
)
}
Simple Nodes List is a column of rows , I have one column on left and one on the right , If the width of the left column increases , right row get's clipped by the screen
Using this modifier does the job for the row , In my case I also needed this layout modifier , wrapContentSize(unbounded = true) was working but children weren't clickable for some reason outside the bounds of the zoom container !
I also had to create a modifier zoomable rather than use a zoomable box , so the zoomable touch events would be dispatched on the this composable rather than the parent !
modifier = Modifier
.layout { measurable, constraints ->
val r =
measurable.measure(constraints = constraints.copy(maxWidth = Constraints.Infinity))
layout(r.measuredWidth, r.measuredHeight, placementBlock = {
r.placeWithLayer(0, 0, 0f) {
}
})
}
.wrapContentSize(unbounded = true)
If you are using hard-coded width for the text, applying Modifier.wrapContentSize() on every container might do the job
Use SimpleFlowRow in place of Row. It will fix the clipping issue.
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.
Before migrating to Awesome 3.5.1 I had two panels at the top of my screen (on top of each other, sort of) and none at the bottom. The code I used to achieve this pre-3.5.* is below:
-- Create the wibox
mywibox[s] = awful.wibox({ position = "top", height = "32", screen = s })
-- Add widgets to the wibox - order matters
mywibox[s].widgets = {
{
{
-- Upper left section
mylauncher,
mytaglist[s],
mypromptbox[s],
-- My custom widgets, separators etc...
layout = awful.widget.layout.horizontal.leftright
},
{
-- Upper right section
mylayoutbox[s],
mytextclock,
-- More widgets, separators, etc...
s == 1 and mysystray or nil,
layout = awful.widget.layout.horizontal.rightleft
},
},
{
-- Lower section (only the tasklist)
mytasklist[s],
},
layout = awful.widget.layout.vertical.flex,
height = mywibox[s].height
}
Now I'm having a hard time trying to figure out how to achieve the same with the 3.5 configuration. At the moment I use pretty basic one panel (with most of the widgets) on top, and one (with the tasklist) at the bottom. The code can be seen below:
-- Create the wibox
mywibox[s] = awful.wibox({ position = "top", height = "18", screen = s })
mywibox2[s] = awful.wibox({ position = "bottom", height = "18", screen = s })
-- Widgets that are aligned to the left
local left_layout = wibox.layout.fixed.horizontal()
left_layout:add(mylauncher)
left_layout:add(mytaglist[s])
left_layout:add(mypromptbox[s])
-- My custom widgets, separators, etc...
-- Widgets that are aligned to the right
local right_layout = wibox.layout.fixed.horizontal()
if s == 1 then right_layout:add(wibox.widget.systray()) end
-- My custom widgets, separators, etc...
right_layout:add(mytextclock)
right_layout:add(mylayoutbox[s])
-- Now bring it all together
local layout = wibox.layout.align.horizontal()
layout:set_left(left_layout)
layout:set_right(right_layout)
local layout2 = wibox.layout.align.horizontal()
layout2:set_middle(mytasklist[s])
mywibox[s]:set_widget(layout)
mywibox2[s]:set_widget(layout2)
If anyone has ideas how to edit my current rc.lua to make it work as the upper code did in Awesome 3.4.*, that'd be greatly appreciated.
You could try something like this, no idea if it does exactly what you want (32 is the height of your wibox according to your code):
local const = wibox.layout.constraint()
const:set_widget(layout)
const:set_strategy("exact")
const:set_height(32/2)
local l = wibox.layout.fixed.vertical()
l:add(const)
l:add(mytasklist[s])
mywibox[s]:set_widget(l)
First it creates a "constraint" layout which makes sure that the layout "layout" (the widgets that should be shown on the top) always get a size of 16px. Then it stacks this constraint layout ontop of the tasklist and displays the result in the wibox.
Some of this code could be shortened a bit in the latest version, but I am not sure if 3.5.1 has those convenience arguments already.
I've done similar with following code:
wiboxes["top"]=awful.wibox({position="top",height=26})
local top_layout = wibox.layout.fixed.horizontal()
sublayout["cpu"] = wibox.layout.fixed.horizontal()
for i=2,3 do
sublayout["cpu" .. i] = wibox.layout.fixed.horizontal()
sublayout["cpu" .. i]:add(graphs["cpu"]..i) -- the graphs table already initialized
sublayout["cpu" .. i]:add(textboxes["cpu"]..i) -- textboxes table already initialized
sublayout["cpu"]:add(sublayout["cpu"..i)
end
.....
top_layout:add(sublayout["cpu"])
.....
wiboxes["top"]:set_widget(top_layout)
With this code I've two graphs and textboxes to see the CPUs usage (every core), first is on top, second is down. It should work with taglist or any other widget.
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.