ie11 DataTables SearchBuilder Example Page mis-formatting

ie11 DataTables SearchBuilder Example Page mis-formatting

JLH999JLH999 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?

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • JLH999JLH999 Posts: 13Questions: 3Answers: 0

    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 !!!

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • JLH999JLH999 Posts: 13Questions: 3Answers: 0

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • JLH999JLH999 Posts: 13Questions: 3Answers: 0
    edited February 2021

    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

  • JLH999JLH999 Posts: 13Questions: 3Answers: 0

    **Thank you for your help! So very much appreciated !!! ** :)

  • JLH999JLH999 Posts: 13Questions: 3Answers: 0

    I was able to get the overlap to go-away by adjusting the flex-basis

  • JLH999JLH999 Posts: 13Questions: 3Answers: 0

    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 ...

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Can you give us a link to a page showing that issue so we can get the fix into the code please?

    Thanks,
    Allan

  • JLH999JLH999 Posts: 13Questions: 3Answers: 0

    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 ...

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

This discussion has been closed.