I have a simple extjs form, where all the fields look like plain text when rendered.
When user hovers over the field, i need to show a edit icon (which i am thinking would be a tooltip) next to the field (indicating that the field is editable). And when user clicks on it, the field will get focus and made editable.
Is tooltip the right component ? If not, how can i achieve this.
Thanks
A tooltip would be a bad approach - mostly because if the person mouses away from the field, the tooltip would vanish.
A simpler approach would be to include the edit icon at all times, inside the same container as the field. The edit icon should be invisible normally. Then, when the person moves the mouse into the container, make the icon visible. On mouse-exit from the container, make the icon invisible again.
Related
I have a list of items that appears inside a modal on my page. I want to be able to access extra options (i.e. delete, rename) on each element by swiping the list element to the left to reveal the options underneath.
I have created a working simple swiping animation using javascript and the css translate attribute, but the element goes off the edge of the modal when I swipe it, which I don't think looks good. I want it to stay inside the modal and go under the edge whenever it is swiped to the left.
Here is a diagram of what I want:
My first thought was to add a colored box just outside the edge of the modal, but that would obviously show a big square beside the modal. Perhaps there is a way to "chop off" part of an element somehow. How would I do this?
I can't really understand what you want, like I have no idea what those green boxes are for. But to my understanding, it seems like you just need so that the swiped element don't go outside the modal right? if so, you just need to add overflow: hidden to the modal/container class. That way, anything that goes off will be hidden. If you still want the modal to have a vertical scroll capabilities, then use overflow-x: hidden
I have a text area which is a separate child component of an edit form, where the user can input long text. Above it, in the parent form, I have a SAVE button that I want to disable until the user makes an actual change to the text. I have it triggered now that when a change is made, it calls the parent component which triggers the SAVE button to enable (shows its color). But my problem is that it also jumps to the top of the page when it does this. The cursor stays where the user is inputting the text, but the scrollbar jumps. I realize that the parent is rerendering because the button has changed, but I want the scroll to stay where it is, with the cursor visible. How can I achieve this?
I develop a mobile webpage and I use the swiper.js to achieve slide between 2 pages. But every page has some input textfield for users input their username and passwd. And I found the swiper become useless over input area, but it is normal in other area like button and so on. Now, I want to achieve that if I click on the input area, then I can input something I want, but if I want to slide the page, I can also slide anywhere I want.
I have a content-editable div. So it basically functions like a text editor. I have a toolbar of my own which has different buttons. Now when the user types some text in an iPad and then selects the text a small system generated menu pops up which has options like cut copy paste etc. Now this hides some of my toolbar button. So what i want to know is that is there any way that i can decide the position of this menu? I would not like to stop the menu from appearing but just reposition it. Please Help!!!!!!!!!
I am writing an interface where there will be a list of wide buttons, I want to be able to highlight a button based on a mouse being moved up or down.
Selecting the button below the current highlighted button when the mouse moves down and selects the button above when the mouse moves up.
I was about to write a load of CSS manipulating Jquery code to do this, but something about doing that does not feel right.
Any suggestions welcome (including thats the way to do it fool)
Use CSS to highlight your button
Example:
button{color: green}
button:hover{color: red}