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 1724 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 1724 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 1724 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 1724 times
Result in xs
/sm
- chrome_0aek3yVs17.png (7.26 KiB) Viewed 1724 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.