═══════════════════════════════════════════════════════════════════════════ */
.row {
display: flex !important;
flex-direction: column !important;
margin-bottom: 10px !important;
width: 100% !important;
float: none !important;
padding: 0px !important;
}
/* --- 3.1 TURKVET Sayfa Yapısı ---
.inputrow, .requiredlabel, .formLabel, .formText pattern'i */
.row.inputrow {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
margin-bottom: 12px !important;
}
.row > label,
.row > label.requiredlabel {
display: block !important;
width: 100% !important;
float: none !important;
margin-bottom: 4px !important;
text-align: left !important;
font-size: 13px !important;
}
.row > .column,
.row > .multicolumn {
display: block !important;
width: 100% !important;
float: none !important;
margin-left: 0 !important;
padding-left: 0 !important;
}
/* multicolumn içindeki yan yana kontroller (ör: telefon + doğrula butonu) */
.multicolumn {
width: 100% !important;
}
.multicolumn > .row.inputrow {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 8px !important;
align-items: center !important;
}
.multicolumn > .row.inputrow > .riSingle,
.multicolumn > .row.inputrow > span[class*="RadInput"] {
flex: 1 !important;
min-width: 0 !important;
}
.multicolumn > .row.inputrow > .RadButton,
.multicolumn > .row.inputrow > a.RadButton {
flex-shrink: 0 !important;
}
/* cbcolumn — checkbox ile label yan yana */
.cbcolumn,
.column.cbcolumn {
width: 100% !important;
}
.Onecolumn,
.one_column,
div[class*="column"]:not(.rcbInputCell):not(.rcbArrowCell) {
width: 100% !important;
float: none !important;
}
/* --- 3.2 TURKVET Buton Grupları --- */
.turkvetbtndiv {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
padding: 10px 0 !important;
width: 100% !important;
}
.turkvetbtndiv .RadButton,
.turkvetbtndiv a.RadButton {
flex: 1 !important;
min-width: 80px !important;
text-align: center !important;
}
/* --- 3.3 Arama butonları (input type=image) ---
Search.png ikonu olan td'ler */
input[type="image"] {
width: 32px !important;
height: 32px !important;
min-width: 44px !important; /* Touch target */
min-height: 44px !important;
padding: 6px !important;
object-fit: contain !important;
}
/* --- 3.4 Uyarı Mesajları (.warningCss) --- */
.warningCss {
width: 100% !important;
box-sizing: border-box !important;
}
.notifiMessageCss {
font-size: 13px !important;
line-height: 1.4 !important;
word-wrap: break-word !important;
}
/* --- 3.5 RadListBox (Meslek Seçimi gibi çift liste) --- */
.listBoxCss {
width: 100% !important;
overflow-x: visible !important;
}
.listBoxCss > .column {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
width: 100% !important;
}
.RadListBox,
div[class*="RadListBox"] {
width: 100% !important;
max-width: 100% !important;
height: 150px !important; /* Mobilde daha kompakt */
box-sizing: border-box !important;
}
/* ListBox transfer butonları — yataydan dikeye */
.RadListBox .rlbButtonAreaRight,
.RadListBox table.rlbButtonAreaRight {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
width: 100% !important;
margin: 0 !important;
}
.RadListBox table.rlbButtonAreaRight td {
display: flex !important;
flex-direction: row !important;
gap: 4px !important;
}
.RadListBox .rlbGroup {
margin-right: 0 !important;
width: 100% !important;
}
/* --- 3.6 formLabel / formText class'ları --- */
.formLabel {
display: inline-block !important;
max-width: 100% !important;
word-wrap: break-word !important;
}
.formText {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
BÖLÜM 4: FORM KONTROL GENİŞLİKLERİ
Telerik + TBS kontrolleri inline style ile sabit genişlik üretiyor.
JS ile override edilemeyenler için CSS !important kullanılır.
═══════════════════════════════════════════════════════════════════════════ */
/* --- 4.1 Text Input'lar --- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* --- 4.2 Telerik TextField (RadTextBox) --- */
.riSingle, /* RadInput wrapper */
.riTextBox, /* RadInput textbox */
.RadInput,
.RadInput_Default,
.RadInput .riTextBox,
span[class*="RadInput"] {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* --- 4.3 Telerik RadComboBox --- */
.RadComboBox,
.RadComboBox_Default,
.RadComboBox .rcbInput,
.RadComboBox table,
div[id*="RadComboBox"],
span[class*="RadComboBox"],
.rcbInner {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* ComboBox iç table'ını bozmamak için özel kural */
.RadComboBox table,
.RadComboBox table td {
display: table !important;
}
.RadComboBox table td {
display: table-cell !important;
}
/* --- 4.4 Telerik RadDatePicker --- */
.RadPicker,
.RadPicker_Default,
div[class*="RadPicker"],
.rcCalPopup,
.RadPicker .riTextBox {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* DatePicker iç yapısını koru */
.RadPicker table {
display: table !important;
width: 100% !important;
}
.RadPicker table td {
display: table-cell !important;
}
/* --- 4.5 Telerik RadNumericTextBox --- */
.RadInput_Default.radNumericTextBox,
.rntSpinButtons {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* --- 4.6 TBS Button --- */
.RadButton,
.rbPrimaryIcon,
input[type="submit"],
a.RadButton {
/*min-height: 40px !important;*/
min-width: 44px !important; /* Touch target minimum */
}
/* Kaydet butonları */
#saveButtons,
#saveButtons2,
div[id*="saveButtons"] {
text-align: center !important;
padding: 10px 0 !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
BÖLÜM 5: FIELDSET & LEGEND
═══════════════════════════════════════════════════════════════════════════ */
fieldset {
width: 100% !important;
min-width: 0 !important;
padding: 8px !important;
margin: 5px 0 !important;
box-sizing: border-box !important;
padding: 0px !important;
}
legend {
font-size: 14px !important;
white-space: normal !important;
word-wrap: break-word !important;
}
/* Fieldset içindeki tableHizala gibi margin override'ları */
.tableHizala {
margin-left: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
BÖLÜM 6: TELERIK RADGRID — YATAY SCROLL
Grid'leri bozmadan yatay kaydırılabilir hale getirir.
═══════════════════════════════════════════════════════════════════════════ */
.RadGrid,
.RadGrid_Default,
div[class*="RadGrid"] {
width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* Grid iç yapısını KORUMAK için — table→block dönüşümü UYGULANMAZ */
.RadGrid table,
.RadGrid .rgMasterTable,
.rgMasterTable,
.RadGrid table tbody,
.RadGrid table tr,
.RadGrid table td,
.RadGrid table th,
.rgHeader,
.rgRow,
.rgAltRow,
.rgPager,
.rgCommandRow {
/* Bunlara display:block UYGULAMIYORUZ, tablo yapısı korunur */
display: revert !important;
}
/* Grid minimum genişlik — yatay scroll'u tetiklemek için */
.rgMasterTable,
.RadGrid .rgMasterTable {
min-width: 600px !important;
}
/* Grid scroll ipucu */
.RadGrid::after {
content: "← Tablo kaydırılabilir →";
display: block;
text-align: center;
font-size: 11px;
color: #888;
padding: 4px;
background: #f5f5f5;
border-top: 1px solid #ddd;
}
/* ═══════════════════════════════════════════════════════════════════════════
BÖLÜM 7: TELERIK RADTABSTRIP
Sekmeleri mobilde yatay scroll veya wrap ile gösterir.
═══════════════════════════════════════════════════════════════════════════ */
.RadTabStrip,
.RadTabStrip_Default,
.rtsUL {
width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
white-space: nowrap !important;
}
.rtsLI,
.RadTabStrip .rtsLink {
font-size: 12px !important;
padding: 8px 10px !important;
}
/* RadMultiPage */
.RadMultiPage {
width: 100% !important;
overflow-x: hidden !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
BÖLÜM 8: TELERIK RADWINDOW / RADNOTIFICATION
Modal pencereler mobilde tam ekrana yakın açılır.
═══════════════════════════════════════════════════════════════════════════ */
.RadWindow,
.RadWindow_Default,
.rwWindowContent {
width: 95vw !important;
max-width: 95vw !important;
left: 2.5vw !important;
min-width: 0 !important;
}
.RadNotification {
width: 90vw !important;
max-width: 90vw !important;
left: 5vw !important;
}
/* Loading window */
#RadWindowWrapper_ctl00_ctl00_Wloading,
div[id*="Wloading"] {
width: 90vw !important;
left: 5vw !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
BÖLÜM 9: TELERIK RADFORMDECORATOR
Dekore edilmiş checkbox/radio butonları mobil dostu boyutlara getirir.
═══════════════════════════════════════════════════════════════════════════ */
.RadFormDecorator .rfdCheckbox,
.RadFormDecorator .rfdRadio {
min-width: 20px !important;
min-height: 20px !important;
}
/* RadioButtonList / CheckBoxList — yatay düzeni mobilde dikey yap.
ASP.NET RadioButtonList ve CheckBoxList kontrollerini
olarak
render eder. Bu table'larda class OLMAZ, sadece ID bulunur.
Bu yüzden yapısal seçicilerle hedefliyoruz:
.column içindeki, radio/checkbox input içeren table'lar. */
/* Yöntem 1: Class-bazlı (varsa) */
.rblHorizontal,
table[class*="RadioButtonList"],
span[class*="RadioButtonList"],
table[class*="CheckBoxList"],
span[class*="CheckBoxList"] {
display: block !important;
width: 100% !important;
}
.rblHorizontal td,
table[class*="RadioButtonList"] td,
table[class*="CheckBoxList"] td {
display: block !important;
padding: 6px 0 !important;
}
/* Yöntem 2: Yapısal seçici — .column veya .row içindeki table
(RadioButtonList/CheckBoxList class olmadan render edilenler) */
.column > table,
.row > table,
.row > div > table {
display: block !important;
width: 100% !important;
}
.column > table > tbody,
.row > table > tbody,
.row > div > table > tbody {
display: block !important;
width: 100% !important;
}
.column > table > tbody > tr,
.row > table > tbody > tr,
.row > div > table > tbody > tr {
display: flex !important;
flex-wrap: wrap !important;
width: 100% !important;
gap: 4px 0 !important;
}
.column > table > tbody > tr > td,
.row > table > tbody > tr > td,
.row > div > table > tbody > tr > td {
display: block !important;
width: 100% !important;
padding: 6px 4px !important;
white-space: normal !important;
}
/* Radio ve Checkbox input'ların kendisi — touch-friendly boyut */
.column > table input[type="radio"],
.column > table input[type="checkbox"],
.row > table input[type="radio"],
.row > table input[type="checkbox"] {
width: 20px !important;
height: 20px !important;
margin-right: 8px !important;
vertical-align: middle !important;
cursor: pointer !important;
}
/* Radio/Checkbox label'ları — daha büyük dokunma alanı */
.column > table label,
.row > table label {
display: inline-block !important;
padding: 4px 8px !important;
font-size: 14px !important;
vertical-align: middle !important;
cursor: pointer !important;
min-height: 32px !important;
line-height: 24px !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
BÖLÜM 10: MENÜLER (Custom Menü + RadMenu + TopMenuControl)
İki farklı menü yapısı var:
A) Custom HTML menü: #main-menu .menu / .markerNormalMenu (TURKVET vb.)
B) Telerik RadMenu: .RadMenu (diğer modüller)
Mobilde her ikisi de:
- Hamburger buton ile açılır/kapanır
- Dikey accordion yapısına dönüşür
- Alt menüler tıklamayla açılır (hover yerine)
═══════════════════════════════════════════════════════════════════════════ */
/* --- 10.0 Hamburger Butonu (JS ile eklenir) --- */
.tbs-mobile-menu-toggle {
display: block !important;
position: sticky !important;
top: 0 !important;
z-index: 9999 !important;
width: 100% !important;
padding: 12px 16px !important;
background: #2c3e50 !important;
color: #fff !important;
border: none !important;
font-size: 16px !important;
font-weight: bold !important;
text-align: left !important;
cursor: pointer !important;
box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
}
.tbs-mobile-menu-toggle::before {
content: "☰ " !important;
font-size: 20px !important;
}
.tbs-mobile-menu-toggle.active {
background: #1a252f !important;
}
.tbs-mobile-menu-toggle.active::before {
content: "✕ " !important;
}
/* --- 10.1 Custom HTML Menü (#main-menu / .menuTable) --- */
/* Menü container'ları */
#view-center {
position: static !important;
}
.menuTable,
.menuTable tbody,
.menuTable tr,
.menuTable td {
display: block !important;
width: 100% !important;
}
#main-menu,
#main-menu.menu,
.menu {
width: 100% !important;
overflow: visible !important;
position: relative !important;
}
/* Ana liste — varsayılan olarak gizle, JS ile toggle */
.markerNormalMenu {
display: none !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
background: #2c3e50 !important;
max-height: 80vh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
.markerNormalMenu.tbs-menu-open {
display: block !important;
}
/* Tüm li elementleri — blok */
.markerNormalMenu li {
display: block !important;
width: 100% !important;
float: none !important;
position: relative !important;
z-index: auto !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
/* Ana seviye linkler */
.markerNormalMenu > li > a {
display: block !important;
padding: 14px 16px !important;
color: #ecf0f1 !important;
background: #2c3e50 !important;
text-decoration: none !important;
font-size: 15px !important;
font-weight: 600 !important;
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
position: relative !important;
}
.markerNormalMenu > li > a:hover,
.markerNormalMenu > li > a:active {
background: #34495e !important;
}
/* Ok ikonlarını (down.png, right.png) gizle, CSS ile değiştir */
.markerNormalMenu img.downarrowclass,
.markerNormalMenu img.rightarrowclass {
display: none !important;
}
/* Alt menüsü olan linkler — sağ tarafta ok göster */
.markerNormalMenu li > a[title] {
position: relative !important;
}
/* Alt menü olan li'ler için expand ikonu (JS ile .has-submenu eklenir) */
.markerNormalMenu li.has-submenu > a::after {
content: "▸" !important;
position: absolute !important;
right: 16px !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-size: 16px !important;
transition: transform 0.2s ease !important;
color: rgba(255,255,255,0.5) !important;
}
.markerNormalMenu li.has-submenu.tbs-submenu-open > a::after {
content: "▾" !important;
color: #3498db !important;
}
/* ─── ALT MENÜLER (tüm seviyeler) ─── */
.markerNormalMenu ul {
display: none !important;
position: static !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
background: transparent !important;
visibility: visible !important;
top: auto !important;
left: auto !important;
box-shadow: none !important;
border: none !important;
}
.markerNormalMenu li.tbs-submenu-open > ul {
display: block !important;
}
/* 1. seviye alt menü */
.markerNormalMenu > li > ul > li > a {
padding-left: 32px !important;
background: #34495e !important;
color: #bdc3c7 !important;
font-size: 14px !important;
font-weight: normal !important;
}
/* 2. seviye */
.markerNormalMenu > li > ul > li > ul > li > a {
padding-left: 48px !important;
background: #3d566e !important;
color: #a0aab4 !important;
font-size: 13px !important;
}
/* 3. seviye */
.markerNormalMenu > li > ul > li > ul > li > ul > li > a {
padding-left: 64px !important;
background: #465f7a !important;
color: #95a5a6 !important;
font-size: 13px !important;
}
/* 4+ seviye */
.markerNormalMenu ul ul ul ul a {
padding-left: 80px !important;
background: #4f6d8a !important;
font-size: 12px !important;
}
/* Tüm alt menü linkleri — genel stil */
.markerNormalMenu ul a {
display: block !important;
padding: 12px 16px !important;
color: #bdc3c7 !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
.markerNormalMenu ul a:hover,
.markerNormalMenu ul a:active {
background: rgba(52, 152, 219, 0.2) !important;
color: #fff !important;
}
/* Aktif/açık alt menünün parent'ı */
.markerNormalMenu li.tbs-submenu-open > a {
background: #1a252f !important;
color: #3498db !important;
}
/* Breadcrumbs */
#breadcrumbs {
width: 100% !important;
overflow-x: auto !important;
padding: 4px 8px !important;
}
/* --- 10.2 Telerik RadMenu --- */
.RadMenu,
.RadMenu_Default,
.rmRootGroup {
width: 100% !important;
overflow-x: auto !important;
}
.RadMenu .rmRootLink {
font-size: 12px !important;
padding: 8px 6px !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
BÖLÜM 11: GENEL YARDIMCI KURALLAR
═══════════════════════════════════════════════════════════════════════════ */
/* Taşma önleme */
* {
max-width: 100vw;
}
img {
max-width: 100% !important;
height: auto !important;
}
/* Uzun metinlerin taşmasını önle */
td, th, label, span, div, p {
word-wrap: break-word !important;
overflow-wrap: break-word !important;
padding: 0px !important;
max-width: 100% !important;
}
/* Yatay scroll çubuğunu gizle (body seviyesi) */
html {
overflow-x: hidden !important;
}
/* Footer */
footer {
width: 100% !important;
padding: 5px !important;
text-align: center !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
BÖLÜM 12: TAŞMA KORUMA (OVERFLOW PROTECTION)
overflow:hidden olan parent'ların child'ları gizlemesini önler.
Sabit genişlikli iç container'ları yakalar.
═══════════════════════════════════════════════════════════════════════════ */
/* --- 12.1 Genel overflow:hidden → visible dönüşümü ---
RadGrid hariç tüm layout container'larda overflow:hidden kaldırılır */
fieldset,
.no-box,
.box,
.box.validate,
.content,
#ContentPlaceHolder,
div[class*="container"],
div[class*="wrapper"],
div[style*="margin: 0px auto"],
div[style*="margin:0px auto"] {
overflow: visible !important;
overflow-x: visible !important;
}
/* --- 12.2 Telerik Panel/AjaxPanel overflow koruması ---
RadAjaxPanel ve RadPageView çoğu zaman overflow:hidden üretir */
.RadAjaxPanel,
div[id*="AjaxPanel"],
div[id*="RadAjaxPanel"],
.RadMultiPage,
.RadPageView,
div[id*="RadPageView"],
div[id*="RadMultiPage"] {
overflow: visible !important;
overflow-x: visible !important;
width: 100% !important;
max-width: 100% !important;
}
/* --- 12.3 Sabit genişlikli inline style koruması ---
CSS attribute selector ile yaygın sabit genişlikleri yakala */
div[style*="width: 800"],
div[style*="width:800"],
div[style*="width: 900"],
div[style*="width:900"],
div[style*="width: 1000"],
div[style*="width:1000"],
div[style*="width: 1024"],
div[style*="width:1024"],
div[style*="width: 1100"],
div[style*="width:1100"],
div[style*="width: 1200"],
div[style*="width:1200"],
table[style*="width: 800"],
table[style*="width:800"],
table[style*="width: 900"],
table[style*="width:900"],
table[style*="width: 1000"],
table[style*="width:1000"],
span[style*="width: 500"],
span[style*="width:500"],
span[style*="width: 600"],
span[style*="width:600"] {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* --- 12.4 position:absolute ile ekran dışına düşenler ---
RadGrid ve RadWindow HARİÇ */
div:not(.RadGrid):not([class*="RadWindow"]):not([class*="rwWindow"]) {
/* Absolute pozisyonlu genel div'leri relative yap
Sadece layout div'leri için — class'sız veya layout class'lı olanlar */
}
/* Telerik ComboBox dropdown koruması */
.rcbSlide,
.RadComboBoxDropDown,
.RadComboBoxDropDown_Default {
max-width: 95vw !important;
}
/* Telerik Menu alt menü taşması */
.rmGroup,
.rmSlide,
.RadMenu .rmVertical {
max-width: 95vw !important;
}
/* --- 12.5 "Taşan ama scroll'u olmayan" için son çare ---
Ana form wrapper'ında yatay scroll'u garanti et */
#form1 > div {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* body scroll fallback */
body {
overflow-x: auto !important;
}
}