I have implemented Search Pane and i want to have the option to collapse the individual search panes as it is vertically tacked.
Can you please help here
This question has an accepted answers - jump to answer
How do you mean collapse? Do you mean not to show the pane at all? Or to close it? If you could explain more, please, that will help us understand the issue.
Thanks @colin for your reply.
The below is the expected result that i need to achieve
The current implemented looks as below
Ah, I see, thanks for the explanation. There's no option to close them, but you can vertically stack them - see example here. You might be able to collapse them with some clever CSS perhaps, but that's not something currently supported, I'm afraid.
@colin Thanks for your reply I have vertically stacked it as per the link mentioned but the main requirement was to collapse the individual search pane.
Currently I lack the knowledge of the clever css, I could use some help if you can provide me some guidance like some third party css or something
You could try something like this. It's a bit clunky - you have to click on one of the elements in the header of the pane, but it works well enough. It'll work just as well when the panes are vertically stacked too.
@colin WOW thanks you are a life saver this will do very well. I was tryign all the ugly css code all morning but this looks good. Thanks.
Just one more thing is that i am using the below code like a down ward arrow to indicate the dropdown
var btn = $('<span class="caret"></span>');
Is this the right way of doing it or there is a better way of implementing the same.
Once again really appreciate your help
Could you update the test case to demonstrate that, please, that'll help to get us seeing the same thing,
@colin Thanks for your reply. Please find below the test case
the caret icon changes position if all panes are minimized.
@allan Thanks for your reply.
When it collapse all the pane the span icon changes position, it should remain the same when all the tables are collapsed.
I don't see that behavior with Allan's example using Chrome on the Mac. Please let us know the steps to recreate the issue in Allan's example. Otherwise please update the example to show the problem.
It looks like you're new here. If you want to get involved, click one of these buttons!
DataTables designed and created by SpryMedia Ltd.
SpryMedia Ltd is registered in Scotland, company no. SC456502.