nuBuilder Forum

Posted: **Wed Sep 06, 2023 1:01 am**

Hi,

Sharing Code to transform search field =>

chrome-capture-2023-8-6 (1).gif

JS code:

function nuTranfomSearchBox() {

	$('#nuSearchField,#nuSearchButton,#nuFilter').wrapAll('<div id="nuSeachCombo"></div>');
	$("#nuSearchField").attr("placeholder", "Search");
	$("#nuSearchField").focus();
	$('#nuSearchField').on('input', function() {
		if ($(this).val() !== '') {
			$(this).addClass('has-value'); // Add a class if the field is not empty
		} else {
			$(this).removeClass('has-value'); // Remove the class if the field is empty
		}

	});
}

The function can be called from Header or individual form's js.

Code: Select all

if (nuFormType() == 'browse') {

	nuTranfomSearchBox();

}

CSS:

Code: Select all

.nuActionHolder {
     height: 2px;
     height: auto !important;
     width: 100%;
     display: flex;
    /*flex-wrap: wrap;
    */
     gap: 5px;
     flex-direction: row;
     align-items: baseline 
}
 #nuSeachCombo {
     display: flex;
     gap: 0;
     order: 1;
}
 .nuSearch {
     height: 26px;
     padding: 0 0 0 10px;
     border-radius: 10px 0 0 10px;
     margin-left: 10px;
     transition: border-color .2s ease;
     vertical-align: middle!important;
     order: 1;
     margin-right: 0;
}
 #nuSearchField:empty{
     width: 40%;
}
 #nuSearchButton {
     border-radius: 0 10px 10px 0;
     margin-left: 0;
     height: 26px;
     order: 2;
     width:28%;
}
 #nuFilter{
     order:3;
}
 #nuSearchField.has-value, #nuSearchField:focus {
     width: 70%;
}

Though might be useful to someone.

Posted: **Wed Sep 06, 2023 8:51 am**

Hi Nilesh,

Thanks for sharing your code!

I've observed an issue: the search box keeps changing its size (and hence keeps "jumping") when I repeatedly click the search button. Is there a way to prevent this resizing behavior?

Video_2023-09-06_084716.gif

Posted: **Wed Sep 06, 2023 9:33 am**

It is only suppose to increase size when in search box is in focus or has value else maintains small size.

Is that the behaviour you experiencing. To keep it to one side you can comment off the last css.

I will check it out and come back.

Posted: **Wed Sep 06, 2023 11:37 pm**

Hi Kevin,

Here is an updated CSS, No more resizing.

The reason for the unusual behavior of resizing was if the search field was empty and lost focus, it would resize to 40%. if the field was not empty then everything worked well.

Code: Select all

.nuActionHolder {
    height: 2px;
    height: auto !important;
    width: 100%;
    display: flex;
    /*flex-wrap: wrap;*/
    gap: 5px;
    flex-direction: row;
    align-items: baseline
}
#nuSeachCombo {
    display: flex;
    gap: 0;
    order: 1;
}


.nuSearch {
    height: 26px;
    padding: 0 0 0 10px;
    border-radius: 10px 0 0 10px;
    margin-left: 10px;
    transition: border-color .2s ease;
    vertical-align: middle!important;
    order: 1;
    margin-right: 0;
    
}
/*#nuSearchField:empty{*/
/*  width: 40%; */
/*}*/

#nuSearchButton {
    border-radius: 0 10px 10px 0;
    margin-left: 0;
    height: 26px;
    
order: 2;
width:28%;
}
#nuFilter{
    order:3;
}

#nuSearchField {
  width: 70%; 
}

Posted: **Fri Sep 08, 2023 9:40 am**

I created a new form, but the order of the buttons on the browse form is messed up.

display.png

Posted: **Fri Sep 08, 2023 12:38 pm**

kev1n wrote: ↑Fri Sep 08, 2023 9:40 am I created a new form, but the order of the buttons on the browse form is messed up.

display.png

Hi Kevin,

Thats because nuActionHolder is now displayed flex.

Code: Select all

#nuSeachCombo {
    display: flex;
    gap: 0;
    order: 0;
}

This should put search box to first position.

chrome-capture-2023-8-8.png

Posted: **Sat Sep 09, 2023 2:23 am**

Thanks, I will test again more thoroughly

Posted: **Sun Sep 10, 2023 1:08 pm**

I want the dev buttons (AS, BS etc. ) still to be on top of the search field, button as it's the case now.

buttons.png

Posted: **Thu Sep 14, 2023 4:25 am**

Hi Kevin,

Below is the update code, kindly test it and let me know.

JS

Code: Select all

function nuTransformSearchBox() {
    $('#nuSearchField,#nuSearchButton,#nuFilter').wrapAll('<div id="nuSeachCombo"></div>');
    $('.nuAdminButton').wrapAll('<div class="adminButtonGroup"></div>');
 $('.nuActionButton, #nuSeachCombo').not('.nuAdminButton').not('#nuPreviewButton').not('#nuSearchButton').not('span').wrapAll('<div class="actionButtonGroup"></div>');
$('#nuSearchField')
.attr('placeholder', 'Search')
.focus();
    
}

CSS

Code: Select all

.nuActionHolder {
   
    height: auto !important;
    width: 100%;
    display: flex;
  
    gap: 0;
    flex-direction: column;
    align-items: baseline;
    /*padding: 10px;*/
}
#nuSeachCombo {
    display: flex;
    gap: 0;
    order: 0;

}


.nuSearch {
    height: 26px;
    padding: 0 0 0 10px;
    border-radius: 10px 0 0 10px;
    margin-left: 10px;
    transition: border-color .2s ease;
    vertical-align: middle!important;
    order: 1;
    margin-right: 0;
    
}


#nuSearchButton {
    border-radius: 0 10px 10px 0;
    margin-left: 0;
    height: 26px;
    
order: 2;
width:28%;
}
#nuFilter{
    order:3;
}

#nuSearchField {
  width: 70%; 
}
.actionButtonGroup{
    display: flex;
    align-items: baseline;
}
.adminButtonGroup{
    padding: 2px;
    height: 15px;
}

Posted: **Thu Sep 14, 2023 9:38 am**

Now it looks like this. Does it look right for you?

2023-09-14_093739.png

nuBuilder Forum

Transform Search Field

Transform Search Field

Re: Transform Search Field

Re: Transform Search Field

Re: Transform Search Field

Re: Transform Search Field

Re: Transform Search Field

Re: Transform Search Field

Re: Transform Search Field

Re: Transform Search Field

Re: Transform Search Field