Qooxdoo focus partially hides button image - qooxdoo

I'm trying to make a ToggleButton as small as possible while still retaining the image; however, when the button has focus it moves the image to the right and partially hides it. How can I overcome this? I've tried padding and margins but neither seemed to work.
Here's an example:
http://preview.tinyurl.com/8y4arrl
Thanks for the help!

I could reproduce the issue when toggling the button twice (on - off), and then moving between hovered and not hovered. Please open a bug for this. It has to do with the decoration of the focussed and hovered states, but only shows when you set dimensions and padding as you did. Please add your Playground link and describe the procedure (on - off - hover - not hover). Thanks.

Related

Unable to add scrollbars to mxGraph; custom scrollbars mess up the positioning of shapes

I'm trying to add scrollbars to mxGraph. I initially followed the extendCanvas example. but that didn't quite work. after following it I couldn't add shapes to the canvas even after removing graph.panningHandler.ignoreCell = true;
I tried to workaround it myself by giving the graph and container a big height and setting a fixed width and height for the graphContainer div. I then added the graphContainer div inside another div with styles like overflow. I created a codesandbox. I figured that would be easy for most to follow, so please check it out.
Now what I have implemented seems to be working fine. But there is one issue when you add shapes to the canvas initially and drag them down. It works perfectly, but when you scroll down and try to add a shape, it would insert way down below the scroll position.
I have tried to follow the examples on the mxGraph documentation, but they didn't quite work. I have also looked at existing SO questions, but none of them seem to answer my question. What I'm expecting is that when I scroll down and try to add a shape, It should add it to the cursor position, not way down below.
Please see the codesandbox link for more clarity: https://codesandbox.io/s/gifted-dhawan-6lschs
P.S. This is my first post to Stackoverflow. Let me know if I messed something up.

D3 zoom and pan zooming independently on mouse and programmatically

Could some kind and clever D3 soul please put me out of my misery. I have the following example setup - https://codesandbox.io/s/compassionate-night-kpqc8t?file=/src/App.js. There are zoom buttons and the svg takes mouse events to initiate zoom. Problem is that the zoom triggered by the button is independent of that triggered by the button.
I believe this stackOverflow describes the problem and the solution - D3.zoom jumps when using mouse wheel after programmatically zoom - I just cannot figure out the implementation for the life of me in the context I have.
I got it to work. I'm not entirely sure what the difference is, but somewhere along the line I must've been targeting the wrong element...
At the bottom of this article - https://www.d3indepth.com/zoom-and-pan/ - is an example codepen. Following the codepen to the letter resolved my issue.
Thanks,
Simon

Vaadin ComboBox and vertical scrollbar

I have following problem. Whenever i click on ComboBox the vertical scroll goes to the top of the window. This only happens if the subwindow is too big to fit in browser window. I'm trying to find solution for this over last four days with no result. Please someone help! :)
If anyone can look here is the video which better describes my problem:
http://www.youtube.com/watch?v=x2gfY_D9H8Y
The solution is to set height of a window:
window.setHeight("someHeight")
and it will work.

Remove all extra space around a button with an image?

Alright, try as I might, I cannot for the life of me get rid of this tiny little border around my buttons.
Edit: I should mention, in case I didn't make it clear, these are buttons with an image on them, set to flat with the button sized to the image.
Images below:
Number one, I can't for the life of me get these borders to GO AWAY. I've checked everything I can think of. They're:
flat
border 0
no margins
no padding
manually sized to the size of the image (75px)
in a table layout where the columns are all:
manually sized to the width of the image (75px)
borderless
Nothing seems to really "work" to get rid of these. If I size the columns down to be 74px instead of 75px, most of them go away, but a few remain. I've triple and quadruple checked the images, and they don't have anything that I can pick up on that should be causing this... no transparency around the borders, definitely no border that looks like that.
Which leads me to the second problem:
Settings button when dialog is small...
Settings button when dialog is stretched out.
Settings button is also in the same table layout panel.
I've checked all the settings on the table layout panel as well.. I can't find any padding or margin or anything settings that suggest this should be happening.
Does anyone have any experience with this? What am I missing..?
Simple solution: using directly a PictureBox as if it was a button. You can change your image on mouse over or mouse click.
Have you tried a Toolbar/strip/whatever it's called these days? Probably not going to help as I believe it pads on your behalf, but worth a shot.
In the end you can toss the buttons in the trash and write your own control. A single control that manages N buttons will work well here.
I don't understand your second problem. What's the problem? It'll be fixed if you roll your own control anyhow.
While not a fix for the spacing issue, as a workaround you can make that gray gradient currently "behind" the "tabs" and control panel image into a BackgroundImage for the TableLayoutPanel using BackgroundImageLayout of Stretch. While not fixing the spacing issue, it would make it unnoticeable.
Writing a winforms control has its challenges (experience speaking here). I would agree that that is whats needed however. Depending on your project you may consider using XAML and WPF. It provides that fine detail you seem to be looking for in you application.
There are ways to host XAML controls in a winform app, but if you went this route it would be best to create a native WPF application. The reverse is also true (winform controls in a WPF app).
Did you check if the image has transparent pixels around the graphic pixels you want?
May be a simple crop solution.

Hit area of the button changed in silverlight after some functions

Hi I am working on one project on one page there are many controls like hyperlinkbutton, buttons, borders all these bounded by viewbox. when page loads all the buttons shows hand cursor but if i mouse over any other buttons this first buttons do not show any hand cursor or do not take any mouse event. But I abserved one strange thing here when i make full screen in browser buttons will show hand cursor when i disable the full screen view I abserved hit area of the button is above one 2cm from the respective buttons.
I browsed many sites I could not get the answer.
among them I pasted one link here so that you can understand well
http://forums.silverlight.net/t/44026.aspx
So can any one help me help me to resolve this? Please Help me.

Resources