locked
AjaxFileUpload Css Classes RRS feed

  • Question

  • User215209755 posted

    Is there a site with a listing of AjaxFileUpload classes?

    I can use Page Source to see what the first part is, but after you select files to upload or are uploading files the layout changes but I cannot see these divs and classes. 

    I try to make the display match my site,but the file names text is so large I can't read it

    so here for those of you who want it are the first stage of Ajax FileUpload Classes

    div.ajax__fileupload {}
    div.ajax__fileupload_dropzone { }
    span.ajax__fileupload_selectFileContainer { }
    span.ajax__fileupload_selectFileButton {}
    input[type='file'] {}
    
    div.ajax__fileupload_topFileStatus { }
    
    div.ajax__fileupload_queueContainer { }
    div.ajax__fileupload_queueContainer div.ajax__fileupload_footer { }
    
    div.ajax__fileupload_ProgressBarHolder { }
    div.ajax__fileupload_progressBar { }
    div.ajax__fileupload_uploadbutton {}

    Tuesday, December 8, 2015 5:01 AM

Answers

  • User603616845 posted

    Hi,

    AjaxFileUpload Css Classes

    You can use following css for the AjaxFileUpload.

    .ajax__fileupload {
        padding: 4px;
        border: #D3D3D3 1px solid;
        overflow: auto;
    }
    
    .ajax__fileupload_selectFileContainer {
        height: 24px;
        line-height: 24px;
    }
    
    .ajax__fileupload_selectFileButton {
        display:block;
        height: 24px;
        line-height: 24px;
        width: 80px;
        text-align: center;
        background-color: #212121;
        color: #D0D0D0;
        cursor: pointer;
        margin-right: 4px;
        font-size: 13px;
    }
    
    .ajax__fileupload_selectFileButton:hover {
        background-color: #000000;
        color: #ffffff;
    }
    
    .ajax__fileupload_topFileStatus {
        color: rgb(127, 126, 126);
    }
    
    .ajax__fileupload_ProgressBarHolder 
    {
        margin-right: 70px;
        _margin-right: 0;
    }
    
    .ajax__fileupload_uploadbutton {
        width: 60px;
        text-align: center;
        cursor: pointer;
        color: white;
        font-weight: bold;
        background-color: #000099;
    }
    
    .ajax_fileupload_cancelbutton {
        width: 60px;
        text-align: center;
        cursor: pointer;
        color: white;
        font-weight: bold;
        background-color: #990033;
    }
    
    .ajax__fileupload_dropzone {
        border-style: dotted; 
        border-width: 1px; 
        line-height: 50px; 
        text-align:center;
        _text-align:left; /* IE Only */
        margin-bottom:2px;
    }
    
    .ajax__fileupload_queueContainer 
    {
        border: #A9A9A9 1px solid;
        border-width: 1px; 
        margin-top:2px; 
        padding:4px;
        clear: both;
    }
    
    .ajax__fileupload_progressBar {
        padding-left:4px; 
        background-color: #CCFFCC; 
    }
    
    .ajax__fileupload_footer {
        margin-top: 2px;
        line-height: 20px;
        height: 20px;
    }
    
    .ajax__fileupload_fileItemInfo {
        line-height: 20px;
        height: 20px;
        margin-bottom: 2px;
        overflow: hidden;
    }
    
    .ajax__fileupload_fileItemInfo .filename {
        font-weight: bold;
    }
    
    .ajax__fileupload_fileItemInfo .uploadstatus {
        font-style: italic;
    }
    
    .ajax__fileupload_fileItemInfo .removeButton {
        cursor: pointer;
        background-color: #900;
        color: white;
        width: 55px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        display: block;
        float: left;
    }
    
    .ajax__fileupload_fileItemInfo .uploadedState {
        color: #060;
        background-color: #fff;
    }
    
    .ajax__fileupload_fileItemInfo .uploadingState {
        color: #FF9900;
        background-color: #fff;
    }
    
    .ajax__fileupload_fileItemInfo .pendingState {
        color: #009;
        background-color: #fff;
    }
    
    .ajax__fileupload_fileItemInfo .errorState {
        color: #ffffff;
        background-color: #ff0000;
    }
    
    .ajax__fileupload_fileItemInfo .cancelledState {
        color: #900;
        background-color: #fff;
    }
    
    /*Check*/
    .ajax__fileupload_selectFileContainer {
    	display: inline-block;
        overflow: hidden;
        ;
        width: 80px;
        /*float: left;*/
    }
    
    .ajax__fileupload_selectFileContainer input {
        border: medium none;
        cursor: pointer;
        height: 40px;
        margin: 0;
        opacity: 0;
        ;
        right: 0;
        top: 0;
    }
    
    
    
    .ajax__fileupload_fileItemInfo 
    {
        ;
        z-index: 0;
    }
    .ajax__fileupload_fileItemInfo div
    {
        display: inline-block;
    }
    .ajax__fileupload_fileItemInfo div.removeButton 
    {
        ;
        top: 0;
        right: 0;
    }

    You can find the GitHub project with Demo.

    Hope this will help you.

    thanks

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 8, 2015 5:13 AM
  • User1724605321 posted

    Hi ,

    You could click here for list :

    https://searchcode.com/codesearch/view/27732767/

    Hope it helps.

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 8, 2015 6:50 AM

