It seems I can drag and drop DOM elements using browser.actions() sequence:
browser.
actions().
mouseMove(elem1).
mouseDown().
mouseMove(elem2).
mouseUp().
perform();
I would like to select some text within a paragraph, then drag and drop it into search-box. It could be entire text content of some DOM element if it makes things simpler, but not the DOM element itself (my search-box handle DOM elements in different way).
Any suggestions?
Related
I wasn't sure what to title this without explaining it all there. Essentially, I want to populate part of a screen with a bunch of buttons. The buttons should have text from an ArrayList (or other structure) and they should be aligned horizontally to each other from the left to the right of the screen. When there is no more room to the right, it starts a new row. I've attached an example. Example layout here
I know how to make custom list adapters for my objects and how to make listeners for parts within the list items, but I'm just not sure how to make the "list" of buttons go horizontally with wrapping to the next line.
It seems https://github.com/google/flexbox-layout might help you.
You can use FlexboxLayoutManager as adapter, or simply place all the buttons inside FlexboxLayout, they will wrap automatically depending on their width.
As web designer maybe you use daily the browser (Firefox / Chrome) Inspect Element tool more than browsing.
Sometimes to obtain the desired result is very complicated, the CSS changes & the new values added thru browser Inspect Element tool does not apply to only one element (div, p, span etc). After you accomplish the desired result do you have the option do highlight the values that was modified and new values added with a different color or in a separately menu / section?.
For example:
Display with yellow background modified values.
Display with red background new values added.
Question: Does any browser / add-on have at Inspect Element the option to display (highlight) only modified and new added values?
Of course, will be so gorgeous to have a separate menu / section to display separately all modified & new values inserted.
I can't believe it, but Inspect Element in Firefox has exactly what I've looking for:
1. Highlight modified and new added values
2. Copy modified rules
Now you can style at once multiple div's / span's / paragraphs, pseudo-elements etc till you'll accomplish your desired result. After that you can copy from one place all modified rules in different elements, at a 1 click!
If you use Inspect Element for CSS as a right little panel / sidebar (how I use) => see in picture the "blue arrow" (click that black arrow and menu "Changes" will appear).
I hope to help others this great feature of Firefox (well hidden), which will save you a lot of time!
I do not find this function in Chrome browser (or is better hidden than in Firefox).
I am using gridstack to render variable content onto a website. I need to render a table and some text inside the grid element, which works fine so far. BUT I want to allow the user to select portions of the rendered table text or other plain text with copy and paste but gridstack does not allow the selection it just drags the widget. Is there a way to make a handle bar visible and to allow only the dragging when the user selects the handlebar not the content ?
It should work to override the handle selector in the 'draggable' options, e.g:
GridStack.init({
draggable: {
handle: '.your-handle-class',
}
});
https://github.com/gridstack/gridstack.js/tree/develop/doc#updateel-gridstackelement-opts-gridstackwidget
Add
onMouseDown='event.stopPropagation();'
To any element you don't want to be able to drag with grid stack.
:)
I want to make some elements of my app able to be dragged and dropped by the user, so that the user can customize the position and design his own UI.
What I mean by drag and drop is that for example, when you hold and drag the icons or widgets on your phone, you can customize their position. So I want to make some text or images of my app function just like that.
Thanks for the help!
if I want to format a small snippet of text using the dropdowns (ie Heading 1, 2 paragraph), it often ends up changing the tag for a large snippet of text (or even half the page).
How do i change this behaviour?
When you select part of a tag in Dreamweaver and change the format, DW will change the format of the parent tag.
What you are describing requires a different technique as you are trying to get inline formatting. You need to select the text and then wrap it with a span tag (Danilo's advice is correct in that regard). You then apply the CSS style you want to the span tag to change the format.
So to style No longer want to receive these updates it would look like so:
<p>No longer <span style="font-size:18px;">want</span> to receive these updates?</p>
After DW gets through with it. In Design View after wrapping the text with span, select in the Tag Inspect and switch the Property Bar to CSS mode to style.
When used like this the property inspector will expand the selection to include the parent tag of the selected text, causing the selected option in the property inspector (p, h1, h2, etc) to replace the parent tag with the selected option. you cannot change this operation.
You can make a selection, hit CTRL+T (CMD+T I assume on Mac) which brings up the Wrap Tag editing option, type your tag, then hit enter and the selection will be wrapped with the tag of your choice.