Picked choice is not readable in product card 
Autor: Adrian B.
Besucht 318,
Followers 1,
Geteilt 0
The picked choice is not readable in the product card...
see attached
Gepostet am
Hello,
I am sorry about the inconvenience.
What is the URL of this page, and what settings are you using in the Product Catalog object?
I remain available.
Autor
https://abthermal.com/firesleeve-accessories-clamps-tools.html
Autor
https://abthermal.com/firesleeve-open-end-liquid-dip-paste-sealant-rtv-contamination-protection.html
My tests:
Firefox = No error, see screenshot below
Chrome = Error
Edge = Error
----- Firefox -----
There are no errors in my demo shop, neither in Firefox, Edge or Chrome.
Hello,
inspecting the selector I can see a padding of 8 px and 12 px, which matches this custom code, could you check?
If I disable this padding in the browser inspector, the options as visible as intended.
Autor
Is there a setting change I need to make?
Autor
And I am only having the problem on Chrome, both PC and Mac. Safari works and Firefox works.
Hello Adrian,
as I mentioned this padding was set through a custom code for "Dropdown with Redirect", have you had a chance to review this code?
Autor
Ah ok, now I understand.
Yes I added a dropdown picker on some pages, including the one where I am having the problem.
Code is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown with Redirect</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
select {
padding: 8px 12px;
font-size: 14px;
border: 2px solid #ccc;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<h2 style="margin-bottom: 5px;">Thermal Insulating & Protection Sleeves</h2>
<label for="urlDropdown"></label>
<select id="urlDropdown" size="4" onchange="redirectToUrl()">
<option value="">Select a product...</option>
<option value="https://abthermal.com/sleeves-insulation-high-temperature-heat-resistant-reflective-firesleeve.html">>> "ALL SLEEVE CATEGORY" SUMMARY PAGE</option>
<option value="https://abthermal.com/thermal-insulating-protection-sleeve-summary.html">> "THERMAL INSULATING & PROTECTION SLEEVE" SUB-CATEGORY SUMMARY PAGE</option>
<option value="https://abthermal.com/plain-fiberglass-thermal-insulating-and-protection-sleeve-summary.html">Plain Fiberglass Thermal Insulating and Protection Sleeves</option>
<option value="https://abthermal.com/thermal-insulating-sleeve-wrap-pipe-hose-heat-loss-freeze-protection.html">200°F / 93°C - Insulated Heat Loss Freeze Protection Sleeve Wrap</option>
<option value="https://abthermal.com/closed-cell-foam-thermal-insulation-sleeve-for-pipe-hose.html">220°F / 104°C - Closed Cell Foam Sleeve</option>
<option value="https://abthermal.com/hvac-refrigeration-line-insulation-foam-protection-sleeve.html">375°F / 190°C - HVAC Insulation Foam Protection Sleeve</option>
<option value="https://abthermal.com/kevlar-braided-sleeve-high-heat-resistant-protection.html">320°F / 160°C - Kevlar Braided Sleeve</option>
<option value="https://abthermal.com/nomex-braided-sleeve-high-temperature-heat-flame-resistant.html">450°F / 232°C - Nomex Braided Sleeve</option>
<option value="https://abthermal.com/nomex-split-sleeve-wrap-wire-cable-hose-protection.html">450°F / 232°C - Nomex Split Sleeve Wrap</option>
<option value="https://abthermal.com/silicone-sponge-foam-sleeve-high-temperature-pipe-hose-thermal-insulation.html">460°F / 237°C - Silicone Sponge Foam Sleeve</option>
<option value="https://www.abthermal.com/silicone-rubber-round-flexible-tubing-red-color-high-temperature-heat-resistant.html">460°F / 237°C - Silicone Rubber Round Tubing - Red</option>
<option value="https://www.abthermal.com/silicone-rubber-round-tubing-natural-translucent-high-temperature-heat-resistant.html">460°F / 237°C - Silicone Rubber Round Tubing - Natural</option>
<option value="https://abthermal.com/insulating-sleeve-wrap-pipe-hose-skin-burn-freeze-protection.html">500°F / 260°C - Insulated Sleeve Wrap for Pipe and Hose</option>
<option value="https://abthermal.com/fiberglass-braided-sleeve-soft-ptfe-coating.html">550°F / 287°C - Fiberglass w/ soft PTFE Coating</option>
<option value="https://abthermal.com/fiberglass-sleeve-ptfe-resin-coating-hook-loop-closure.html">550°F / 287°C - Fiberglass w/ PTFE resin with hook & loop closure</option>
<option value="https://abthermal.com/carbon-fiber-braided-sleeve-high-strength-heat-resistant.html">1000°F / 537°C - Carbon Fiber Braided Sleeve</option>
<option value="https://abthermal.com/graphite-coated-braided-fiberglass-sleeve.html">1100°F / 593°C - Graphite Coated Braided Fiberglass</option>
<option value="https://abthermal.com/exhaust-pipe-protection-sleeve-braided-fiberglass.html">1200°F / 648°C - Exhaust Pipe Protection Sleeve</option>
<option value="https://abthermal.com/fiberglass-knit-sleeve-high-temperature-heat-resistant.html">1200°F / 648°C - Fiberglass Knit Sleeve - Premium</option>
<option value="https://abthermal.com/fiberglass-braid-sleeve-premium-grade-quality-heat-resistant.html">1200°F / 648°C - Fiberglass Braid Sleeve - Premium</option>
<option value="https://abthermal.com/fiberglass-braid-sleeve-industrial-grade-heat-resistant.html">1200°F / 648°C - Fiberglass Braid Sleeve - Industrial</option>
<option value="https://abthermal.com/fiberglass-braid-sleeve-with-acrylic-saturant.html">1200°F / 648°C - Fiberglass Braid Sleeve w/Acrylic Saturant</option>
<option value="https://abthermal.com/fiberglass-braid-sleeve-heat-treated-high-temperature-heat-resistant.html">1200°F / 648°C - Fiberglass Braid Sleeve Heat Treated</option>
<option value="https://abthermal.com/fiberglass-braid-sleeve-with-hook-loop-closure-insultape.html">1200°F / 648°C - Fiberglass Braid Sleeve with Hook & Loop Closure</option>
<option value="https://abthermal.com/fiberglass-spark-plug-ignition-wire-boot-protection-sleeve.html">1200°F / 648°C - Fiberglass Spark Plug / Ignition Wire Boot</option>
<option value="https://abthermal.com/fiberglass-woven-thermal-heat-insulation-sleeve-with-hook-loop-closure.html">1200°F / 648°C - Fiberglass Woven Sleeve with Hook Loop</option>
<option value="https://abthermal.com/basalt-knit-sleeve-exhaust-pipe-thermal-protection.html">1382°F / 750°C - Basalt Knit Exhaust Pipe Protection Sleeve</option>
<option value="https://abthermal.com/fiberglass-braid-sleeve-vermiculite-coating-heat-resistant.html">1500°F / 815°C - Fiberglass Sleeve with Vermiculite Coating</option>
<option value="https://abthermal.com/silica-braided-sleeve-heat-flame-fire-resistant.html">1800°F / 982°C - Silica Braided Sleeve</option>
<option value="https://abthermal.com/silica-small-diameter-precision-braided-sleeve.html">1800°F / 982°C - Silica Small Diameter Braided Sleeve</option>
<option value="https://abthermal.com/alumina-ceramic-braid-sleeve-fire-flame-resistant.html">2190°F - 2370°F / 1199°C - 1298°C - Alumina Ceramic Braided Sleeve</option>
</select>
<script>
function redirectToUrl() {
const dropdown = document.getElementById('urlDropdown');
const selectedUrl = dropdown.value;
if (selectedUrl) {
window.location.href = selectedUrl;
}
}
</script>
</body>
</html>
Autor
So i played with the paddng values, changed it to "padding: 4px 12px;" from 8px 12px
Seems to have solved the issue.
Thank you for pointing me in the right direction
Adrian
Autor
Is there some way of isolating the code in the html object from the product card? or making it only apply to that particular html object
Hello Adrian,
it would be necessary to change
select {
padding: 8px 12px;
font-size: 14px;
border: 2px solid #ccc;
border-radius: 4px;
cursor: pointer;
}
as using "select" here will affect also dropdown menus generated by WSX5.
...!...you must not use the reserved page tags, which must be unique and only those created automatically by the Program...!...
.