<%@ Page Title="Compact Layout" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Compact Layout - AjaxUploader v5.2 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Compact Layout</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Compact Layout</div> <div class="demo-card-body"> <p class="demo-description"> A minimal, space-saving uploader layout suitable for inline forms,
 sidebars, or any area with limited vertical space.
 </p> <div class="demo-expect"><strong>What you should see:</strong> a tighter control for sidebars and panels, labelled &quot;Attach&quot;, capped at 2&nbsp;MB per file.</div> <style> .compact-uploader {
 --cu-font-size: 0.8rem;
 --cu-padding: 0.35rem 0.75rem;
 --cu-border-radius: 0.25rem;
 max-width: 320px;
 }
 .compact-uploader .ajaxuploader-button {
 font-size: 0.8rem;
 padding: 0.35rem 0.75rem;
 }
 .compact-uploader .ajaxuploader-queue {
 font-size: 0.75rem;
 max-height: 120px;
 overflow-y: auto;
 }
 </style> <div class="compact-uploader"> <au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 ButtonText="Attach"
 MaxFileSize="2MB"
 ShowProgress="true" /> </div> <div class="code-panel"> <pre><code>&lt;style&gt;
 .compact-uploader {
 --cu-font-size: 0.8rem;
 --cu-padding: 0.35rem 0.75rem;
 --cu-border-radius: 0.25rem;
 max-width: 320px;
 }
 .compact-uploader .ajaxuploader-button {
 font-size: 0.8rem;
 padding: 0.35rem 0.75rem;
 }
 .compact-uploader .ajaxuploader-queue {
 font-size: 0.75rem;
 max-height: 120px;
 overflow-y: auto;
 }
&lt;/style&gt;

&lt;div class="compact-uploader"&gt;
 &lt;au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 ButtonText="Attach"
 MaxFileSize="2MB"
 ShowProgress="true" /&gt;
&lt;/div&gt;</code></pre> </div> </div>
</div> 
</asp:Content>
