Odd behavior with Semantic-UI and meteor - meteor

The is a meteorpad at http://meteorpad.com/pad/hiEWsbkrBjLvwgx5t/Semantic-UI%20Meteor which is using Meteor amd Semantic-UI. It pretty much works as expected except for the white bar at the top of the window that turns black when you click the "Open Sidebar" button and then stays black whether the sidebar is open or not. An inspect element on that "bar" points to the tag. Anyone have any idea what causes this or how to address it?
TIA!

OK... here is a fully working example of an off canvas mobile menu using Meteor with Semantic-UI. Pop out the browser Window and resize to the the changes. It could be tweaked with media queries, but to keep it simple, I just used Semantics defaults... http://meteorpad.com/pad/C3PWfMDoG3jPF2tC8/Semantic%20UI%20mobile%20nav%20sample

Related

2sxc shake edit buttons remain in sight

I installed 8.8. And shaking my phone like a maniac but the edit buttons remain in sight. Is that a known issue or should I be doing something different (like adjusting templates or something).
Kind regards
Tycho
If a button is visible or not is configured at various levels. So it can be that your buttons are set to always visible - in which case the shake has no effect.
But if you're just using normal buttons which only appear on float, and they already appear (on desktop and mobile) without float/shake, then it's probably something different.
Best to do some more testing to corner the issue.

qml: achieve a chrome-like menu

I would like to achieve with QML a menu with a single menu item, like chrome does it. It has this button with those three horizontal bars and when you click it you get a single menu. Recent versions of firefox also follow the same principle. It allows not to waste too much horizontal space in the GUI of the application, unline usual menus which take up the whole width of the window.
I did not manage to reproduce exactly this GUI with QML. From what I saw you can either use a QML ApplicationWindow, and then a MenuBar, but then it takes the whole width of the window... Or have a toggle button to trigger the menu, then use a standalone Menu and its popup() method, but then it pops-up directly under the cursor, not exactly under the button to open the menu, which doesn't look good. That's really more abusing the mechanism for a context menu.
I could make a fake menu which would be a custom widget in my window but then it could not expand beyond my application window. Such a behaviour is almost required because I'll put this button on the far right of the window, as chrome does it.
Is it possible to achieve exactly that behaviour in pure QML (no C++)?
What I did for now is the last option that I mentioned: fake menu in the window. It's drawing using the canvas which enables me to make it a little pointy arrow from the menu to the menu toggle button, as done also by firefox.
The minus as I said is that the menu cannot go out of the window, plus everything is very manual (mouseover effect for menu items...), so I'm still interested in other solutions.
EDIT: ok after some time I realized a big plus of my approach: I can put custom widgets, not only labels in the menu. So I think it's absolutely the right approach now.

When the window is restored down, the appearance of jstree becomes different

Good day! I am using jstree and it works just fine. However, when I restore down the window, its appearance becomes different. Here are the screenshots.
Original window size
After restoring down
Please help me make them not to change appearance. I have to place the tree on the left side of the page and they should retain their original form. The css (with the whole code) is available in jstree.com. Thank you very much!
It's looking like a problem depends on your computer.
Even so, maybe just maybe if you have any window animation when minimizing or maximizing your browser window, css media queries on your site or widget catches that window resize event and behave depends on that changes.

iPad SplitView Master View shows but with minor (and incorrect) variation

I'm practicing development of a simple iPad Split View app (Stanford's Hegarty online class). And everything works for the most part. However, the Master side ('left side), although working in landscape mode looks a little different than what I expect it to as a 'popover' in portrait mode. The 'popover' covers the left side of the screen including the toolbar button item that triggered it where normally it should not cover that button.
Unfortunately I can't post images so I'll try my best to describe in more detail. Normally the 'proper' popover will be hovering right below the bar item button that triggered it with a thick arrow-ish thingie (the 'anchor') pointing to the button and not covering that button. The popover can be dismissed by clicking on that button again (or elsewhere on the screen).
What's happening to me, however, is that when I click the bar item button to show the popover, the resulting popover 'covers' the button and essentially fills up the left portion of the screen (the detail view is under it and most of it is showing) with its designated width (so, again, it doesn't cover the entire detail view). The is no 'anchor' arrow pointing to the bar item button since it is obviously covering it instead. The popover is dismissed normally once I click anywhere else on the screen.
So why is my popover covering the button and not simply hovering under it with an 'anchor' pointing to it as it should?
I don't think it it makes much sense to post code at this point because I don't think it'll help and more importantly not sure what portion to post considering this might be a problem with how I wired it in the Builder. Any thoughts will be greatly appreciated!
Thanks!
Mo
I believe its a change that came in IOS5.1
If you want the same behaviour you probably need to set the master up as a popover segue, from a toolbar button or similar in the detail view, and set the split view delegate to not show the master in portrait.
I'm on the move now but if you want any more info let me know and I'll try and get back to you later.

Is there a way to make the native `browse` button on a file input larger cross browser?

As you may know, you can make your own file input control using the (hacky) approach of positioning the file input over your custom button and using opacity: 0 on the file input itself.
The image below shows the intended design with the file input absolutely positioned over the browse button.
As you can see, the faux browse button is much larger than the one the browser (Firefox 4) has drawn.
If I increase the width of the input, it seems to reach a limit where it won't increase anymore.
Here is a jsFiddle to play with, demonstrating the problem. The real browse button should be the same size as the faux one.
Is there a way to pull this off, or must I use Flash or make the button smaller?
font-size:70px;
http://jsfiddle.net/rH5SY/9/

Resources