FAB Text Problem on Android

Questions
1

Greetings,

I’m having a little trouble on centered fab. I’m getting some data from the database, loop through parsed JSON, and view it on the page.

As you can see in the screenshots, once the expected users of that very call fetched, I’m gathering all of them except one user in the fab. When the fab items closed it should be writing remaining users ( say 3 users are going to attend the call, it should write 2 ), and once it’s opened it should display ‘X’ icon. Although it’s working as intended on iOS, on the Android, it’s not displaying the ‘X’ nor ‘+2’ when the fab items closed, and once you open it, both texts appear on top of each other. Once users go to another page and come back, it’s working as it should be. Hope that makes sense.

Intended Behavior:

intended
intended.jpg716×720 113 KB

On Page Init ( Android only ):

page-init
page-init.jpg712×720 112 KB

On Page Init & Fab Opened:

page-init--fab-opened
page-init--fab-opened.jpg832×720 142 KB

And here is the part of my codes:
let remainingUsers = totalScheduledUsers - 1;

app.request.get(“comps/get_subordinates_info.php”, {user_id: ids}, function( data ){
let user_schedule_json = JSON.parse( data );

if ( totalScheduledUsers > 1 ) {
	html += "<div class='schedule-card-photo-box'><div class='schedule-card-photo' style='background-image: url( ";
	html += user_schedule_json[0].user_thumbnail;
	html += " );'></div>";
	html += "<div class='fab' id='";
	html += i;
	html += "'><a href='#'><i class='icon f7-icons if-not-md'>+";
	html += remainingUsers;
	html += "</i><i class='icon f7-icons if-not-md close-small'></i><i class='icon material-icons md-only'>+"
	html += remainingUsers;
	html += "</i><i class='icon material-icons md-only close-small'></i></a><div class='fab-buttons fab-buttons-center'>";
	
	for ( let i = 1; i < totalScheduledUsers; i++ ) {
		html += "<a style='background-image: url( ";
		html += user_schedule_json[i].user_thumbnail;
		html += " ); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;'></a>";
	}

	html += "</div></div>";
} else {
	html += "<div class='schedule-card-photo-box'><div class='schedule-card-photo' style='transform: none; background-image: url( ";
	html += user_schedule_json[0].user_thumbnail;
	html += " );'></div>";
}

$( '.admin-schedule-cards' ).html( html );
});

Thanks,
~ Nathan.

2

Well, I’ve found the problem, but still not sure how to solve it.

Once the page initialized, it’s creating the both ‘md-only’ and ‘if-not-md’ classed items, and in the CSS file it’s giving the opacity: 0 to every second item hence it’s not displaying them on the Android until opening the fab ( which then eliminates the style ).

So, I need to change my question to ‘How can I prevent to load ‘if-not-md’ classed items ( or vice versa ) while getting the data dynamically?’

Thanks,
~ Nathan.

3

Okay, I’m pretty sure this is not the ideal way, but this one do the trick:

if ( $$( 'html' ).hasClass('ios') ) {
	$$( 'i.md-only' ).remove();
}