Krijg geen naam in de Button

Status
Niet open voor verdere reacties.

Atwist

Terugkerende gebruiker
Lid geworden
24 jan 2006
Berichten
1.055
Besturingssysteem
Wndows 10
Office versie
2016
Hallo

Ben bezig met mijn eerste echte eigen projectje, loop op 1 klein rot ding vast:(.
Probeer de button in de rode tekst een naam te geven maar op een of andere manier lukt het mij niet.
Zo als op de foto blijft de button blauw zonder de tekst.

Ik weet even niet waar ik het zoeken moet, iemand een tip voor mij???????


Code:
<?php
  $page_title = 'Alle Fotos';
  require_once('includes/load.php');
  // Checkin What level user has permission to view this page
  page_require_level(2);
?>
<?php $media_files = find_all('media');?>
<?php
  if(isset($_POST['submit'])) {
  $photo = new Media();
  $photo->upload($_FILES['file_upload']);
    if($photo->process_media()){
        $session->msg('s','foto is geupload.');
        redirect('media.php');
    } else{
      $session->msg('d',join($photo->errors));
      redirect('media.php');
    }

  }

?>
<?php include_once('layouts/header.php'); ?>
     <div class="row">
        <div class="col-md-6">
          <?php echo display_msg($msg); ?>
        </div>

      <div class="col-md-12">
        <div class="panel panel-default">
          <div class="panel-heading clearfix">
            <span class="glyphicon glyphicon-camera"></span>
            <span>Alle foto's</span>
            <div class="pull-right">
              <form class="form-inline" action="media.php" method="POST" enctype="multipart/form-data">
              <div class="form-group">
                <div class="input-group">
[COLOR="#FF0000"]                  <span class="input-group-btn">
                    <input type="file" name="file_upload" multiple="multiple" class="btn btn-primary btn-file" value="Deze computer"/>
                 </span>[/COLOR]

                 <button type="submit" name="submit" class="btn btn-default">Upload</button>
               </div>
              </div>
             </form>
            </div>
          </div>
          <div class="panel-body">
            <table class="table">
              <thead>
                <tr>
                  <th class="text-center" style="width: 50px;">Nr.</th>
                  <th class="text-center">Foto</th>
                  <th class="text-center">Foto naam</th>
                  <th class="text-center" style="width: 20%;">Foto Type</th>
                  <th class="text-center" style="width: 50px;">Actie</th>
                </tr>
              </thead>
                <tbody>
                <?php foreach ($media_files as $media_file): ?>
                <tr class="list-inline">
                 <td class="text-center"><?php echo count_id();?></td>
                  <td class="text-center">
                      <img src="uploads/products/<?php echo $media_file['file_name'];?>" class="img-thumbnail" />
                  </td>
                <td class="text-center">
                  <?php echo $media_file['file_name'];?>
                </td>
                <td class="text-center">
                  <?php echo $media_file['file_type'];?>
                </td>
                <td class="text-center">
                  <a href="delete_media.php?id=<?php echo (int) $media_file['id'];?>" class="btn btn-danger btn-xs"  title="Verwijder">
                    <span class="glyphicon glyphicon-trash"></span>
                  </a>
                </td>
               </tr>
              <?php endforeach;?>
            </tbody>
          </div>
        </div>
      </div>
</div>


<?php include_once('layouts/footer.php'); ?>
 
Dankje PHP4U :thumb:

Ik denk dat ik het hiermee ga redden.

Maar ben ook blij te horen dat ik mij niet voor niets suf heb zitten piekeren :rolleyes:
 
Ergens mis ik de </table> , de juiste plek vind je zelf wel ;)

Aan de glyphicon zie ik dat je BS 3 gebruikt.
Als je BS 4 zou gebruiken dan zit daar de customized file input in. Ook de andere inputs kan je op deze manier vormgeven. In jouw geval zou het bij BS 4 dit zijn:
Code:
<div class="input-group">
  <div class="custom-file">
    <input type="file" name="file_upload" id="file_upload" multiple="multiple" class="custom-file-input">
    <label class="custom-file-label" for="file_upload">Kies bestand</label>
  </div>
</div>

Een bepaalde reden dat je geen BS 4 gebruikt?

Aanvulling. Als je bij BS 4 de gekozen bestandsnaam in de file input wilt tonen dan is dit nodig.
Code:
<script>
$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>

Hieronder: Bovenste file input is van BS 4 en de onderste is de gewone file input

input-type-file.jpg
 
Laatst bewerkt:
Hallo Bron,

Nee ik heb geen bepaalde reden om BS 3 te gebruiken.
Heb gisteravond even gestoeid met BS 4, ben er achter gekomen dat ik nog al wat moet aanpassen.
Die button is het enigste wat niet leuk eruit ziet maar de rest wel.

