alt textMerhaba. Tablonun cellindeki yazıyı vertical yapıyorum ama o cellin altındaki cell genişlediyi zaman yazı cell-den dışarı kaçıyor.rowspan-de cell daha da fazla genişliyor ve cell-den dışarı kaçıyor. ve rotate olduğu zaman wrap yapmakda olmuyor(( dinamik bir rotate nasıl yapa bilirim.

CSS kod:

 /* Styles for rotateTableCellContent plugin*/
table div.rotated {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
     writing-mode:tb-rl;
     white-space: nowrap;
}

thead td {
   vertical-align: middle;
}

table .vertical {
    white-space: pre-line;
}

jQuery kod:

 (function ($) {
 $.fn.rotateTableCellContent = function (options) {
 /*
 Version 1.0
 7/2011
 Written by David Votrubec (davidjs.com) and
 Michal Tehnik (@Mictech) for ST-Software.com
 */

    var cssClass = ((options) ? options.className : false) || "vertical";

    var cellsToRotate = $('.' + cssClass, this);

    var betterCells = [];
    cellsToRotate.each(function () {
        var cell = $(this)
      , newText = cell.text()
      , height = cell.height()
      , width = cell.width()
      , newDiv = $('<div>', { height: width, width: height })
      , newInnerDiv = $('<div>', { text: newText, 'class': 'rotated' });

        newDiv.append(newInnerDiv);

        betterCells.push(newDiv);
    });

    cellsToRotate.each(function (i) {
        $(this).html(betterCells[i]);
    });
};
     })(jQuery);

Teşekkürler

soruldu: 22 Oca '13, 12:39

Serxan's gravatar image

Serxan
51691106107
cevap kabul oranı: 46%

değiştirildi: 23 Oca '13, 01:09

2

Birkaç satır kod paylaşsanız daha açıklayıcı olur.

(22 Oca '13, 12:52) AliRıza Adıyahşi ♦ AliR%C4%B1za%20Ad%C4%B1yah%C5%9Fi's gravatar image

css içinde width ve height değerleri için absoulte yada fixed (100px,50px) gibi değerler yerine %100 gibi değerler kullanırsanız problem yaşamazsınız.

(23 Oca '13, 01:09) Turgay Can Turgay%20Can's gravatar image

Css deki

table .vertical {
    white-space: pre-line;
}

Satırından kaynaklanıyor.

table .vertical {
    white-space: nowrap;
}

Şeklinde değiştirirseniz sorun çıkmaz...

Çalışan Örnek

Hatanın sebebi:

Jquery kodlarınızdaki

cellsToRotate.each(function () {
    var cell = $(this),
        newText = cell.text(),
        height = cell.height(),
        width = cell.width(),
        newDiv = $('<div>', {
            height: width,
            width: height
        }),
        newInnerDiv = $('<div>', {
            text: newText,
                'class': 'rotated'
        });

    newDiv.append(newInnerDiv);

    betterCells.push(newDiv);
});

aşağıdaki satırlarda hücre yukseklik = div genişlik ve hücre genişlik = div yüksek gibi bir atama yapılıyor.

newDiv = $('<div>', {
    height: width,
    width: height
}),

Örneğin tablodaki yazı satır atlarsa kısa olan yazının uzunlugu hesaba katılmadıgından yanlıs hesaplamıs oluyor. Yani

// white-space : pre-line;
--------------
| deneme       |   //10px
| denemeyazi   |   //15px; toplamda cell gemişlik = 15px div yukseklik = 15px
--------------

// white-space : nowrap;
---------------------
| deneme denemeyazi | //26px  toplamda cell genişlik = 26px div yükseklik = 26px
---------------------

hücre için satır atlama var ama div için yok bundan dolayı ya hücre için satır atlatmayacaksınız ya da div için satır atlatacaksınız...

NOT:html kodlarınızıda paylaşsanız iyi olurdu. Verdiginiz css kodları içerisindeki referanstan örneğe ulaştım. soruyu daha açıklayıcı ve kodlarla beraber sorarsanız hem daha hızlı cevap alırsınız hemde cevap verecek olanların fazla zamanını almaz.

permanent link

cevaplandı: 23 Oca '13, 01:25

AliR%C4%B1za%20Ad%C4%B1yah%C5%9Fi's gravatar image

AliRıza Adıyahşi ♦
7.9k146288
cevap kabul oranı: 44%

değiştirildi: 23 Oca '13, 02:03

çok teşekkür ederim.peki wrap nasıl yapa bilirim.yani mesela ise yazı cell-de satrın sonuna geldiyi zaman aşağıya düşsün.yani
kullanmadan

(23 Oca '13, 03:31) Serxan Serxan's gravatar image

Bunu mu demek istiyorsunuz: http://jsfiddle.net/sG5Sb/12/

(23 Oca '13, 03:36) AliRıza Adıyahşi ♦ AliR%C4%B1za%20Ad%C4%B1yah%C5%9Fi's gravatar image

mesela verdiyiniz örnekte dddddddddddddddddddddddler tam satır olarak yazılmış.ben istiyorum ki, bunu ters cevirdiğimiz zaman alınacak sonuc Dummy text dddddd| dddddddddddddddddd| dddddddddddddddddd| dddddddddd| http://www.share.az/n4turc6jxwnl/example.jpg.html

(23 Oca '13, 10:59) Serxan Serxan's gravatar image
Cevabınız
toggle preview

Bu soruyu takip et

E-Posta üzerinden:

Üyelik girişi yaptıktan sonra abonelik işlemlerini yapabilirsiniz

RSS üzerinden:

Cevaplar

Cevaplar ve Yorumlar

Yazı Formatlama

  • *italic* ya da _italic_
  • **bold** ya da __bold__
  • link:[text](http://url.com/ "başlık")
  • resim?![alt text](/path/img.jpg "başlık")
  • liste: 1. Foo 2. Bar
  • temel HTML etiketleri de kullanılabilir

Bu sorunun etiketleri:

×72
×30
×8

Soruldu: 22 Oca '13, 12:39

Görüntüleme: 3,956 kez

Son güncelleme: 23 Oca '13, 10:59

powered by BitNami OSQA