Button not visible from smartphone

[facos79]

Good morning,
I added a button with which the application only shows me the rows with values not yet settled. The button works well if I open the application from the PC. When I open it from my smartphone the button is not visible. What can I do to solve the problem?

Code: Select all

jQuery(function(){
   jQuery('#Filter').after('<button class="btn btn-warning" type="button" id="filter-button"><i class="glyphicon glyphicon glyphicon-filter"></i>Non saldati</button>');
        jQuery('button[id=filter-button]').click(function(){
              window.location = 'Movimenti_acquisto_blocco_view.php?SortField=&SortDirection=&FilterAnd%5B1%5D=and&FilterField%5B1%5D=17&FilterOperator%5B1%5D=not-equal-to&FilterValue%5B1%5D=1';
        });
});

[jsetzer]

TL;DR

Replace jQuery('#Filter') by jQuery("name='Filter_x'")


Reason

You insert your additional button after #Filter button.

jQuery('#Filter').after(...)

The first HTML element having id="Filter" belongs to a button-group (.btn-group) which is visible in medium- and large-screens, only:

chrome_qFZs7SDwfT.png (10.89 KiB) Viewed 1725 times

Check out the HTML code for #Filter's parent. It has those two Bootstrap classes which control visibility depending on screen-size: visible-md visible-lg.

So, the whole "toolbar" will not be visible in xs nor in sm screen sizes, only in md and lg screen sizes.

What can I do to solve the problem?

There is a second (vertical) button-group which is visible in xs and sm screens because it has Bootstrap 3 classses visible-xs visible-sm.

chrome_QXXzuaNbhF.png (12.47 KiB) Viewed 1725 times

That 2nd "toolbar" also contains a Filter-button, which, unfortunately, also has id="Filter". Id's should be unique, but here it isn't.

When selecting an element by id using jQuery("#id")-selector, jQuery will return only one element. So we need a way to find both Filter-buttons, the one for small devices and the one for bigger devices. Fortunately both buttons have an identical name-attribute-value name="Filter_x". We can just change the selector and jQuery will return both. See the difference here:

chrome_KBSKKrMGuP.png (3.32 KiB) Viewed 1725 times

Selecting by id returns just one element. Selecting by name returns two elements.

Code

Here is an example for inserting a button (actually a <a href="..."></a>-link ) to both Filter_x buttons having name="Filter_x"

Code: Select all

jQuery(function(){
    jQuery("<a/>")
        .addClass("btn btn-primary")
        .attr("href", "https://www.appgini.de")
        .append(jQuery("<i/>").addClass("glyphicon glyphicon-wrench"))
        .append(" Text")
        .insertAfter("[name='Filter_x']");
 });
 

Result in md/lg

chrome_85CLRg3Dww.png (6.04 KiB) Viewed 1725 times

Result in xs/sm

chrome_0aek3yVs17.png (7.26 KiB) Viewed 1725 times

I hope this solves your problem and helps others understanding Bootstrap's options to show and hide elements depending on the screen size. Next to the visible-... classes there is also hidden-... classes.

[facos79]

Thanks very much for the help.
Works. I solved the problem