CSS pro velká rozbalovací menu ve formulářích

Optimalizace rozbalovacích menu v formulářích: problémy a řešení pomocí CSS

Frontend vývojáři často čelí select prvkům, kde je výška rozbalovacího menu pevně omezena na 4–5 položek. Toto způsobuje bariéru pro uživatele: kompletní seznam s více než 100 možnostmi nelze přehledně zobrazit bez unavujícího scrollování úzkou škvírou. Výsledkem je snížená použitelnost – uživatel nemůže rychle posoudit dostupné volby a vybrat tu správnou.

Běžný scénář: formulář publikace článku s poli "cílová skupina" a "hubů". Hledání pomáhá zadat přesný dotaz, ale bez předchozího přehledu seznamu je zcela bezcenné. Scrollování vyžaduje 20–50 iterací kolečkem myši pro opatrné prohlédnutí, což je podrážděné a spotřebovává čas.

CSS řešení pro rozšíření menu

Problém lze vyřešit jednoduchými pravidly CSS, které se aplikují přes devtools nebo ve stylu komponenty. Zvýšení výšky na rozumnou mez (max-height: 80vh nebo pevných 400–500px) umožňuje okamžité zobrazení 20–30 prvků a minimalizuje potřebu scrollování.

Příklad stylů pro vlastní select nebo nativní prvek:

.select-container {
  position: relative;
}

.select-dropdown {
  max-height: 80vh !important;
  overflow-y: auto;
  position: absolute;
  z-index: 1000;
  width: 100%;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.select-option {
  padding: 12px 16px;
  cursor: pointer;
}

.select-option:hover {
  background: #f5f5f5;
}

Toto řešení využívá volný prostor na obrazovce bez porušení layoutu. U velkých monitorů je efekt zejména výrazný – uživatel vidí kontext celý najednou.

Anti-pattern: ignorování skutečné velikosti dat

Omezená rozbalovací pole jsou klasický UX anti-pattern. Návrháři kreslí prototypy pro 3–5 položek, frontend implementuje pixel-perfektní design bez ohledu na extrémní případy. Výsledkem je rozhraní, které se nedá škálovat pod skutečná data.

Hlavní znaky anti-patternu:

• Fixní výška dropdown < 200px při seznamu > 20 položek.
• Chybějící virtuální scrollování nebo stránkování u dlouhých seznamů.
• Žádná možnost "prohlédnout si vše" nebo režim celé obrazovky.
• Hledání se aktivuje až po získání fokusu, bez náhledu.

Místo toho implementujte:

• Dynamickou výšku: min(80vh, 50% seznamu).
• Virtuální zpracování pro seznamy > 100 prvků (react-window, react-virtualized).
• Klávesovou navigaci s fuzzy hledáním.
• Lazy-load položek při scrollování.

Nejlepší praktiky pro frontend vývoj

Interaktivní prvky by měly být adaptabilní k viewportu. Statika se s uživatelem nepropojí – ji lze zabalit nebo skrýt.

• Responsive design: Použijte max-height: calc(100vh - 200px) pro mobilní i desktop verze.
• Přístupnost (A11y): Přidejte ARIA atributy (role="listbox", aria-activedescendant).
• Výkon: U React/Vue použijte portály pro řešení konfliktů z-index.
• Testování: Otestujte na seznamech 10, 50, 200 položek.

Příklad React komponenty s rozšiřitelným dropdownem:

import React, { useState, useRef } from 'react';

const AdaptiveSelect = ({ options, onChange }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [selected, setSelected] = useState('');
  const dropdownRef = useRef();

  const toggle = () => setIsOpen(!isOpen);

  const handleSelect = (value) => {
    setSelected(value);
    onChange(value);
    setIsOpen(false);
  };

  return (
    <div className="select-container">
      <div className="select-trigger" onClick={toggle}>
        {selected || 'Vyberte možnost'}
      </div>
      {isOpen && (
        <div className="select-dropdown" ref={dropdownRef}>
          {options.map(opt => (
            <div key={opt} className="select-option" onClick={() => handleSelect(opt)}>
              {opt}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default AdaptiveSelect;

Komponenta se automaticky přizpůsobí velikosti seznamu i obrazovky.

Co je důležité

• Škálovatelnost: Rozbalovací menu s >20 možnostmi vyžaduje max-height 80vh pro pohodlné používání.
• Uživatelský zážitek: Kompletní zobrazení seznamu bez scrollování snižuje čas volby 5–10×.
• Implementace: 5–10 řádků CSS vyřeší 90 % případů; pro složitější situace použijte virtuální zpracování.
• Testování: Testujte na reálných datech, nikoli na prototypu s 4 položkami.
• A11y: Zajistěte klávesovou navigaci a podporu screen readerů.

— Editorial Team