I have some datatables (as in datatables.net) running in PHP within a Laravel 9 framework. Everything works fine but the select length drop down is too small and results in the down arrow impinging on the number as below:
I have tried to find the css class which appears to be:
div.dataTables_wrapper div.dataTables_length select {
width: auto;
display: inline-block;
}
but changing this seems to have no effect - min-width etc. And I did clear all caches!
The rest of it is perfect.
Thanks!
I am using Adam Lynch's flexible data tables with CSS grid code. It is a really neat project. https://adamlynch.com/flexible-data-tables-with-css-grid. I have a couple questions on the project.
I notice that when I scroll to the right hand side of the column with the horizontal scroll bar, I can no longer resize any of the columns. I have been trying to figure out how to fix this for a while now to no avail.
I notice that if I resize one column, I can resize a different column immediately afterward with no problems. However, if I attempt to resize the same column twice consecutively, I cannot drag the separator the second time. This problem does not exist in Firefox, but does exist in Google Chrome.
Okay. Found the answers.
Answer to question # 1... Need to explicitly change the overflow property of the table element from the default value 'visible' to 'auto' or 'scroll'.
overflow: scroll;
display: grid;
border-collapse: collapse;
min-width: 100%;
/* These are just initial values which are overriden using JavaScript when a column is resized */
grid-template-columns:
minmax(150px, 1fr)
minmax(150px, 1.67fr)
minmax(150px, 1.67fr)
minmax(150px, 1.67fr)
minmax(150px, 3.33fr)
minmax(150px, 1.67fr)
minmax(150px, 3.33fr)
minmax(150px, 1.67fr);
}
Answer to question # 2...Need to prevent the default behavior of the browser on a mousedown event. I ported this code to Vuejs. In Vuejs, the syntax is #mousedown.prevent="resizeInit"
Can anyone tell me how I can identify and switch to the iframe which has only a title?
<iframe frameborder="0" style="border: 0px none; width: 100%; height: 356px; min-width: 0px; min-height: 0px; overflow: auto;" dojoattachpoint="frame" title="Fill Quote" src="https://tssstrpms501.corp.trelleborg.com:12001/teamworks/process.lsw?zWorkflowState=1&zTaskId=4581&zResetContext=true&coachDebugTrace=none">
I have tried by below code but it is not working
driver.switchTo().frame(driver.findElement(By.tagName("iframe")));
driver.switchTo().frame() has multiple overloads.
driver.switchTo().frame(name_or_id)
Here your iframe doesn't have id or name, so not for you.
driver.switchTo().frame(index)
This is the last option to choose, because using index is not stable enough as you could imagine. If this is your only iframe in the page, try driver.switchTo().frame(0)
driver.switchTo().frame(iframe_element)
The most common one. You locate your iframe like other elements, then pass it into the method.
Here locating it by title attributes seems to be the best.
driver.switchTo().frame(driver.findElement(By.cssSelector("iframe[title='Fill Quote']")));
// driver.switchTo().frame(driver.findElement(By.xpath(".//iframe[#title='Fill Quote']")));
you can use cssSelector,
driver.switchTo().frame(driver.findElement(By.cssSelector("iframe[title='Fill Quote']")));
You also can use src to switch to frame, here is what you can use:
driver.switchTo().frame(driver.findElement(By.xpath(".//iframe[#src='https://tssstrpms501.corp.trelleborg.com:12001/teamworks/process.lsw?zWorkflowState=1&zTaskId=4581&zResetContext=true&coachDebugTrace=none']")));
Make sure you switch to default content before switching to frame:
driver.switchTo().defaultContent();
driver.switchTo().frame(x);
x can be the frame number or you can do a driver.findlement and use any of the options you have available eg: driver.findElementByName("Name").
1) goto html view
2) type iframe and find your required frame and count the value and switch to it using
oASelFW.driver.switchTo().frame(2);
if it is first frame then use oASelFW.driver.switchTo().frame(0);
if it is second frame then use oASelFW.driver.switchTo().frame(1); respectively
You can use Css Selector or Xpath:
Approach 1 : CSS Selector
driver.switchTo().frame(driver.findElement(By.cssSelector("iframe[title='Fill Quote']")));
Approach 2 : Xpath
driver.switchTo().frame(driver.findElement(By.xpath("//iframe[#title='Fill Quote']")));
https://seleniumatfingertips.wordpress.com/2016/07/05/handling-frames-in-selenium-webdriver-with-java/
Easiest way of doing this is like this. If its a frame you can right click on the field and if you see the choice of "open frame in a tab" do it.
Then take the URL of the frame and that is what you put in your Python script using "driver.get (http://blah blah..)
Then Selenium can find your named element. This saved me hours of trying all the suggestions here which was learning about but didn't work. Problem with mine was it was in a frame.
I'm using Linux which gives me the right-click option of opening the frame, on its own, in another tab. I don't use Windows so don't know if you would get that option in you right-click menu.
Ganzarola
I struggled with this for a while; a particularly frustrating website had several nested frames throughout the site. I couldn't find any way to identify the frames- no name, id, xpath, css selector- nothing.
Eventually I realised that frames are numbered with the top level being frame(0) the second frame(1) etc.
As I still didn't know which frame the element I needed was sitting in, I wrote a for loop to start from 0 and cycle to 50 continually moving to the next frame and attempting to access my required element; if it failed I got it to print a message and continue.
Spent too much time on this problem for such a simple solution -_-
driver.switch_to.default_content()
for x in range(50):
try:
driver.switch_to.frame(x)
driver.find_element_by_xpath("//*[#id='23']").click()
driver.find_element_by_xpath("/html/body/form/table/tbody/tr[1]/td/ul/li[49]/a").click()
except:
print("It's not: ", x)
continue
There are three ways to switch to the frame
1)Can use id
2)Can use name of the frame
3)Can use WebElement of the frame
2->driver.switchTo().frame("name of the frame");
I think I can add something here.
Situation I faced
I cannot or not easily use the debug tools or inspection tools like firebug to see which frame I am currently at and want to go to.
The XPATH/CSS selector etc. that the inspection tool told me doesn't work since the current frame is not the target one. e.g. I need to first switch to a sub-frame to be able to access/locate the element from XPATH or any other reference.
In short, the find_element() or find_elements() method doesn't apply in my case.
Wait Wait! not exactly
unless we use some fazzy search method.
use find_elements() with contains(#id,"frame") to filter out the potential frames.
e.g.
driver.find_elements(By.XPATH,'//*[contains(#id,"frame")]')
Then use switchTo() to switch to that frame and hopefully the underlying XPATH for your target element can be accessed this time.
If you're similar unlucky like me, iteration might need to be done for the found frames and even iterate deeper in more layers.
e.g.
This is the piece I use.
try:
elf1 = mydriver.find_elements(By.XPATH,'//*[contains(#id,"rame")]')
mydriver.switch_to_frame(elf1[1])
elf2 = mydriver.find_elements(By.XPATH,'//*[contains(#id,"rame")]')
mydriver.switch_to_frame(elf2[2])
len(mydriver.page_source) ## size of source tell whether I am in the right frame
I try out different switch_to_frame(elf1[x])/switch_to_frame(elf2[x]) combinations and finally found the wanted element by the XPATH I found from the inspection tool in browser.
try:
element = WebDriverWait(mydriver, 10).until(
EC.presence_of_element_located((By.XPATH, '//*[#id="C4_W16_V17_ZSRV-HOME"]'))
)
#Click the link
element.click()
I could solve that with the following code
browser.switch_to.frame(browser.find_element_by_tag_name('iframe'))
I've written a fiddle (http://jsfiddle.net/929Zb/5/) for this that reduces the problem to the minimal markup that demonstrates the problem... which is my Highchart isn't being rendered in Safari (version 5.1.7 on Windows but I've also run it in the latest version on a MacBook.)
My requirement is a multiple column layout of widget as shown in this screenshot from the fiddle running in chrome :
and here's the same thing running in Safari :
Safari has rendered SVG and hovering over it in debug highlights the elements in blue in the HTML but it just can't be seen!!
The css I'm using to display the column is shown below. If you change the column count from 2 to 1 the chart displays fine in Safari!!
.widget-container
{
-webkit-column-count: 2;
-webkit-column-gap: 2em;
-moz-column-count: 2;
-moz-column-gap: 2em;
column-count: 2;
column-gap: 2em;
}
.widget {
/* This is required to keep the widget div's together and not break them over columns */
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
margin-bottom: 2em;
}
Is there a change to the CSS that will make Safari work or will this require a javascript fix? I pondered whether this was something to do with CSS transitions so tried turning off animations but given it's still animating I've clearly got the syntax wrong. I have a time constraint on this problem so I'm posting now but will report back if I have any progress.
I think this is some CSS problem with displaying chart in any column different than first one. If you disable colum-break-inside it also works.
What can I suggest is to disable position for chart container: http://jsfiddle.net/929Zb/17/
.highcharts-container {
position: inherit !important;
}
I am using nivo slider( default theme) and I positioned the prev and next arrows next to the image(not on top of the image) and I was wondering if there is a way to always show the next and prev arrows(right now the arrows only show when you hover over the image). Seems there should be a way to edit the code to do this but I can't seem to figure out where. Thanks!
directionHideNav: false doesn't work as of 3.1.
Changes now need to be made in CSS
In the theme css file find the line
.theme-default .nivo-directionNav a
Change:
opacity: 0; to opacity: 1;
Right way is;
just change or add directionNavHide value and set it to false in nivoSlider settings.
$('#slider').nivoSlider({directionNavHide:false});
open the nivoslider js file and find
{a(".nivo-directionNav",f).hide();f.hover(function(){a(".nivo-directionNav",f).show()},function(){a(".nivo-directionNav",f).hide()}
change to
{a(".nivo-directionNav",f).show();f.hover(function(){a(".nivo-directionNav",f).show()},function(){a(".nivo-directionNav",f).show()}
Save an upload.
An easy to do it without touching the JS code is just to add a line in your CSS file:
.nivoSlider .nivo-directionNav{
display: block !important; /* ALWAYS show the arrows */
}
I'm not a big fan of !important, but if it means I don't have to adjust the js then it works for me.