Transform Search Field

[nc07]

Hi Kevin,
I tested it and works well when function is called

Code: Select all

 $(document).ready(function() {
nuTransformSearchBox();

});

without it the layout is similar to what you have experienced.

let me know if the issue is still there.

layout should look like this now

captures_chrome-capture-2023-8-15.png

[kev1n]

On edit forms the dev buttons still appear as shown on my screenshot above.

[nc07]

Not tested,

Try setting

Code: Select all

.adminButtonGroup{
Display:flex;
flex-direction: row;
    padding: 2px;
    height: 15px;
}

Also check in html if the above group is created.

[kev1n]

These 2 CSS classes, .actionButtonGroup and .adminButtonGroup, appear to be custom styles and are not part of nuBuilder's core code.
Can you clarify how these classes are applied and assigned? Thanks!

Code: Select all

.actionButtonGroup {
	display: flex;
	align - items: baseline;
}

.adminButtonGroup {
	Display: flex;
	flex - direction: row;
	padding: 2 px;
	height: 15 px;
}

[nc07]

Those two classes are created with the updated nuTransformSearchBox() i posted in the earlier. It is used for grouping admin buttons and action buttons separately to enable the layout you requested.

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();
    
}

[kev1n]

As JavaScript is executed after the form has already been rendered, it causes noticeable "flickering".
I'm wondering if we could get rid of that.

Video_2023-09-19_003041.gif

[nc07]

Thanks Kevin, that's optional for anyone to use and may not necessary need be part of NB.