locked
styling ajax file upload control RRS feed

  • Question

  • User2108892867 posted

    Hello everyone, I am trying to apply CSS class to Ajax control. But for some reason it doesn't work. Could you someone point out what I need to do? Here is my CSS:

    .uploader
    {
        width:300px !important;
        margin-right:auto;
        margin-left:auto;
    }
    
    .uploader input[type="text"] {
        height:25px !important;
    }
    .uploader input[type="text"] {
        width:150px !important;
        text-align:right;
    }
    
    .uploader input[type="file"] {
        height: auto !important;
      /* In IE7, the height of the select element cannot be changed by height, only font-size */
    
     /* For IE7, add top margin to align select with labels */
       line-height:normal !important;
     
    }

    Here is my upload controller

     <div class="uploader">
                <asp:AsyncFileUpload ID="AsyncFileUpload1" runat="server" CompleteBackColor="White"
                    UploaderStyle="Modern" UploadingBackColor="#CCFFFF" Visible="True"
                    />
            </div>

    For some reason I have a gap between the input type text and the upload button like in this image

    https://www.screencast.com/t/6O5Too1iCnP9

    Thanks

    Sunday, December 10, 2017 11:29 PM

Answers

  • User-335504541 posted

    <g class="gr_ gr_10 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="10" data-gr-id="10">Hi</g> <g class="gr_ gr_5 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="5" data-gr-id="5">asplearning</g>,

    Because of the way, ajax file uploader <g class="gr_ gr_18 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" id="18" data-gr-id="18">render</g> the control into <g class="gr_ gr_17 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="17" data-gr-id="17">html</g> tag, I am not sure how I can apply this style to the control. 

    Do you want to only leave a button like the one in your provided link?

    If so, please try:

                <style>
                [hidden] {
                display: none !important;
                }
                </style>
    
                <label class="btn btn-default">
                    Browse
                    <ajaxToolkit:AsyncFileUpload ID="AsyncFileUpload1" runat="server" CompleteBackColor="White"
                        UploaderStyle="Modern" UploadingBackColor="#CCFFFF" Visible="True" hidden/>
                </label>

    Best Regards,

    Billy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 11, 2017 12:12 PM

All replies

  • User2103319870 posted

    asplearning

    I have a gap between the input type text and the upload button

    You can try with below css style to remove the gap

     <style>
                    .uploader {
                        width: 300px !important;
                        margin-right: auto;
                        margin-left: auto;
                    }
    
                        .uploader input[type="text"] {
                            height: 25px !important;
                        }
    
                        .uploader input[type="text"] {
                            width: 150px !important;
                            text-align: left;
                        }
    
                        .uploader input[type="file"] {
                            height: auto !important;
                            /* In IE7, the height of the select element cannot be changed by height, only font-size */
                            /* For IE7, add top margin to align select with labels */
                            line-height: normal !important;
                        }
    
                    #AsyncFileUpload1_ctl01 {
                        width: 250px !important;
                    }
                </style>

    Sample Demo

    Monday, December 11, 2017 12:50 AM
  • User2108892867 posted

    Thanks a2h, I still can't get it right. I think there is conflict between classes in bootstrap cause if I removed bootstrap CSS, it seemed to work. Now is there a way I can apply this style to ajax file uploader?

    https://stackoverflow.com/questions/11235206/twitter-bootstrap-form-file-element-upload-button

    Because of the way, ajax file uploader render the control into html tag, I am not sure how I can apply this style to the control. 

    thanks. 

    Monday, December 11, 2017 4:19 AM
  • User-335504541 posted

    <g class="gr_ gr_10 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="10" data-gr-id="10">Hi</g> <g class="gr_ gr_5 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="5" data-gr-id="5">asplearning</g>,

    Because of the way, ajax file uploader <g class="gr_ gr_18 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" id="18" data-gr-id="18">render</g> the control into <g class="gr_ gr_17 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="17" data-gr-id="17">html</g> tag, I am not sure how I can apply this style to the control. 

    Do you want to only leave a button like the one in your provided link?

    If so, please try:

                <style>
                [hidden] {
                display: none !important;
                }
                </style>
    
                <label class="btn btn-default">
                    Browse
                    <ajaxToolkit:AsyncFileUpload ID="AsyncFileUpload1" runat="server" CompleteBackColor="White"
                        UploaderStyle="Modern" UploadingBackColor="#CCFFFF" Visible="True" hidden/>
                </label>

    Best Regards,

    Billy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 11, 2017 12:12 PM
  • User2108892867 posted

    Thank you. 

    Monday, December 11, 2017 9:10 PM