Ankündigung

Einklappen
Keine Ankündigung bisher.

Button größe von Krajee File Uploader / AdminLTE anpassen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Button größe von Krajee File Uploader / AdminLTE anpassen

    In meinem Projekt verwende ich fürs Backend das AdminLTE und für File Upload das jQuery Plugin Krajee File Uploader

    HTML-Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title>YAP</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- CSS-->
        <link rel="stylesheet" href="http://localhost/YAP/public/css/bootstrap/bootstrap.min.css" />
        <link rel="stylesheet" href="http://localhost/YAP/public/css/datatables/dataTables.bootstrap.css" />
            <link media="all" type="text/css" rel="stylesheet" href="http://localhost/YAP/public/vendor/fileuploader/css/fileinput.css">
    
            <link rel="stylesheet" type="text/css" href="http://localhost/YAP/public/css/main.css">
        <link rel="shortcut icon" type="image/x-icon" href="http://localhost/YAP/public/images/favicon16.ico">
    
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries-->
        <!--if lt IE 9
        script(src='https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js')
        script(src='https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js')
        -->
      </head>
      <body class="sidebar-mini fixed">
        <div class="wrapper">
          <!-- Navbar-->
          <header class="main-header hidden-print"><a class="logo" href="index.html"><img src="http://localhost/YAP/public/images/logo.png" style='max-width: 100%;height: auto'></a>
            <nav class="navbar navbar-static-top">
              <!-- Sidebar toggle button--><a class="sidebar-toggle" href="#" data-toggle="offcanvas"></a>
              <!-- Navbar Right Menu-->
              <div class="navbar-custom-menu">
                <ul class="top-nav">
                  <!--Notification Menu-->
                  <li class="dropdown notification-menu"><a class="dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell-o fa-lg"></i></a>
                    <ul class="dropdown-menu">
                      <li class="not-head">You have 4 new notifications.</li>
                      <li><a class="media" href="javascript:;"><span class="media-left media-icon"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x text-primary"></i><i class="fa fa-envelope fa-stack-1x fa-inverse"></i></span></span>
                          <div class="media-body"><span class="block">Lisa sent you a mail</span><span class="text-muted block">2min ago</span></div></a></li>
                      <li><a class="media" href="javascript:;"><span class="media-left media-icon"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x text-danger"></i><i class="fa fa-hdd-o fa-stack-1x fa-inverse"></i></span></span>
                          <div class="media-body"><span class="block">Server Not Working</span><span class="text-muted block">2min ago</span></div></a></li>
                      <li><a class="media" href="javascript:;"><span class="media-left media-icon"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x text-success"></i><i class="fa fa-money fa-stack-1x fa-inverse"></i></span></span>
                          <div class="media-body"><span class="block">Transaction xyz complete</span><span class="text-muted block">2min ago</span></div></a></li>
                      <li class="not-footer"><a href="#">See all notifications.</a></li>
                    </ul>
                  </li>
                  <!-- User Menu-->
                  <li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user fa-lg"></i></a>
                    <ul class="dropdown-menu settings-menu">
                      <li><a href="page-user.html"><i class="fa fa-cog fa-lg"></i> Settings</a></li>
                      <li><a href="page-user.html"><i class="fa fa-user fa-lg"></i> Profile</a></li>
                      <li><a href="http://localhost/YAP/public/logout"><i class="fa fa-sign-out fa-lg"></i>Logout</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
            </nav>
          </header>
    
    
          <!-- Side-Nav-->
          <aside class="main-sidebar hidden-print">
            <section class="sidebar">
              <div class="user-panel">
                <div class="pull-left image">
                                        <img class="img-circle" src="http://localhost/YAP/public/images/user.png" alt="User Image">
                                </div>
                <div class="pull-left info">
                  <p>Thomas Meyer</p>
                  <p class="designation">Super Administrator</p>
                </div>
              </div>
                <ul class="sidebar-menu"><li><a href="http://localhost/backend"><i class="fa fa-dashboard fa-fw"></i><span>Dashboard</span></a></li><li><a href="#"><i class="fa fa-cog fa-fw"></i><span>Configuration</span><i class="fa fa-angle-right"></i></a><ul class="treeview-menu"><li><a href="http://localhost/YAP/public/backend/config/server"><i class="fa fa-envelope-o fa-fw"></i>Server</a></li></ul></li><li><a href="#"><i class="fa fa-cog fa-fw"></i><span>Language</span><i class="fa fa-angle-right"></i></a><ul class="treeview-menu"><li><a href="http://localhost/YAP/public/ajax/language/flag/check"><i class="fa fa-circle-o"></i>add Language</a></li><li><a href="http://localhost/YAP/public/backend/languages"><i class="fa fa-circle-o"></i>Show Languages</a></li></ul></li></ul>        </section>
          </aside>
    
    
          <div class="content-wrapper">
            <div class="page-title">
              <div>
                <h1><i class="fa fa-dashboard"></i> Add Language</h1>
                <p></p>
              </div>
              <div>
                <ul class="breadcrumb">
                  <li><i class="fa fa-home fa-lg"></i></li>
                  <li><a href="http://localhost/YAP/public/backend">Dashboard</a></li>
                </ul>
              </div>
            </div>
    
    
    
                    <form method="POST" action="http://localhost/YAP/public/backend/language" accept-charset="UTF-8" id="mask" role="form" class="form-horizontal"><input name="_token" type="hidden" value="hmRWqasfnXFwMfbPZdNnSAIaTtMd8T8adbf1Hboq">
            <div class="form-group " id="number"><label for="number" class="control-label col-sm-2 col-md-3">Name:</label><div class="col-sm-10 col-md-9"><input placeholder="The country name" class="form-control" name="number" type="text" value=""></div></div>
            <div class="form-group " id="iso639"><label for="iso639" class="control-label col-sm-2 col-md-3">ISO639:</label><div class="col-sm-10 col-md-9"><input placeholder="iso639 code" class="form-control" name="iso639" type="text" value=""></div></div>
            <div class="form-group " id="iso3166"><label for="iso3166" class="control-label col-sm-2 col-md-3">ISO3166:</label><div class="col-sm-10 col-md-9"><input placeholder="iso3166 code" class="form-control" name="iso3166" type="text" value=""></div></div>
            <div class="form-group"><div class="col-sm-offset-2 col-md-offset-3 col-sm-10 col-md-9"><div class="checkbox"><label ><input name="deleted" type="checkbox" value="1">Deleted</label></div></div></div>
            <div class="form-group"><div class="col-sm-offset-2 col-md-offset-3 col-sm-10 col-md-9"><div class="checkbox"><label ><input name="published" type="checkbox" value="1">Published</label></div></div></div>
            <div class="form-group " id="ordering"><label for="ordering" class="control-label col-sm-2 col-md-3">Order:</label><div class="col-sm-10 col-md-9"><input placeholder="order number for the selector" class="form-control" name="ordering" type="number" value="1"></div></div>
            <div class="form-group"><div class="col-sm-offset-2 col-md-offset-3 col-sm-10 col-md-9"><div class="checkbox"><label ><input name="published" type="checkbox" value="1">Default</label></div></div></div>
            <div class="form-group " id="flag"><label for="flag" class="control-label col-sm-2 col-md-3">Flag:</label><div class="col-sm-10 col-md-9"><input class="form-control filestyle" data-buttonBefore="true" id="file" name="flag" type="file"></div></div>
            <div class="form-group " id="short_date"><label for="short_date" class="control-label col-sm-2 col-md-3">Short Date:</label><div class="col-sm-10 col-md-9"><input placeholder="short date format for display" class="form-control" name="short_date" type="text" value="Y-m-d"></div></div>
            <div class="form-group " id="short_date"><label for="short_date" class="control-label col-sm-2 col-md-3">Long Date:</label><div class="col-sm-10 col-md-9"><input placeholder="long date format for display" class="form-control" name="short_date" type="text" value="Y-m-d H:i:s" id="short_date"></div></div>
            <div class="btn-group">
                <button type = "submit" class = "btn btn-primary">yap.add</button>
            </div>
            <button type="button" class="btn btn-default" data-dismiss="modal">yap.cancel</button>
            </form>  
              </div>
        </div>
        <!-- Javascripts-->
        <script src="http://localhost/YAP/public/js/jquery/jquery-2.1.4.min.js"></script>
        <script src="http://localhost/YAP/public/js/essential-plugins.js"></script>
        <script src="http://localhost/YAP/public/js/bootstrap/bootstrap.min.js"></script>
        <script src="http://localhost/YAP/public/js/plugins/pace.min.js"></script>
        <script src="http://localhost/YAP/public/js/main.js"></script>
        <script type="text/javascript" src="http://localhost/YAP/public/js/plugins/chart.js"></script>
        <script type="text/javascript" src="http://localhost/YAP/public/js/plugins/jquery.vmap.min.js"></script>
        <script type="text/javascript" src="http://localhost/YAP/public/js/plugins/jquery.vmap.world.js"></script>
        <script type="text/javascript" src="http://localhost/YAP/public/js/plugins/jquery.vmap.sampledata.js"></script>
        <script type="text/javascript" src="http://localhost/YAP/public/js/datatables/jquery.dataTables.js"></script>
        <script type="text/javascript" src="http://localhost/YAP/public/js/datatables/dataTables.bootstrap.js"></script>
                <script src="http://localhost/YAP/public/vendor/fileuploader/js/fileinput.js"></script>
    
    
        <script type="text/javascript">
          $(document).ready(function(){
    
                    $("#file").fileinput({
                uploadUrl: "http://localhost/YAP/public/ajax/language/flag/check",
                allowedFileExtensions: ["jpg", "png", "gif"],
                minImageWidth: 50,
                minImageHeight: 50
            });
             });
    
    
        </script>
      </body>
    </html>
    Die Buttons des File Uploader werden allerdings größer dargestellt als das "Eingabefeld".

    In
    HTML-Code:
    <link rel="stylesheet" type="text/css" href="http://localhost/YAP/public/css/main.css">
    dachte ich mir passe ich durch
    Code:
    input#file.form-control.filestyle {
            height: 25px !important;
    }
    die Größe an. Dieses befindet sich am Ende der CSS - Datei. Den Namen habe ich mir über den Inspector des Browsers ermittelt. Ich kann auch sehen das sie auf der Position des Buttons die Größe verändert. Allerdings wird der Button nicht angepasst.
    Deshalb meine Frage wie passe ich die größe des Buttons an?

    Dieses hat im übrigen auch nichts mit dem Cache leeren zu tun.

  • #2
    Schau halt nach welches Element Du formatieren must. Browser -> F12 -> DOM/Elemente Das input type file kannst Du nicht formatieren, das wird unsichbar in eine andere Box gewrappt.

    Kommentar


    • #3
      Zitat von Messier 1001 Beitrag anzeigen
      Schau halt nach welches Element Du formatieren must. Browser -> F12 -> DOM/Elemente Das input type file kannst Du nicht formatieren, das wird unsichbar in eine andere Box gewrappt.
      Jep hatte ich auch schon gemacht, allerdings ohne Wirkung. Inzwischen habe ich die richtige Position gefunden. Troztdem Danke.

      Kommentar

      Lädt...
      X