Info Box - Ölçü Düzenleme

Merhabalar,

Daha önce farklı bir ticketta oluşturdugumuz formlara info box alanları eklemiştik, ancak gerçek textleri girince info box alan boyutu boylamasına uzayacak şekilde görünüyor:

Bunu asagida gibi yapmak için nasıl düzeltebilirim:

Üzerine çalıştıgım test formu:

https://form.jotform.com/220871679871974

Cok teşekkürler,

Cagla

Merhaba caglayalcin,

Jotform Destek ile iletişime geçtiğiniz için teşekkür ederiz. İlgili alanların genişliğini ayarlamak için, CSS kodu içerisindeki her bir alan için width: "100%"; değerini ekleyebilirsiniz. Örneğin:

span.form-radio-item:nth-child(1)::after {

content : "Stok yönetimi, maliyet muhasebesi, satın alma, dış ticaret ve satış gibi tüm operasyonlarda görünürlük, etkin kontrol ve veri güvenilirliği sağlar.";

border : 1px solid #ddd;

border-radius : 5px;

padding : 3px;

position : absolute;

left : 291px;

background : #fff;

display : none;

z-index:9999;

width: 100%;

}

Bu düzenleme sonrasında eklemiş olduğunuz metin aşağıdaki gibi görünecektir:

Ek olarak, görünümde yuvarlak içinde i harfi simgelerinin metnin önüne çıkması halinde, z-index değerini sonlarındaki "px" kısmını kaldırarak önde metnin önce çıkmasını sağlayabilirsiniz. Düzenlemelerinize, genişlik ayarlaması ve z-index güncellenmesi uygulanmış halde devam etmek için, önceden eklenen tüm CSS kodlarını kaldırıp, aşağıdaki kodları ekleyebilirsiniz:

span.form-radio-item::before {

content: "i";

border: 1px solid #ddd;

border-radius: 50%;

padding: 1px 8px;

}





.form-radio-item {

display: flex;

flex-direction: row-reverse;

align-items: center;

}





span.form-radio-item:nth-child(1)::after {

content: "Stok yönetimi, maliyet muhasebesi, satın alma, dış ticaret ve satış gibi tüm operasyonlarda görünürlük, etkin kontrol ve veri güvenilirliği sağlar.";

border: 1px solid #ddd;

border-radius: 5px;

padding: 3px;

position: absolute;

left: 291px;

background: #fff;

display: none;

z-index: 9999;

width: 100%;

}





span.form-radio-item:nth-child(2)::after {

content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";

border: 1px solid #ddd;

border-radius: 5px;

padding: 3px;

position: absolute;

left: 291px;

background: #fff;

display: none;

z-index: 9999;

width: 100%;

}





span.form-radio-item:nth-child(3)::after {

content: "test 3 nolu secenek";

border: 1px solid #ddd;

border-radius: 5px;

padding: 3px;

position: absolute;

left: 291px;

background: #fff;

display: none;

z-index: 9999;

width: 100%;

}





span.form-radio-item:nth-child(4)::after {

content: "test 4 nolu secenek";

border: 1px solid #ddd;

border-radius: 5px;

padding: 3px;

position: absolute;

left: 291px;

background: #fff;

display: none;

z-index: 9999;

width: 100%;

}





span.form-radio-item:nth-child(5)::after {

content: "test 5 nolu secenek";

border: 1px solid #ddd;

border-radius: 5px;

padding: 3px;

position: absolute;

left: 291px;

background: #fff;

display: none;

z-index: 9999;

width: 100%;

}





span.form-radio-item:nth-child(6)::after {

content: "test 6 nolu secenek";

border: 1px solid #ddd;

border-radius: 5px;

padding: 3px;

position: absolute;

left: 291px;

background: #fff;

display: none;

z-index: 9999;

width: 100%;

}





span.form-radio-item:nth-child(7)::after {

content: "test 7 nolu secenek";

border: 1px solid #ddd;

border-radius: 5px;

padding: 3px;

position: absolute;

left: 291px;

background: #fff;

display: none;

z-index: 9999;

width: 100%;

}





span.form-radio-item:nth-child(8)::after {

content: "test 8 nolu secenek";

border: 1px solid #ddd;

border-radius: 5px;

padding: 3px;

position: absolute;

left: 291px;

background: #fff;

display: none;

z-index: 9999;

width: 100%;

}





span.form-radio-item:nth-child(9)::after {

content: "test 9 nolu secenek";

border: 1px solid #ddd;

border-radius: 5px;

padding: 3px;

position: absolute;

left: 291px;

background: #fff;

display: none;

z-index: 9999;

width: 100%;

}





span.form-radio-item:nth-child(10)::after {

content: "test 10 nolu secenek";

border: 1px solid #ddd;

border-radius: 5px;

padding: 3px;

position: absolute;

left: 291px;

background: #fff;

display: none;

z-index: 9999;

width: 100%;

}





span.form-radio-item:nth-child(11)::after {

content: "test 11 nolu secenek";

border: 1px solid #ddd;

border-radius: 5px;

padding: 3px;

position: absolute;

left: 291px;

background: #fff;

display: none;

z-index: 9999;

width: 100%;

}





span.form-radio-item:nth-child(12)::after {

content: "test 12 nolu secenek";

border: 1px solid #ddd;

border-radius: 5px;

padding: 3px;

position: absolute;

left: 291px;

background: #fff;

display: none;

z-index: 9999;

width: 100%;

}





span.form-radio-item:nth-child(1):hover::before,

span.form-radio-item:nth-child(2):hover::before,

span.form-radio-item:nth-child(3):hover::before,

span.form-radio-item:nth-child(4):hover::before,

span.form-radio-item:nth-child(5):hover::before,

span.form-radio-item:nth-child(6):hover::before,

span.form-radio-item:nth-child(7):hover::before,

span.form-radio-item:nth-child(8):hover::before,

span.form-radio-item:nth-child(9):hover::before,

span.form-radio-item:nth-child(10):hover::before,

span.form-radio-item:nth-child(11):hover::before,

span.form-radio-item:nth-child(1):hover::after,

span.form-radio-item:nth-child(2):hover::after,

span.form-radio-item:nth-child(3):hover::after,

span.form-radio-item:nth-child(4):hover::after,

span.form-radio-item:nth-child(5):hover::after,

span.form-radio-item:nth-child(6):hover::after,

span.form-radio-item:nth-child(7):hover::after,

span.form-radio-item:nth-child(8):hover::after,

span.form-radio-item:nth-child(9):hover::after,

span.form-radio-item:nth-child(10):hover::after,

span.form-radio-item:nth-child(11):hover::after {

display: block !important;





}

Daha fazla yardıma gereksinim duymanız halinde lütfen bizimle iletişime geçmekten çekinmeyin.