How to separate the searchpane header from the search form and put it separately on the top row?

How to separate the searchpane header from the search form and put it separately on the top row?

flamingo_7flamingo_7 Posts: 4Questions: 1Answers: 0

Hello everyone,
Is it possible to separate the searchpane headers and search input as in the screenshot below?

please help me if you have any ideas how to do this. thank you.

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,031Questions: 1Answers: 2,570

    Do you mean you want the panes looking exactly the same, but you want a title above each one?

    Colin

  • flamingo_7flamingo_7 Posts: 4Questions: 1Answers: 0

    Hello Colin, yes

  • allanallan Posts: 60,345Questions: 1Answers: 9,803 Site admin

    There is no option for that in SearchPanes at this time I'm afraid. The title is actually a placeholder attribute for the input element.

    Allan

  • colincolin Posts: 15,031Questions: 1Answers: 2,570
    Answer ✓

    As Allan said, there's no specific option, but you could do something like this example here. It iterates through the panes and just creates a h2 element above each:

        initComplete: function() {
          $('.dtsp-searchPane').each(function() {
            let title = $(this).find('input').attr('placeholder')
            let header = $(this).find('.dtsp-topRow')
            
            if (title !== undefined) {
              let heading = '<h2>' + title + '<colin/h2>'
              $(heading).insertBefore(header)
            }
          })
        }
    

    Colin

  • flamingo_7flamingo_7 Posts: 4Questions: 1Answers: 0

    @Colin, you are a genius! thank you! It works excellent with the basic initialization, but it doesn't work with Vertical Panes
    I added some code to your example, Could you please check why it does not work when Panes are vertically stacked?

  • colincolin Posts: 15,031Questions: 1Answers: 2,570

    Ah, that's just because you're not initialising SearchPanes with the table, you're doing it afterwards - so you just need to make sure the code that generates the headers runs after SearchPanes is initialised, something like this,

    Colin

  • flamingo_7flamingo_7 Posts: 4Questions: 1Answers: 0

    @Colin, thank you very much for explaining and giving the solution! now I understand how it works.

Sign In or Register to comment.