Arkadaşlar merhaba,
UniGui Mobil DBGrid yazı fontları nasıl küçültülüyor?
Yazı karakterini biraz küçülte bilirsem kısıtlı olan ekrana daha çok bilgi sığdırabilirim.
UnimDBGrid1 -> UniEvents ->
beforeInit=function beforeInit(sender, config)
{
config.cls="gridadi"; config.itemHeight = 40; config.headerContainer = {height: 30};
}
Sonra ;
UniServerModule -> CustomCSS ->
.gridadi .x-grid-column {
border-style: solid;
border-width: 1px 1px 1;
height: 40px;
line-height: 30px;
padding: 0 8px;
vertical-align: middle;
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
text-align: left;
background-color: #CD5C5C;
color: white;
}
.gridadi .x-grid-cell {
height: 39px;
line-height: 40px !important;
font-family: 'Arial', Arial, Helvetica, sans-serif;
font-size: 14pt;
color: black;
border-collapse: collapse;
border-style: solid;
border-width: 1px 1px 1;
}
.gridadi .x-grid-row {background-color: #FFFAFA;}
.gridadi .x-grid-row.x-grid-item-odd {background-color:#F0FFF0;}
.gridadi .x-grid-row.x-item-selected{background-color:#87CEEB}
İstersen CustomCSS ye bişey yazmadan kodları .css olarak kaydedip CustomFiles de yolunu gösterebilirsin bu şekilde program dışından da görsele müdahale edebilirsin. (files/css/gridadi.css)
(11-09-2018, Saat: 09:31)elixir84 Adlı Kullanıcıdan Alıntı: [ -> ]UnimDBGrid1 -> UniEvents ->
beforeInit=function beforeInit(sender, config)
{
config.cls="gridadi"; config.itemHeight = 40; config.headerContainer = {height: 30};
}
Sonra ;
UniServerModule -> CustomCSS ->
.gridadi .x-grid-column {
border-style: solid;
border-width: 1px 1px 1;
height: 40px;
line-height: 30px;
padding: 0 8px;
vertical-align: middle;
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
text-align: left;
background-color: #CD5C5C;
color: white;
}
.gridadi .x-grid-cell {
height: 39px;
line-height: 40px !important;
font-family: 'Arial', Arial, Helvetica, sans-serif;
font-size: 14pt;
color: black;
border-collapse: collapse;
border-style: solid;
border-width: 1px 1px 1;
}
.gridadi .x-grid-row {background-color: #FFFAFA;}
.gridadi .x-grid-row.x-grid-item-odd {background-color:#F0FFF0;}
.gridadi .x-grid-row.x-item-selected{background-color:#87CEEB}
İstersen CustomCSS ye bişey yazmadan kodları .css olarak kaydedip CustomFiles de yolunu gösterebilirsin bu şekilde program dışından da görsele müdahale edebilirsin. (files/css/gridadi.css)
Dostum çok sağol. Harici css dosya olarak yapamadım ama diğer şekilde tamam.
@
selchuk
.gridadi .x-grid-column {
border-style: solid;
border-width: 1px 1px 1;
height: 40px;
line-height: 30px;
padding: 0 8px;
vertical-align: middle;
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
text-align: left;
background-color: #CD5C5C;
color: white;
}
.gridadi .x-grid-cell {
height: 39px;
line-height: 40px !important;
font-family: 'Arial', Arial, Helvetica, sans-serif;
font-size: 14pt;
color: black;
border-collapse: collapse;
border-style: solid;
border-width: 1px 1px 1;
}
.gridadi .x-grid-row {background-color: #FFFAFA;}
.gridadi .x-grid-row.x-grid-item-odd {background-color:#F0FFF0;}
.gridadi .x-grid-row.x-item-selected{background-color:#87CEEB}
bunu gridadi.css olarak kaydet projeni çalıştırdığın yerdeki files klasöründeki css klasörüne kopyala
CustomFiles içine
files/css/gridadi.css yaz çalışır.
(11-09-2018, Saat: 16:44)elixir84 Adlı Kullanıcıdan Alıntı: [ -> ]@selchuk
.gridadi .x-grid-column {
border-style: solid;
border-width: 1px 1px 1;
height: 40px;
line-height: 30px;
padding: 0 8px;
vertical-align: middle;
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
text-align: left;
background-color: #CD5C5C;
color: white;
}
.gridadi .x-grid-cell {
height: 39px;
line-height: 40px !important;
font-family: 'Arial', Arial, Helvetica, sans-serif;
font-size: 14pt;
color: black;
border-collapse: collapse;
border-style: solid;
border-width: 1px 1px 1;
}
.gridadi .x-grid-row {background-color: #FFFAFA;}
.gridadi .x-grid-row.x-grid-item-odd {background-color:#F0FFF0;}
.gridadi .x-grid-row.x-item-selected{background-color:#87CEEB}
bunu gridadi.css olarak kaydet projeni çalıştırdığın yerdeki files klasöründeki css klasörüne kopyala CustomFiles içine files/css/gridadi.css yaz çalışır.
Eyvallah dostum, şimdi oldu.
Bir başka sorunumda kolon boyutlarını ayarlamak. Örnek UnimDbGrid1 'de birinci kolon 80, ikinci 200, üçüncü 150 px gibi.
Sütun boyutlandırmasını css ile yapabiliyormuyuz?
(11-09-2018, Saat: 16:44)elixir84 Adlı Kullanıcıdan Alıntı: [ -> ]@selchuk
.gridadi .x-grid-column {
border-style: solid;
border-width: 1px 1px 1;
height: 40px;
line-height: 30px;
padding: 0 8px;
vertical-align: middle;
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
text-align: left;
background-color: #CD5C5C;
color: white;
}
.gridadi .x-grid-cell {
height: 39px;
line-height: 40px !important;
font-family: 'Arial', Arial, Helvetica, sans-serif;
font-size: 14pt;
color: black;
border-collapse: collapse;
border-style: solid;
border-width: 1px 1px 1;
}
.gridadi .x-grid-row {background-color: #FFFAFA;}
.gridadi .x-grid-row.x-grid-item-odd {background-color:#F0FFF0;}
.gridadi .x-grid-row.x-item-selected{background-color:#87CEEB}
bunu gridadi.css olarak kaydet projeni çalıştırdığın yerdeki files klasöründeki css klasörüne kopyala CustomFiles içine files/css/gridadi.css yaz çalışır.
Dostum ufak bir problem daha oluştu. Yada yeni ihtiyaç oldu.
Label, Edit, buton vb. bileşenlerin yazı fontlarını css 'te nasıl küçülteceğiz.
Yukarıdaki örnekte .gridadi .x-grid-cell { bölümündeki x-grid-cell 'i nerden biliyoruz, yeni bir nesne kodlarını css'te nasıl tanımlayacağız?
(09-10-2018, Saat: 16:52)elixir84 Adlı Kullanıcıdan Alıntı: [ -> ]@selchuk
CSS için
Buton veya Label UniEvents->beforeInit
Kod:
function beforeInit(sender, config)
{
config.cls='girisbtn';
}
css si
Kod:
.girisbtn
{
background:#1892d1 !important;
color:#fff !important;
-webkit-transition: background 0.5s ease-in-out;
transition: background 0.5s ease-in-out;
}
.girisbtn:hover
{
background:#828282 !important;
-webkit-transition: background 0.5s ease-in-out;
transition: background 0.5s ease-in-out;
}
CSS kullanmadan.
Buton veya Label UniEvents->beforeInit
Kod:
function beforeInit(sender, config)
{
config.style = "text-align:center; font-size: 12px; font-weight: bold; color:Black;";
}
Css kullanmadan yaptım ama css ile denemem gene olmadı?
Hem farklı css hemde dbgrid için hazırladığım css dosyasının altına ekledim. Bir türlü Label 'ların yazı karakterlerini css içinden küçültemedim. Css içinde label kodlarını aşağıdaki gibi sadeleştirdim ney yanlış bulamadım bir türlü
.LblKod {
font-family: 'Arial', Arial, Helvetica, sans-serif;
font-size: 10pt;
color: black;
}
.LblUnvan {
font-family: 'Arial', Arial, Helvetica, sans-serif;
font-size: 10pt;
color: black;
}
Not: Aynı css dosyası içerisinde dbgrid koları da var onlar gayet güzel.
(11-10-2018, Saat: 16:13)selchuk Adlı Kullanıcıdan Alıntı: [ -> ] (09-10-2018, Saat: 16:52)elixir84 Adlı Kullanıcıdan Alıntı: [ -> ]@selchuk
CSS için
Buton veya Label UniEvents->beforeInit
Kod:
function beforeInit(sender, config)
{
config.cls='girisbtn';
}
css si
Kod:
.girisbtn
{
background:#1892d1 !important;
color:#fff !important;
-webkit-transition: background 0.5s ease-in-out;
transition: background 0.5s ease-in-out;
}
.girisbtn:hover
{
background:#828282 !important;
-webkit-transition: background 0.5s ease-in-out;
transition: background 0.5s ease-in-out;
}
CSS kullanmadan.
Buton veya Label UniEvents->beforeInit
Kod:
function beforeInit(sender, config)
{
config.style = "text-align:center; font-size: 12px; font-weight: bold; color:Black;";
}
Css kullanmadan yaptım ama css ile denemem gene olmadı?
Hem farklı css hemde dbgrid için hazırladığım css dosyasının altına ekledim. Bir türlü Label 'ların yazı karakterlerini css içinden küçültemedim. Css içinde label kodlarını aşağıdaki gibi sadeleştirdim ney yanlış bulamadım bir türlü
.LblKod {
font-family: 'Arial', Arial, Helvetica, sans-serif;
font-size: 10pt;
color: black;
}
.LblUnvan {
font-family: 'Arial', Arial, Helvetica, sans-serif;
font-size: 10pt;
color: black;
}
Not: Aynı css dosyası içerisinde dbgrid koları da var onlar gayet güzel.
css de yaptığın bir değişikliği görebilmen için tarayıcı ön belleğini temizlemen gerekebilir. chrome kullanıyorsan shift + f5 le sayfayı yenile.
