ie11 DataTables SearchBuilder Example Page mis-formatting
ie11 DataTables SearchBuilder Example Page mis-formatting
JLH999
Posts: 13Questions: 3Answers: 0
Link to test case:
https://datatables.net/extensions/searchbuilder/examples/initialisation/simple.html
Debugger code (debug.datatables.net):
Error messages shown:
No errors shown
Description of problem:
When accessing the SearchBuilder example using ie11 the condition (And) button / formatting appears to be mis-aligned / overlapping with the Data and Add Condition with only 1 condition
Was this corrected in release notes for SearchBuilder 1.0.1?
This discussion has been closed.
Answers
Thanks, I noticed that a few months ago and raised it internally (it's DD-1688 for my reference). It's in the backlog so it will get looked at eventually.
Colin
Thank you Colin ... I also noticed the datetime calendar month previous / next buttons seem to lose the .stoppropagation and submit the form ...
My overall goal is to use SearchBuilder in a SharePoint 2016 Wiki Page Content Editor Web Part ... The propagation item might be on my side with SharePoint overriding ... I'm not sure where the issue may be cropping up ...
Had noticed in the release notes a comment about buttons losing listeners
Almost like a previous version was saved over the latest SearchBuilder
Once again ... Thanx for the feedback !!!
That's right, the event listeners were being lost if there was an Ajax reload on the page. That's been resolved so you shouldn't be seeing that. Shout if you do, we're happy to take a look,
Colin
Yeah ... I am seeing "weird" things .... Both Chome and IE11 have extra wide datepickers when searching date field (2021-02-05 format) (like it's trying to include the time portion) and the cal prev/next buttons submit page before changing the month ... this is on initial load / build of the dataTable.
Because it is happening on both browsers may lead be to believe a conflict with SharePoint... I wish I could like to the page as an example but the corp network won't allow for it.
I'm going to try like the example is created .... discreet loading of each component and delay 15-20 seconds after SharePoint does it's thing to see if that makes a difference
We're happy to take a look if you can link to the page, or create a test case that reproduces it. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Hello Colin -
Whilst going through the coding & html within the SearchBuilder / dateTime...
Why is it that every button(And, Clear, X, all the days, all the hours...) have type="button" except for the Previous and Next buttons on the calendar month picker?
DataTables 1.10.23, Buttons 1.6.5, HTML5 export 1.6.5, Print view 1.6.5, ColReorder 1.5.3, FixedColumns 3.3.2, FixedHeader 3.1.8, Responsive 2.2.7, RowGroup 1.1.2, RowReorder 1.2.7, Scroller 2.0.3, SearchBuilder 1.0.1, SearchPanes 1.2.2, Select 1.3.1
I went into datatables.min.js and added type="button" to Previous and Next ... The page submitting went away and is working as desired ... still have to figure out the condition 1 overlap and the extra wide calendar picker ... but the users can use the picker now and live with the formatting
**Thank you for your help! So very much appreciated !!! **
I was able to get the overlap to go-away by adjusting the flex-basis
The datetime calendar picker width was having a conflict with the SharePoint (2016) corev15.css min-width setting as each of the days on the calendar are defined as buttons ...
Can you give us a link to a page showing that issue so we can get the fix into the code please?
Thanks,
Allan
Unfortunately I'm not able to provide a link to a page due to the page is on our corporate network.
The first issue above, the button defs, can be found in the dataTables individual source downloads page ... https://datatables.net/download/release#SearchBuilder ... look at the SearchBuilder .js file and search for "Previous" ... you will see the <button> def...
The second issue, flex-basis, is somewhere within .dtsb CSS definition ...
div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer button.dtsb-logic {
border: none;
border-radius: 0px;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 34px;
margin: 0px;
}
The third issue (min-width) is dependent on SharePoint core15.css being in the mix ... not able to replicate without a SharePoint system ...
Hope that helps ... I'm only able to localize the issues within the dataTables code to a point ...
With styling, there can be so many layers of code interfering with each other that we really need to see it to progress it. We don't your entire infrastructure, just the smallest test case that replicates the issue - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin