Bir açılır menü, menünün genişliğini sığacak şekilde genişletmek mümkün olmayan bir metinle karşılaşıldığında ne tür seçeneklere sahip olurum? Örneğin, sayfa düzenini kırar veya açılan menü uzun öğeye sığacak şekilde ayarlandığında çok çirkin görünüyor.Çok geniş açılan menü öğeleri için öneriler?
Kesilme? Truncation artı tam vurgulu metni? Uzun ürünlere izin verilmiyor mu?
Bunun için herhangi bir şık çözümle karşılaşan kimse var mı?
Teşekkürler.
Seçeneklerin kesilmesi konusunda GordonB ile aynı fikirdeyim. Aşırı uzun seçenekler okumak zor olabilir ve bahsettiğiniz gibi korkunç görünüyor.
Açılırken kullanıcı girdisi doluysa, uzunluğu kısıtlarım. 15 kelimeyle söylenebilecek şey 5 ile söylenebilseydi ... eğer yapamazsa, belki de bir düşme en iyi seçeneğiniz değildir. Örneğin, seçenekleriniz araştırma makalelerinin ve yazarlarının başlıklarıysa, bunları muhtemelen birkaç anahtar kelimeye indirgeyebilirsiniz ("String Theory and You [Brown 2008]"). Öte yandan, eğer seçenekler kendileri sadece birkaç kelimeyle farklılık gösteriyorsa ve kesiliyorlarsa anlamını yitirirlerse (örneğin "Fıstık ezmesi ve havuç çubukları ve soya sütü ile üzümlü jöleli sandviç" ve "Fıstık ezmesi ve kızartmalık jöle" gibi seçeneklerin bir listesi havuç çubukları ve% 2 süt "ile sandwith") belki de tüm seçenekleri sırayla, bir onay kutusu veya uygun bir radyo düğmesi ile birlikte sunarak daha iyi hizmet olurdu.
da size mümkün olmaz diğer öğeler katarak izin olabilir
Bu ikinci yaklaşım (eğer ASP.NET kullanıyorsanız, temelde ben bir DropDownList yerine yineleyici kullanarak söylüyorum) bir açılır. Fikirler için this Amazon search result page'a bir göz atın.
<div> yerine uygulanan ticari ASP.NET denetimini kullanıyorum < seç > seçin. Böylelikle çok satırlı elemanları yerleştirebilir, istediğimiz gibi biçimlendirebilir ve başka şeyler yapabiliriz. araç ipucu ile
Kesme benim seçimim .... olacağını
i oldukça UI zengin bir telerik denetimi, kullanılan yapmak zorunda son kez.
Çoğu tarayıcı, açılır pencerenin gerçek genişliğinden bağımsız olarak seçenekleri tam genişlikte gösterirken, IE bunları seçim kutusunun genişliğine göre kırpmaktadır. Yani sorun gerçekten tarayıcıya özgüdür.
Açılırken mutlak konumlandırmayı kullanarak bir çözüm yaptım, böylece düzenimin kesilmesine gerek kalmadan IE'de gezinme genişliğini genişletebilirim. Biraz hacky ama bu bir seçenek.
Ne kadar konuştuğunuza, bağlamın ne olduğuna bağlı. Çoğu zaman bu bir kodlama problemi yerine bir tasarım sorununa gelir. Metin gerçekten uzunsa, bir metinde uzun metnin okunması zor olduğu için kullanılabilirlik sorunlarına sahip olursunuz. Seçeneklerim:
Açılır kapanma gerçekten çok dar ve en uzun öğeler çok uzun değilse (ör. 3-4 kelime), tasarıma uyum sağlamak için tasarımı değiştirin.
Metin gerçekten çok uzunsa (örneğin cümleler), sonra bunu kesebilirsiniz.Bazen metin buna uygun değildir (örneğin, aynı metinle birden çok öğe ile sonuçlanabilir). Belirli liste öğelerine gerçekten araç ipuçlarını koyamazsınız.
Metin gerçekten uzunsa ve kısaltılamıyorsa, farklı bir kullanıcı arabirimi seçeneği düşünebilirsiniz.
Öğeye, CSS property max-width ile maksimum genişlik verin.
Fark ettim ki bu soruya oldukça geç kaldım, ama bir cevap için avlanıyorum ve oldukça zarif bir çözüm bulmuş olabilirim. İkinci bağlantıya dayalı bir çözüm öneren önce çözüm çift hakkında
ilk bağlantı görüşmeler:
burada bakın.Bu fikir, tıklatmayla, <select> etiketinin genişliğini, seçeneklerin tam metnini gösterecek kadar büyük olacak şekilde değiştirirsiniz. <select> etiketini "gizli" olarak ayarlanmış bir taşma sahip bir div içinde tutarak sayfanın geri kalanıyla vidalama yapmaz.
Deneyin - oldukça iyi bir çözümdür.
Bu ikinci bağlantıdan çözüm benim için harika çalıştı. IE8'de düzgün bir şekilde çalışması için onBlur özniteliğini dışarıda bırakmanız gerektiğini eklemeliyim. – techpeace
2. link önerisi, IE8'de onBlur'u kaldırmaya gerek kalmadan çalıştı. –
Neden uzun alana dayalı hesaplanmış bir alan oluşturmuyorsunuz. Sadece bunu sadece ilk 50 (karakter) karakter olacak şekilde oluşturun.
= SOL ([Başlık], 50)
sonra aşağı açılan bu alan referans.
Teşekkürler! Açılan metin kullanıcı girişinden kaynaklanır, bu yüzden bir miktar içgörünün eksik kalması, kısaltma veya uzunluk kısıtlaması kullanmak zorunda kalacağım gibi görünür. – ntownsend