[ask]rounded corner cgriedView

sakaw · October 5, 2011, 3:10am

halo

gmn si caranya bikin cgriedview ujung2nya jadi round…saya coba ubah di cssnya ga ngaruh





.grid-view table.items

{

	background: white;

	border-collapse: collapse;

	width: 100%;

	border: 1px #D0E3EF thin;

	color:#414141;

	-moz-border-radius: 1em 4em 1em 4em;

border-radius: 1em 4em 1em 4em;

}

saya tes kode seperti ini ga bisa jalan…knp y??

mohon pencerahanya

ahmadroni · October 5, 2011, 8:22am

coba di direktory asset gan di rimove dulu… karena semua file dibuat temporari dulu disana, kemungkinan masih load file yang lama…!

sakaw · October 5, 2011, 8:39am

saya langsung ubah yang asset punya gan…hohoho

nk913 · October 7, 2011, 3:23am

Kalo begini gimana gan? Diaplikasikan ke table.items




Yii::app()->clientScript->registerCss(uniqid(),"

.grid-view table.items thead tr th:first-child{

  -webkit-border-top-left-radius: 4px;

  -moz-border-radius-topleft: 4px;

  border-top-left-radius: 4px;

}

.grid-view table.items thead tr th:last-child{

  -webkit-border-top-right-radius: 4px;

  -moz-border-radius-topright: 4px;

  border-top-right-radius: 4px;

}

.grid-view table.items tbody tr:last-child td:first-child{

  -webkit-border-bottom-left-radius: 4px;

  -moz-border-radius-bottomleft: 4px;

  border-bottom-left-radius: 4px;  


}

.grid-view table.items tr:last-child td:last-child{

  -webkit-border-bottom-right-radius: 4px;

  -moz-border-radius-bottomright: 4px;

  border-bottom-right-radius: 4px;

}

");

Diaplikasikan ke .grid-view:




Yii::app()->clientScript->registerCss(uniqid(),"

.grid-view{

  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  border-radius: 4px;

}

");

sakaw · October 7, 2011, 3:37am

wah tq gan…tp gmn caranya biar bordernya ikut round y??

2115

border.JPG

trus yang bawahnya ga bisa bulat ujungnya…

ternyata pas ilangin border-collapse jadi bisa…

border-collapse itu fungsinya buat apa y?table saya jadi agak renggang pas ilangin itu

nk913 · October 7, 2011, 3:55am

Begini mungkin mas




Yii::app()->clientScript->registerCss(uniqid(),"

.grid-view table.items thead tr th{

  border-top:5px solid red!important;

}

.grid-view table.items tbody tr:last-child td{

  border-bottom:5px solid red!important;

}

.grid-view table.items td:first-child{

  border-left:5px solid red!important;

}

.grid-view table.items td:last-child{

  border-right:5px solid red!important;

}

.grid-view table.items thead tr th:first-child{

  -webkit-border-top-left-radius: 4px;

  -moz-border-radius-topleft: 4px;

  border-top-left-radius: 4px;

  border-left:5px solid red!important;

}

.grid-view table.items thead tr th:last-child{

  -webkit-border-top-right-radius: 4px;

  -moz-border-radius-topright: 4px;

  border-top-right-radius: 4px;

  border-right:5px solid red!important;

}

.grid-view table.items tbody tr:last-child td:first-child{

  -webkit-border-bottom-left-radius: 4px;

  -moz-border-radius-bottomleft: 4px;

  border-bottom-left-radius: 4px;  

  border-left:5px solid red!important;

}

.grid-view table.items tbody tr:last-child td:last-child{

  -webkit-border-bottom-right-radius: 4px;

  -moz-border-radius-bottomright: 4px;

  border-bottom-right-radius: 4px;

  border-right:5px solid red!important;

}


");

peterjkambey · October 7, 2011, 4:05am

sudah coba extension jqgrid? http://www.yiiframework.com/extension/jqgrid/

daripada pusing2 nge-CSS?

or integrate dengan current jqueryui…

http://www.yiiframework.com/extension/eziiui

theme GridView-nya mengikuti theme jqueryui yang kita gunakan…

sakaw · October 7, 2011, 4:06am

udah bisa gan tp jadinya begini…agak renggang gara2 saya hilangin


border-collapse: collapse;

gmn ngakalin ny gan supaya ga renggan y??

2116

border.JPG

nk913 · October 7, 2011, 4:10am

Kenapa diilangin border-collapse nya???

sakaw · October 7, 2011, 4:29am

kl ga di ilangin bordernya tetep aja gt bordernya…ga mau round

ni code css saya





.grid-view table.items

{

	background: white;

	border-collapse: collapse;

	width: 100%;

	

	border: #D0E3EF thin;

	color:#414141;

	box-shadow: 3px 3px 2px #888888;

	 border-top-right-radius: 12px;

	   border-top-left-radius: 12px;

	 	border-bottom-left-radius: 11px;  

		   border-bottom-right-radius: 11px;

	

}

.grid-view table.items thead tr th:first-child{

  -webkit-border-top-left-radius: 10px;

  -moz-border-radius-topleft: 10px;

  border-top-left-radius: 10px;

}

.grid-view table.items thead tr th:last-child{

  -webkit-border-top-right-radius: 10px;

  -moz-border-radius-topright: 10px;

  border-top-right-radius: 10px;

}

.grid-view table.items tbody tr:last-child td:first-child{

  -webkit-border-bottom-left-radius: 10px;

  -moz-border-radius-bottomleft: 10px;

  border-bottom-left-radius: 10px;  

  border-left:5px solid red!important;

}

.grid-view table.items tr:last-child td:last-child{

  -webkit-border-bottom-right-radius: 10px;

  -moz-border-radius-bottomright: 10px;

  border-bottom-right-radius: 10px; 


}

jadinya seperti ini

2117

untitled2.JPG

nk913 · October 7, 2011, 4:40am

.grid-view table.items

{

    background: white;


    border-collapse: collapse;


    width: 100%;


    


    [s]border: #D0E3EF thin;[/s]


    color:#414141;


    box-shadow: 3px 3px 2px #888888;


     [s]border-top-right-radius: 12px;


       border-top-left-radius: 12px;


            border-bottom-left-radius: 11px;  


               border-bottom-right-radius: 11px;[/s]

}

tambahin css saya sebelumnya

sakaw · October 7, 2011, 4:53am

nk913:

.grid-view table.items

{

    background: white;


    border-collapse: collapse;


    width: 100%;


    


    [s]border: #D0E3EF thin;[/s]


    color:#414141;


    box-shadow: 3px 3px 2px #888888;


 	[s]border-top-right-radius: 12px;


   	border-top-left-radius: 12px;


            border-bottom-left-radius: 11px;  


           	border-bottom-right-radius: 11px;[/s]

}

tambahin css saya sebelumnya





.grid-view table.items

{

	background: white;

	border-collapse: collapse;

	width: 100%;

	

	color:#414141;

	box-shadow: 3px 3px 2px #888888;

	

	

}

.grid-view table.items thead tr th:first-child{

  -webkit-border-top-left-radius: 10px;

  -moz-border-radius-topleft: 10px;

  border-top-left-radius: 10px;

}

.grid-view table.items thead tr th:last-child{

  -webkit-border-top-right-radius: 10px;

  -moz-border-radius-topright: 10px;

  border-top-right-radius: 10px;

}

.grid-view table.items tbody tr:last-child td:first-child{

  -webkit-border-bottom-left-radius: 10px;

  -moz-border-radius-bottomleft: 10px;

  border-bottom-left-radius: 10px;  

}

.grid-view table.items tr:last-child td:last-child{

  -webkit-border-bottom-right-radius: 10px;

  -moz-border-radius-bottomright: 10px;

  border-bottom-right-radius: 10px; 


}


.grid-view{

  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  border-radius: 10px;

}

hasilnya

2118

untitled3.JPG

dy kalau yang ujung bawah kanan ma kiri ga mau round itu knp y?

aqge · October 8, 2011, 12:30pm

saran gan, dari mana ngoprek asset, metode ane gini gan,

bikin div yang pake id,

trus bikin css yang cascade




<div id="myround">

<?php cgridviewnya ?>

</div>

nah setelah begini , agan bebas overwrite cssnya tanpa mengubah corenya.

misalnya




#myround .grid-view table.items{


}

dan seterusnya…