Category Tree: Bug in Mobile View

[influxweb]

Current Behavior

"Basically when in a category view on a mobile device when you sometimes click on the first or second product on the left hand side rather than go to the product page it applies a facet filter rather than go to the product page which is obviously very confusing and a bug."

Reported on the Miva Forum

Correcting the Issue

In the category tree, there is an issue with the invisible content overflowing into the visible content causing a conflict in the click regions. I have added this update and it will be included in the next maintenance release.

To make the update prior to the next release, you will need to update the code in User Interface -> CSS Resources -> x-category-tree:

/* ==========================================================================
   EXTENSIONS / CATEGORY TREE / CATEGORY TREE
   ========================================================================== */

.x-category-tree {
	margin-bottom: 16px;
	position: relative;
}

	.x-category-tree__trigger {
		display: none;
	}
	
	.x-category-tree__trigger:checked ~ .x-category-tree__row,
	.x-category-tree__trigger:checked ~ .x-category-tree__row .x-category-tree__row {
		max-height: 100%;
		opacity: 1;
		overflow: visible;
		visibility: visible;
	}
	
	.x-category-tree__label {
		display: block;
		min-height: 2em;
		margin: 0;
		padding: 1em;
		position: relative;
		font-style: normal;
		background-color: #3d70b2;
		color: #fff;
	}
	
	.x-category-tree__label::after,
	.x-category-tree__label::before {
		position: absolute;
		right: 1em;
		transition: 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.1);
	}
	
	.x-category-tree__label::after {
		content: "\2212";
		opacity: 0;
		transform: scale(0);
	}
	
	.x-category-tree__label::before {
		content: "\2261";
		opacity: 1;
		transform: scale(2);
	}
	
	.x-category-tree__trigger:checked ~ .x-category-tree__label::after {
		opacity: 1;
		transform: scale(2);
	}
	
	.x-category-tree__trigger:checked ~ .x-category-tree__label::before {
		opacity: 0;
		transform: scale(0);
	}
	
	
	.x-category-tree__title {
		display: none;
	}
	
	
	.x-category-tree__row {
		width: 100%;
		max-height: 0;
		margin: 0;
		padding: 0;
		list-style: none;
		opacity: 0;
		overflow: hidden;
		visibility: hidden;
		transition: 0.2s ease-in-out;
	}
	
		.x-category-tree__link {
			display: block;
			padding: 0.5em 1em;
			color: #0f0f0f;
		}
		
		.x-category-tree__link:hover {
			text-decoration: none;
		}
		
		.x-category-tree__list--level-2 .x-category-tree__link {
			padding-left: 2em;
		}
		
		.x-category-tree__list--level-3 .x-category-tree__link {
			padding-left: 3em;
		}
			
			.x-category-tree__link--current {
				font-weight: 700;
			}


	@media (min-width: 60em) {
		.x-category-tree__label {
			display: none;
		}
		
		.x-category-tree__title {
			display: block;
		}

			.x-category-tree__heading {
				padding-top: 1.125rem;
			}

		.x-category-tree__row,
		.x-category-tree__trigger:checked ~ .x-category-tree__row,
		.x-category-tree__trigger:checked ~ .x-category-tree__row .x-category-tree__row {
			max-height: 100%;
			opacity: 1;
			visibility: visible;
		}
		
		.x-category-tree__link:not(.x-category-tree__link--current):hover {
			text-decoration: none;
			background-color: #eaeaea;
			transition: background-color ease-in 0.3s 0.05s;
		}
	}





/**
 * This section contains the necessary styles when using the built-in search
 * faceting ability of Miva. Since the functional code is generated at run-time,
 * these styles do not conform to the tenants used in the rest of the framework.
 */

.mm_facet_rangeslider {
	display: block;
	height: 2em;
	margin: 0.25em;
	position: relative;
}

	.mm_facet_rangeslider_input_container_low,
	.mm_facet_rangeslider_input_container_high {
		width: 4em;
		height: 2em;
		position: absolute;
		top: 0;
		text-align: center;
		border: 1px solid #c0c0c0;
	}
	
	.mm_facet_rangeslider_input_container_low {
		left: 0;
		border-radius: 0.25em 0 0 0.25em;
	}
	
	.mm_facet_rangeslider_input_container_high {
		right: 0;
		border-radius: 0 0.25em 0.25em 0;
	}
	
		.mm_facet_rangeslider_input_container_low.mm_facet_rangeslider_input_active,
		.mm_facet_rangeslider_input_container_high.mm_facet_rangeslider_input_active {
			border-color: #3d70b2;
		}
	
		.mm_facet_rangeslider_input {}
	
	.mm_facet_rangeslider_track_container {
		height: 2em;
		position: absolute;
		top: 0;
		right: 4em;
		left: 4em;
		border-top: 1px solid #c0c0c0;
		border-bottom: 1px solid #c0c0c0;
		box-sizing: border-box;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	
		.mm_facet_rangeslider_track {
			height: 0.25em;
			position: absolute;
			top: 50%;
			right: 0.25em;
			left: 0.25em;
			transform: translateY(-50%);
		}
		
			.mm_facet_rangeslider_track_background,
			.mm_facet_rangeslider_track_selection {
				position: absolute;
				top: 0;
				right: 0.5em;
				bottom: 0;
				left: 0.5em;
				background: #c0c0c0;
			}
			
			.mm_facet_rangeslider_track_selection {
				background: #3d70b2;
			}
			
			.mm_facet_rangeslider_track_handle_low,
			.mm_facet_rangeslider_track_handle_high {
				width: 2em;
				height: 2em;
				position: absolute;
				top: 50%;
				left: -0.5em;
				background: #fff;
				border: 1px solid #c0c0c0;
				border-radius: 50%;
				cursor: pointer;
				transform: translateY(-50%);
			}
		
		.mm_facet_rangeslider.mm_facet_rangeslider_mini {
			height: 6em;
			margin: 0;
		}
		
		.mm_facet_rangeslider.mm_facet_rangeslider_mini .mm_facet_rangeslider_input_container_low {
			width: 50%;
			border-radius: 0.25em 0 0 0;
		}
		
		.mm_facet_rangeslider.mm_facet_rangeslider_mini .mm_facet_rangeslider_input_container_high {
			width: 50%;
			border-radius: 0 0.25em 0 0;
			border-left: none;
		}
		
		.mm_facet_rangeslider.mm_facet_rangeslider_mini .mm_facet_rangeslider_track_container {
			height: 3em;
			top: 2em;
			right: 0;
			left: 0;
			border: 1px solid #c0c0c0;
			border-top: none;
			border-radius: 0 0 0.25em 0.25em;
		}
		
		.mm_facet_rangeslider.mm_facet_rangeslider_mini .mm_facet_rangeslider_input_container_low.mm_facet_rangeslider_input_active,
		.mm_facet_rangeslider.mm_facet_rangeslider_mini .mm_facet_rangeslider_input_container_high.mm_facet_rangeslider_input_active {
			border-color: #eaeaea;
			box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.15);
		}