I am stuck on issue, in which , I clicked on second tab (chat) , it contains list of items and when i clicked on one of them it will show details of that item and upper left corner will show left arrow & title. then it will change tabs at bottom , I want to make all tab common for items info and on every tab clicked it should have back arrow & title.
The arrow should have common back link , suppose i click on back button i show list of items.
I tried my 1 week please let me help to sort out this this , below has mentioned the thing which i have done so far.
http://codepen.io/ssharma01/pen/xwdBye
Thanks
Shivam
Related
Am currently learning Selenium on my own . i am trying to automate the below demo website https://itera-qa.azurewebsites.net/home/automation.
There is a section of radio button to select gender. i was trying to find the number of elements under that particular section . Page has another section of radio button too
If u notice the label gender it is not directly associated to the parent above ]1
Please help me to find the xpath so that i can find the number of radio buttons in the particular section rather than that of the whole page . i spent lot of time in tweaking this
Well, to select the Female radio button you should click on the label element above it. The Xpath for that label element is
//label[.//input[#id='female']]
or
//input[#id='female']/..
(Both are correct).
Similarly, to select Male radio button you can use
//label[.//input[#id='male']]
or
//input[#id='male']/..
Try below xpath to count the radio button under Gender section.
//div[contains(#class,'body-content')]/div[3]//input[#type='radio']
Below code is in python, but you should be able to understand what I am doing
driver.implicitly_wait(10)
driver.get("https://itera-qa.azurewebsites.net/home/automation")
time.sleep(5)
radio = driver.find_elements_by_xpath("//div[contains(#class,'body-content')]/div[3]//input[#type='radio']")
print(len(radio))
Output:
3
Split the xpath to understand.
//div[contains(#class,'body-content')]- points the entire page,
//div[contains(#class,'body-content')]/div - gives all 6 parts of the form.
//div[contains(#class,'body-content')]/div[3]` points to the 3rd `div` where the required radio buttons exists and
//div[contains(#class,'body-content')]/div[3]//input[#type='radio']` points to `input` tags with `type` `radio` only. Replace `radio` with `checkbox` to point only on the checkboxes
Suppose you want radio buttons of `Years of experience in test automation` below is the xpath. Its the 5th `div` tag in the entire page.
//div[contains(#class,'body-content')]/div[5]//input[#type='radio']
I'm trying to do something like below:
Scenario 1: User will drag and drop List 1 from left side to right side.
Scenario 2: Again, User will drag list 2 to right side, when that dragging item hover on list 1, have to show drop zones to drop that list 2 item here.
Finally, List 1 and List 2 both will be placed like left and right side.
With React Dnd, Is this achievable? and I tried this it works only while dragging. https://stackblitz.com/edit/react-pctpdh
I'm able to show a drop area while dragging, it shows every time, but I need to show that drop area only hover on some item.
Below is the sample work, I have to achieve:
Need to show placeholder to drop an item while hover other items to drop. (Need to Create dynamic drop targets while mouse hover some item)
I need a help on this to achieve this feature.Any idea on this really commendable.
I saw the code snippet and i added some new code that replicates your desired behavior.
The idea is to create a separate component to handle drop actions, that can be reused when is needed. In this particular case, I choose to use the component inside your ListItem component to create two drop zones on both sides.
Here is the updated code: https://stackblitz.com/edit/react-pctpdh
I am looking to implement a Tabs component containing lots (7-9) Tab components for a desktop view. I do not want to use the scrollable tabs when it exceeds the viewport width on the Tabs, instead I want the extra Tab items to be in a More dropdown menu just like the example docs show below:
Questions:
What is the intended implementation to achieve this? I actually would like the exact same functionality they describe as well where when I click an item from the dropdown above (for example, books), that will swap positions with the Tab directly to the left of the More dropdown, as shown in this screenshot from the doc:
Specifically, is the More dropdown a Tab component, or a Dropdown Menu component?
When using, how does selecting a tab/option from the More Dropdown work by default? (ex: will the selected tab then get moved to the visible tab portion, just like the screenshots?). Or does this need to be done manually to achieve that result?
Lastly, are there links to any examples of this usage?
Late, but it may help someone.
I was able to achieve dropdown within tabs by using the popover component.
https://codesandbox.io/s/436906013w
It has three tabs - One, Two and Three. Clicking on Tab 'Three' will perform the normal tab change. Clicking on the dropdown arrow next to tab 'Three' will provide the additional options.
It is not an exact solution to the question but can be achieved with a similar approach.
I created logic with MUI List, u can customize it with MUI tabs.
I calculate the width al all items and check if we have enough space, if not I added more button with dropdown and added the rest inside. Be aware that now it does not recalculate if the width or length of items changed
https://codesandbox.io/s/muddy-paper-941ff?file=/src/App.js
I have an inherited React app that i need to fix but after a few days, im stuck and need help.
I have a filtering panel on the left side which contains a 5 categories and items within their categories below it, each item has a checkbox next to it and when you click it, it updates the results on the right side, this works fine.
However i have a task to update the numbers next to the links in the filter panel, based on what was clicked and would like to know if there is a way to create the filters links first and then only update the number next to the link upon click.
All the code resides in the render method, any help would be great.
I am making application for IPAD and I need to show split view there.
What is my requirement in this:
I will show a list in left panel (Data will not be for nested. I have only 1 level)
When I click on any item of list, it will load a another list in right panel.
In right panel , if I click on any item, it will show the detail page in the same view.
Can any one give me a working example for it?