Django


1221 浏览 5 years, 9 months

9.1 class media

版权声明: 转载请注明出处 http://www.codingsoho.com/

列表

指定后台的css样式文件

    class Media:
        css = {
            "all": ("css/model_admin.css","css/equipment.css")
        }
        js = ("js/jquery.min.js","js/model_admin.js",)
常见样式
表格的换行
/* wrap set */
#changelist table thead th {
    word-wrap: break-word;               /* 在长单词或 URL 地址内部进行换行。*/
    word-break: break-all;               /* 允许在单词内换行。*/
    white-space: normal;                 /* 默认。空白会被浏览器忽略。*/
    /*overflow: auto;*/                  /* hidden */
    text-align: center;
}

#changelist table tbody td, 
#changelist table tbody th {
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
    /*overflow: auto;*/ /*hidden*/
}

#changelist table tbody th {
    white-space: normal;
}
内联widget设置

内容显示的缩进及其他样式

#changelist table tbody th{
    text-align: left;
    text-indent:10px;                  /* 内容缩进,避免顶着边框 */
}

#changelist table tbody td {
    /*border-bottom: 1px solid #CCCCCC;*/
    border-bottom: none;
    padding:0px;
    vertical-align: middle;
    text-align: center;
}

输入框

#changelist table tbody .row1 td input, .row1 td select{
    /*background-color: #EDF3FE;*/
}

/* 设置输入框背景色与背景匹配 */
#changelist table tbody tr.selected td input, 
#changelist table tbody tr.selected td select{
    background-color: #FFFFCC!important;
}

/* 让输入框内容撑满整个表格单元 */
#changelist  table tbody td input, td select{
    padding:0px!important;
    margin:0px!important;
}
#changelist  table tbody td input[type=text],
#changelist  table tbody td input[type=number],
td select{
    border-radius: 3px;
    width:100%;
    height: 30px;
    /*border: 2px solid #ccc;*/
    border: none;
    text-indent:2px;
    text-align: center;    
}

#changelist  input[type=checkbox]{
    /*padding:5px 0px 0px 0px!important;*/
}

#changelist textarea.vLargeTextField{
    max-height: 50px;
    /*max-width: 200px;*/
    width:95%;
    padding:0px;
    margin:0px;
    text-indent:5px;
}

日期

#changelist  table tbody td input.vDateField{
    width:auto;
}

表单

body.change-form  .submit-row{
    clear:both; /* incase only one fieldset and no tables */
}

body.change-form table textarea.vLargeTextField{
    max-height: 50px;
    max-width: 200px;
}

body.change-form table input.vTextField{
    max-width: 100px;
}

body.change-form table select{
    min-width: 50px;
}