Info Box - Ölçü Düzenleme

  • emrecankocak
    6 Nisan 2022 02:28 tarihinde soruldu

    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:


    1649226473 624d32e92c54f Screenshot 10


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

    https://form.jotform.com/220871679871974


    Cok teşekkürler,

    Cagla

    Page URL: https://form.jotform.com/220871679871974
  • Rıdvan Quality Assurance Engineer
    8 Nisan 2022 08:30 tarihinde yanıtlandı

    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:

    1649420410 6250287a33cc1 Screen Shot 202 Screenshot 10

    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.