All replies

  • User603616845 posted

    Hi,

    AjaxFileUpload Css Classes

    You can use following css for the AjaxFileUpload.

    .ajax__fileupload {
        padding: 4px;
        border: #D3D3D3 1px solid;
        overflow: auto;
    }
    
    .ajax__fileupload_selectFileContainer {
        height: 24px;
        line-height: 24px;
    }
    
    .ajax__fileupload_selectFileButton {
        display:block;
        height: 24px;
        line-height: 24px;
        width: 80px;
        text-align: center;
        background-color: #212121;
        color: #D0D0D0;
        cursor: pointer;
        margin-right: 4px;
        font-size: 13px;
    }
    
    .ajax__fileupload_selectFileButton:hover {
        background-color: #000000;
        color: #ffffff;
    }
    
    .ajax__fileupload_topFileStatus {
        color: rgb(127, 126, 126);
    }
    
    .ajax__fileupload_ProgressBarHolder 
    {
        margin-right: 70px;
        _margin-right: 0;
    }
    
    .ajax__fileupload_uploadbutton {
        width: 60px;
        text-align: center;
        cursor: pointer;
        color: white;
        font-weight: bold;
        background-color: #000099;
    }
    
    .ajax_fileupload_cancelbutton {
        width: 60px;
        text-align: center;
        cursor: pointer;
        color: white;
        font-weight: bold;
        background-color: #990033;
    }
    
    .ajax__fileupload_dropzone {
        border-style: dotted; 
        border-width: 1px; 
        line-height: 50px; 
        text-align:center;
        _text-align:left; /* IE Only */
        margin-bottom:2px;
    }
    
    .ajax__fileupload_queueContainer 
    {
        border: #A9A9A9 1px solid;
        border-width: 1px; 
        margin-top:2px; 
        padding:4px;
        clear: both;
    }
    
    .ajax__fileupload_progressBar {
        padding-left:4px; 
        background-color: #CCFFCC; 
    }
    
    .ajax__fileupload_footer {
        margin-top: 2px;
        line-height: 20px;
        height: 20px;
    }
    
    .ajax__fileupload_fileItemInfo {
        line-height: 20px;
        height: 20px;
        margin-bottom: 2px;
        overflow: hidden;
    }
    
    .ajax__fileupload_fileItemInfo .filename {
        font-weight: bold;
    }
    
    .ajax__fileupload_fileItemInfo .uploadstatus {
        font-style: italic;
    }
    
    .ajax__fileupload_fileItemInfo .removeButton {
        cursor: pointer;
        background-color: #900;
        color: white;
        width: 55px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        display: block;
        float: left;
    }
    
    .ajax__fileupload_fileItemInfo .uploadedState {
        color: #060;
        background-color: #fff;
    }
    
    .ajax__fileupload_fileItemInfo .uploadingState {
        color: #FF9900;
        background-color: #fff;
    }
    
    .ajax__fileupload_fileItemInfo .pendingState {
        color: #009;
        background-color: #fff;
    }
    
    .ajax__fileupload_fileItemInfo .errorState {
        color: #ffffff;
        background-color: #ff0000;
    }
    
    .ajax__fileupload_fileItemInfo .cancelledState {
        color: #900;
        background-color: #fff;
    }
    
    /*Check*/
    .ajax__fileupload_selectFileContainer {
    	display: inline-block;
        overflow: hidden;
        ;
        width: 80px;
        /*float: left;*/
    }
    
    .ajax__fileupload_selectFileContainer input {
        border: medium none;
        cursor: pointer;
        height: 40px;
        margin: 0;
        opacity: 0;
        ;
        right: 0;
        top: 0;
    }
    
    
    
    .ajax__fileupload_fileItemInfo 
    {
        ;
        z-index: 0;
    }
    .ajax__fileupload_fileItemInfo div
    {
        display: inline-block;
    }
    .ajax__fileupload_fileItemInfo div.removeButton 
    {
        ;
        top: 0;
        right: 0;
    }

    You can find the GitHub project with Demo.

    Hope this will help you.

    thanks

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 8, 2015 5:13 AM
  • User1724605321 posted

    Hi ,

    You could click here for list :

    https://searchcode.com/codesearch/view/27732767/

    Hope it helps.

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 8, 2015 6:50 AM
  • User215209755 posted

    I used Firefox Web Developer Mode to find out most of them, but there were a few that aren't shown unless used - thanks

    Tuesday, December 8, 2015 10:02 PM