In my Blazor application, I have implemented a card-flip on mouse click. Now I wanted to add the edit functionality, that is as the user clicks on Edit button they enters in edit mode and can edit the card contents directly from the UI. Any lead on how can I achieve it, would be helpful.
Here is the code BlazorFiddle
You could start by creating 2 templates for your front and back card layout, one template for Display and one template for Edit, then you could toggle visibility on those templates on an event and copy new values to replace the original ones when the event is fired to exit the Edit template or binding to an object/properties.
Check my take on your code using the binding option.
Also changed the flip event to a double click so you can click the inputs without flipping the card, it's still a little buggy for me, I can only click on the input in some areas of its end, other areas seems like the 'card back' div gets in the way, but I think it's a start so you could try out something on that line of thought and/or fixing those other issues.
https://blazorfiddle.com/s/dvz9ppon
Related
In my project I'm working on styling some overlays. Because of the nested component structure I'm running into some problems here. The intended solution is to move the overlay somewhere closer to the app root while preserving data bindings, making the css styling less restricted.
I've managed to set up a prototype using Renderer2.appendChild(...). When the overlay is shown, the ngOnInit of the overlay appends the overlay to another DOM element.
With my current code I can either get the input or output binding to work (but not both), based on moving an empty comment <!----> found directly in front of the overlay.
From my understanding (Empty comments in Angular application) Angular needs this comment, but Renderer2.appendChild does not account for it (maybe it's not meant to be used for components, only for 'raw' html?).
Demo:
Here's the prototype presenting both issues I am stuck on: https://stackblitz.com/edit/angular-pg24om
Visibility of the overlays (shown below the labels) can be toggled with a button. The submit buttons inside the overlay logs the input to the console using an #Output event emitter. Pressing change text changes an #Input property.
Without moving the overlay, input and output binding works like expected.
Incorrect input binding: If I choose to move the empty <!----> comment together with the overlay, my input binding seems to stop working. Pressing Change text does not change the random number I pass to the component. Output binding still works fine in this scenario.
Incorrect destruction: If I don't move the empty comment, Angular fails to clean up the component when the visibility is hidden using the Toggle visiblity button. That said, while the component is alive both input and output binding remains functional.
If anyone knows how to get this to work, I'd greatly appreciate some help. I did see other methods of creating overlays using factory resolvers and detaching views, but being able to move the component while preserve bindings in the HTML template will save us a lot of time otherwise spent on changing a lot of components.
Edit: I forgot to mention that the error Error: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. occurs when attempting to remove the overlay without the moved comment. Angular is attempting to delete a #comment element from the overlay, but it fails to do so because the comment is still in the div where the overlay template resides. That's the reason I tried to move the comment together with the overlay.
So I do not know exactly on how to word this so I tried my best in the title.
What I am trying to do is have a modal popup and as the user clicks a next button, it slides to the next screen. Here is an example of what I am trying to accomplish.
This is the home screen. When a user hits start a Ionic Modal pops up
This is the ionic modal. I am going to add a next button that allows a user to go to the next screen or go back to the previous screen before submitting.
SO, I do not want to use states because I do not want to have to create a state in app.js for each and every screen. Is there a way to add multiple views and switch between them using a Ionic Modal? Or will I have to use States or create multiple Modals?
TL;DR -> I want to slide between views when a next or back button is pressed. (Survey application)
NOT looking for code writing exactly, just trying to pick someones brain on how they would accomplish the sliding between views using a Modal
Thanks everyone!
You probably need on click on your button :
force close of your modal
use $state.location to change $state
This is what I'd try if I was in your situation ;)
Anyone with firefox browser can you open up this fiddle.
The issue I have is with this checkbox button I have, it requires multiple clicks to turn it off and my question is how can I stop this from happening? I know its the posistion:relative which is causing this but I need this so that every time I click on a button, it does not go to the top of the page. I just want the button to turn on and off in one click, not multiple clicks
(See comments below the question - now I know what happens to you)
Ahhh - you cannot solve this without Javascript: quick (double?) click on the TEXT ITSELF is interpreted as "select text" by the browser, and it does not send the event to the checkbox when that happens. With Javascript you can force "un-select" of the text on click.
Click "slowly" - avoiding double click text selection - and it will work (just to show the cause of the problem, no solution without Javascript or proprietary CSS).
Try adding this: Prevent text selection after double click
Maybe you should use a full Javascript Checkbox-Button solution instead of trying to accomplish it with just CSS.
I am trying to use monodevelop. Just at the beginning I came across an issue:
I was following a tutorial on building a Gtk application (http://monodevelop.com/Stetic_GUI_Designer). I was trying to drag a button from the Widgets Palette. Nothing happened. I'd been trying quite a few times without any luck.
After a break I launched monodevelop again and I simply placed a button on the window of the application. After that I removed it, dragged VBox container, and placed menu bar on the window, according to the tutorial instructions. I was pleasantly surprised.
By the second try the same problem occurred - I was not able to drag any widgets. Dragging was beginning, there was a “+” sign at the cursor and then - nothing was happening. I cannot figure out what happened by the first time, what the difference was. Have anyone had a similar problem? Monodevelop looks promising, but I can't go on with it. (I tried placing 'Fixed' container on the window, with no result - I could not drag it.)
(monodevelop v. 2.4, ubuntu 11.04, Polish language.
I did look for an answer to my problem, without much luck, that is why I post this question. The problem is described quite precisely. There is a probability that others encountered the same issue.)
You need to drag a container on the form first before you can add widgets to it. The VBox container is an example of a place where you can put your widgets.
If you want to place widgets where ever you want you can use the Fixed container. If you want things to align you can use the VBox, HBox or Table containers. Placing in a widget in one of the fields will automatically adjust the size of this field to fit the widget you have dragged into it.
So basically,
Create a form
Drag a container on the form
Drag a widget inside the container.
These widgets are not to be confused with the custom made widgets (in your Solution browser, right click the folder User Interfaces and click Add Widget...). These are like forms. I use these to create GUI's in advance so I can call these while the program is running.
FYI: if you want to create code for a widget (like a button) you can't just double click it like in Visual Studio. You need to select it, the go to the properties pane, and change the tab from Properties to Signals. You can then double click the "signal" to create the event for which you want to create code. For a button this is usually the Clicked event (somewhere at the bottom of the list, you'll need to open the Button Signals)
You can always visit the IRC channel of Monodevelop on irc://irc.gimp.org/monodevelop (IRC.Gimp.org #monodevelop)
I also sit in this channel and can help with smaller problems and I also still use Monodevelop 2.4.
I am creating a small form where the user
Enters some text in an input box
Chooses from a bunch of options
regarding the actions that need to
be taken with the data
Clicks a submit button
Disconnect does something similar in a better way:
you can click on any of the five divisions here. This is wonderful because it makes it easier for users to perform the same task and simplifies choose and click to click.
What technology is used to display such a menu?
A nice way of doing this is - which doesn't need javascript - is to use radio buttons, but make them invisible. The clickable text and icon go inside of the label for each radio button, so you can click the label or icon to select the radio button.
This ensures a few important things:
Only one item can be selected
The selection is passed back with the form
The browser's native form handling still works
Accessibility options still work
You do have to be careful to make the labels obviously clickable, since you lose the visual cue of having the radio buttons visible.
IE6 & 7 also require a hack - they have a weird behaviour that a display:none or visibility:hidden radio button or checkbox cannot be selected by clicking its label.
Here's an example: http://www.spookandpuff.com/examples/clickableToggles.html
(I haven't included the icons - you can easily add these by setting them as the background in CSS for each item (don't use <img> tags).
Edit Oh man - I just read the question properly! Sorry, you want the behaviour to be 'choose' rather than 'choose and submit'... An easy way to do this is to add some javascript to the inputs to have them auto-submit the forms when they're selected. I've updated the example to show this.
Looks like JavaScript: https://github.com/disconnectme/disconnect.me