I want to change the style of the side menu but after trying several changes to onsen-css-components-blue-basic-theme.css I can not find the element that contains the edge shadow (see below image). I want to remove the shadow from the menu - which file is this handled by?
<ons-sliding-menu var="menu" id="menusliding" main-page="main.html" menu-page="menux.html" max-slide-distance="85%" type="reveal" side="left" ></ons-sliding-menu>
Generally it's a better idea not to touch generated files as if at some point you decide to change the theme or update the version the changes will be overriden. So instead of trying to change the framework css generally it's better if you just write your styles in a separate file (at least until you decide to push things to production).
And about the question: these things can be found by doing right click => inspect element. If you do that on the element you will be able to see where the styles come from. The way which you're wording your question it sounds like you tried to find it but were unable to. Probably if you looked a while longer you would've been able to find it.
After doing the method described above I was able to find that actually it's defined in element.style of the main content. Some libraries do these kind of things even though it's not very recommended, still it's the most secure way to ensure that the style will be applied.
To remove it you can just do.
.onsen-sliding-menu__main {
box-shadow:none !important;
}
Demo
The class may vary depending on the onsen version. It's not the most elegant solution, but ons-sliding-menu is a relatively old component. In Onsen 2 there is actually an ons-splitter element which combines the behaviours of ons-sliding-menu and ons-split-view. If you use that you will see that the shadow there has been removed.
Related
What approach to do intelligent drag drop like this in react? (canvas or non-canvas based approach?). That is to use React (with a library such as React DND) without using cavas, OR move to rendering/drawing this within React using HTML 5 "canvas" (with potentially a library such as "react-konva".
Requirements:
when dragging the item, the other items behind "move" to calculate
and show what the final re-arrangement will look like (if the drag is
allowable)
may be drop points for which move is not allowed so would highlight
this as well (e.g. if some other items in the timeline were "locked")
I have checked React DND, react-konva, and others. The issue they use the transform property and that prevents moving the placeholder separately from dragging the item.
So here is the custom implementation: https://codesandbox.io/s/drag-swap-qv6s0x
P.S
It is still unfinished (buggy), later I will fix and clean up the code. But for now, I would like to share it, to know is it what you wanted or if I missing something.
Have a look at this online documentation for MDBootstrap:
https://mdbootstrap.com/docs/standard/plugins/drag-and-drop/
Go to "Horizontal example" section, this might be what you are looking for.
Edit: Sadly this is a premium feature :(
I have a navigation bar in place that I have borrowed from the internet https://www.youtube.com/watch?v=YQ1EJJZBHyE
When a navigation button is clicked instead of navigating to a different page, I would instead like to have the gray area populated with its own View. I would also like each of these to have its own corresponding ViewModel as well.
I would prefer to roll this on my own, without another third-party library (Currently using the simple MVVMLight). However, if the solution is really involved a third-party library is fine - i'm not trying to reinvent the wheel.
I assume I would use something similar to a UserControl in WinForms, but i'm not sure how to handle the varying size when the left navpanel is expanded or retracted.
Here is a screen shot of the relevant code:
The answer with the most votes here very clearly illustrates a solution to what I was after, and fleshes out some of the details of the comments left here by the good gentleman assisting me.
I'm using AngularJS 1 with angular-material and ui-router.
Does anyone know what the best practice is for providing a UI for some "new foobar" type thing? In other words, let’s say I have a ui.route putting me at /app/#/foobars/ which shows a list of all the foobars. At the bottom right is a FAB with a big plus sign, which will bring up a new UI something to allow the user to specify how they want their foobar. What is the best practices for this "UI something" that comes up, using Angular?
Should I use an angular-material dialog? (That’s my first inclination, but it seems old-fashioned.)
Do I create a route to /app/#/new-foobar/ and just bring up another UI? (This seems heavy-handed; I don’t want to change the URI, plus I probably want to get back to where I came from after creating the foobar.)
I think that ui-router allows nested states; is this something I would use? But I don't want the new view/component to be embedded in the current view --- I would expect a card or something to somehow "overlay" whatever view is showing.
I wouldn't use nested states for this, as they are intended for things such a master/detail navigation.
The answer to your question is "it depends", as many situations in programming there're always some tradeoffs you must consider. Depending if you're targeting a desktop or a mobile app you'll have more or less space to put these options on the screen. If there're a lot of configuration options you should define a completly different state on wich you layout them and apply this configuration when you come back to the list. If there are not too much of them or you want to keep them visible at the same time as the list, you can go with a SideNav panel that can be locked open depending on the resolution. An alternative I've used sometimes is using a subheader to show some controls, as you can make it "stick" below the header or let it go if you scroll the list. As I told you before is a matter of choices and tradeoffs, and some sense of usability and simplicity towards the final user. There's no silver bullet nor best practice, just follow your intuition. Good luck!
You know, like in CCleaner app where main activity is on the left side of the app and the right side area is changeable fragment.
http://cache.filehippo.com/img/ex/3049__ccleaner1.png
How to do it? I imagine I could do it by putting all fragments in the same place and just change their visibility to show just 1 at the moment, but that would make the code a whole lot of mess.
I've done this in the past by using UserControls. It's worked nicely for things like choosing payment methods (cash, cc, cheque...).
There are a couple of options for changing the display, either have all the UserControls present on the form and hide or show them as required or have an empty placeholder panel and use a factory to construct the appropriate UserControl as needed. I've done both and it really depends on the complexity (and expected longevity and users) of the project as to which is appropriate.
Using a Model-View-Presenter pattern helped with managing all of this.
What you don't want to end up with is a massive switch statement that changes the visibility of dozens of manually positioned controls individually. I've seen it and that way lies madness.
As you know, the built-in themes all define styles for the standard controls such as the TreeView control. We're trying to create something that looks an awful lot like a TreeView but isn't actually one, nor is it a subclass of one. It just has parts that we want to look like one for consistency.
For instance, our control too has a selected item whose background we'd love to match to the appearance of the background for the selected item in a TreeView (or more accurately the TreeViewItem) for the current theme. (You can't simply use highlight color as the themes have nice gradient brushes and borders, not just a solid brush.) Same with our expand/collapse togglebuttons. We want them to look just like the ones used in a TreeView for the current theme. (i.e. Sometimes a triangle, sometimes a box with a '+' in it, etc.)
Now while we can simply rip open Expression and copy the styles ourselves (or at least the parts that we need), we'd have to do that for each and every theme that MS provides. Plus, that wouldn't handle newer themes. And in a purest standpoint, that's duplicate styling information which just sits wrong with me.
Also, if someone styles the actual TreeView(Item), we want to pick it up as well. Since the parts that we want to style are required parts of a TreeView, we feel pretty confident that they're in there somewhere style-wise.
Not even sure what I want to do is possible but if anyone knows, they're most likely here on SO!
Yet another question close to a month old without even a comment. Very odd for the SO community to not chime in at least once! Guess it's not possible.
Well, what we ended up doing was using 'Show Me The Template' (Google it) to get the templates for the part (we don't have Expression), then manually managing them ourselves instead of using the built-in styles. NOT at all what we wanted to do since we don't know of a way to get the nice gradients that are defined in the system already without duplicating them, but the end result does match perfectly so there's that. As such, this too is getting marked as the answer. I'll gladly change it if someone else actually gives me one that works (or is close enough! Just need something people! Feel like I'm posting in a vacuum here!