Hier mee open ik toch de table en sluit deze ook weer
Code:
<table class="table">
Al ik aan het eind van de tabel dan is de tabel verstoord.
Code:
  <table class="table">
              <thead>
                <tr>
                  <th class="text-center" style="width: 50px;">Nr.</th>
                  <th class="text-center">Foto</th>
                  <th class="text-center">Foto naam</th>
                  <th class="text-center" style="width: 20%;">Foto Type</th>
                  <th class="text-center" style="width: 50px;">Actie</th>
                </tr>
              </thead>
[COLOR="#FF0000"]</table>[/COLOR]
Dus naar mijn menig dacht ik dat het zo goed is.:eek::eek::eek:
 
Hoe bedoel je: Verstoord?
 
Ik heb 2 screenshots gemaakt.
Eerste zoals het was.
Code:
<table class="table">

Tweede met toevoeging
Code:
  <table class="table">
              <thead>
                <tr>
                  <th class="text-center" style="width: 50px;">Nr.</th>
                  <th class="text-center">Foto</th>
                  <th class="text-center">Foto naam</th>
                  <th class="text-center" style="width: 20%;">Foto Type</th>
                  <th class="text-center" style="width: 50px;">Actie</th>
                </tr>
              </thead>
[COLOR="#FF0000"]</table>[/COLOR]
 

Bijlagen

  • Table okay.png
    Table okay.png
    102,6 KB · Weergaven: 60
  • Table fout.png
    Table fout.png
    255,1 KB · Weergaven: 52
Je liet geen tbody zien. Die is er wel?
Is het misschien een tabel in een tabel?
Heb je de "table-responsive" om de tabel heen staan?
Code:
<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th class="text-center" style="width: 50px;">Nr.</th>
        <th class="text-center">Foto</th>
        <th class="text-center">Foto naam</th>
        <th class="text-center" style="width: 20%;">Foto Type</th>
        <th class="text-center" style="width: 50px;">Actie</th>
      </tr>
    </thead>
    [B]<tbody>[/B]
        ...
   [B] </tbody>[/B]
  </table>
</div>

Alleen Firefox (als je die gebruikt) doet iets vreemds met een tabel en zet er een fieldset in. Dit is op te lossen met:
Code:
@-moz-document url-prefix() {
    fieldset {
        display: table-cell; /* voor tabel in firefox */
    }
}
 
Laatst bewerkt:
Door de file input te verbergen en de label te gebruiken als "kies bestand" button dan kan je eenvoudig de label de opmaak geven die je wilt. Er is een klein stukje javascript nodig om alles goed te laten werken. De benodigde css heb ik aangepast voor Bootstrap 3.
Code:
<form id="form_upload" class="form-inline" action="media.php" method="post" enctype="multipart/form-data">
  <div class="form-group">
    <input id="file_upload" name="file_upload" type="file" class="inputfile" data-multiple-caption="{count} bestanden gekozen" multiple="multiple">
    <label for="file_upload" class="form-control"><span>Klik & kies bestand(en)</span></label>
    <button type="submit" name="submit" class="btn btn-success">Upload</button>
  </div>
</form>
<script>
var inputs = document.querySelectorAll('.inputfile');
Array.prototype.forEach.call(inputs, function(input) {
  var label = input.nextElementSibling;
  var labelVal = label.innerHTML;
  input.addEventListener('change', function(e) {
    var fileName = '';
    if (this.files && this.files.length > 1) {
      fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length);
    } else {
      fileName = e.target.value.split('\\').pop();
    }
    if (fileName) {
      label.querySelector('span').innerHTML = fileName;
    } else {
      label.innerHTML = labelVal;
    }
  });
});
</script>

Dit is de css die hierbij hoort
Code:
/* max breedte van form */
#form_upload {
    display: block;
    max-width: 280px;
}
#form_upload .form-group {
    position: relative;
}
/* verberg file input */
#form_upload .inputfile {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
}
/* aanpaasen label (is nu form-control) */
#form_upload .form-control {
    /* breedte form minus breedte button */
    width: 190px;
    margin-bottom: 1px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
    font-weight: 400;
    color: #555;
}
/* mouse over (overgenomen van BS3 form-control) */
#form_upload .inputfile:focus + .form-control,
#form_upload .inputfile + .form-control:hover {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
}
/* geen pointer-events op touchscreen  */
#form_upload .form-control * {
    pointer-events: none;
}
/* upload button */
#form_upload .btn {
    height: 34px;
    margin-left: -0.75em;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
/* horizontaal uitlijnen op smartphone */
@media (max-width: 767px) {
    #form_upload .form-group,
    #form_upload .form-control {
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle;
    }
}

Het resultaat is op alle browsers

file-input.jpg
 
Hallo bron,

Ik ga vanavond met jou voorstel spelen.

Alvast bedankt.

Ik hou je op de hoogte.
 
@BRON :love::love:

Dit werkt perfect.

Hartstikke bedankt :thumb::thumb::thumb:
 
Graag gedaan :) Suc6 met je website :thumb:
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan