bootstrap modal içinde tablo ekleyince yazılar uzun oldumu kaymalar oluyor

02-03-2019, 15:21:06

Kimlik doğrulama veya yönetimden onay bekliyor.

merhaba arkadaşlar aşağıdaki kodu bir html ye yapıştırıp çalıştırırsanız kaymalar oluyor bu durumda ne yapmam lazım yazıların uzunluğuna göre büyüsün küçülsün istiyorum

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
 

<div class="modal fade bd-example-modal-sm show" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" style="display: block; padding-right: 17px;">
<div class="modal-dialog modal-md">
<div class="modal-content">

<table class="table table-bordered" width="100%">
<thead class="thead-dark" width="100%">
<tr width="200%">

<th width="100%">id</th>
<th width="100%">tarih</th>
<th width="100%">İsim</th>
<th width="100%">soyisim</th>
<th width="100%">Sil</th>
</tr>
</thead>
<tr>
<td>287</td>
<td>02.02.2019</td>
<td>ahmet</td>
<td>uzunca bir yazı asasasasadsdsdsdsdsdddddddddd</td>
<td><button class="btn btn-danger btn-sm delete-match">Sil</button></td>
</tr>
</table>





</div>
</div>
</div>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

02-03-2019, 15:32:04

#2

~~Asgardia~~

Üyeliği durduruldu
```
    white-space: nowrap;
```

02-03-2019, 15:49:48

MuhammetDemirel

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
 
    <title>Hello, world!</title>
  </head>
  <body>
 
 <!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">TIKLA</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content border-0 rounded-0">
     
 
<table class="table table-bordered mb-0">
  <thead class="thead-dark">
<tr>
  <th scope="col" class="align-middle">ID</th>
  <th scope="col" class="align-middle">Tarih</th>
  <th scope="col" class="align-middle">İsim Soyisim</th>
  <th scope="col" class="align-middle">İçerik</th>
  <th scope="col" class="align-middle">Sil</th>
</tr>
  </thead>
  <tbody>
<tr>
  <th scope="row">1</th>
  <td>01.03.2019</td>
  <td>John Doe</td>
  <td>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.</td>
  <td><button type="button" class="btn btn-danger">Sil</button></td>
</tr>
<tr>
  <th scope="row">2</th>
  <td>02.03.2019</td>
  <td>John Kardeş</td>
  <td>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz.</td>
  <td><button type="button" class="btn btn-danger">Sil</button></td>
</tr>
<tr>
  <th scope="row">3</th>
  <td>03.03.2019</td>
  <td>Doe Kareş</td>
  <td>Lorem Ipsum pasajlarının birçok çeşitlemesi vardır. </td>
  <td><button type="button" class="btn btn-danger">Sil</button></td>
</tr>
<tr>
  <th scope="row">4</th>
  <td>04.03.2019</td>
  <td>Lorem Nedir</td>
  <td>1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.</td>
  <td><button type="button" class="btn btn-danger">Sil</button></td>
</tr>
  </tbody>
</table>
 
 
    </div>
  </div>
</div>
 
 
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Şu şekilde bir şey hazırladım ama doğru mu anladım bilmiyorum bi bakın isterseniz. Modal large kullandım genişliği sabittir benim bildiğim bootstrap için modalların.

02-03-2019, 15:56:50

Konya

Asgardia adlı üyeden alıntı: mesajı görüntüle

    white-space: nowrap;

bunu nerede kullanacam hocam?

MuhammetDemirel adlı üyeden alıntı: mesajı görüntüle

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
 
    <title>Hello, world!</title>
  </head>
  <body>
 
 <!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">TIKLA</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content border-0 rounded-0">
    
 
<table class="table table-bordered mb-0">
  <thead class="thead-dark">
<tr>
  <th scope="col" class="align-middle">ID</th>
  <th scope="col" class="align-middle">Tarih</th>
  <th scope="col" class="align-middle">İsim Soyisim</th>
  <th scope="col" class="align-middle">İçerik</th>
  <th scope="col" class="align-middle">Sil</th>
</tr>
  </thead>
  <tbody>
<tr>
  <th scope="row">1</th>
  <td>01.03.2019</td>
  <td>John Doe</td>
  <td>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.</td>
  <td><button type="button" class="btn btn-danger">Sil</button></td>
</tr>
<tr>
  <th scope="row">2</th>
  <td>02.03.2019</td>
  <td>John Kardeş</td>
  <td>Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz.</td>
  <td><button type="button" class="btn btn-danger">Sil</button></td>
</tr>
<tr>
  <th scope="row">3</th>
  <td>03.03.2019</td>
  <td>Doe Kareş</td>
  <td>Lorem Ipsum pasajlarının birçok çeşitlemesi vardır. </td>
  <td><button type="button" class="btn btn-danger">Sil</button></td>
</tr>
<tr>
  <th scope="row">4</th>
  <td>04.03.2019</td>
  <td>Lorem Nedir</td>
  <td>1500'lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.</td>
  <td><button type="button" class="btn btn-danger">Sil</button></td>
</tr>
  </tbody>
</table>
 
 
    </div>
  </div>
</div>
 
 
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Şu şekilde bir şey hazırladım ama doğru mu anladım bilmiyorum bi bakın isterseniz. Modal large kullandım genişliği sabittir benim bildiğim bootstrap için modalların.

emeğiniz için çok teşekkür ederim hocam lg değilde md olması lazım kendime göre düzenleyip çalıştırayım bakalım inş olur

02-03-2019, 16:02:25

#5

MuhammetDemirel

Konya adlı üyeden alıntı: mesajı görüntüle

bunu nerede kullanacam hocam?

emeğiniz için çok teşekkür ederim hocam lg değilde md olması lazım kendime göre düzenleyip çalıştırayım bakalım inş olur

Rica ederim. Eğer bahsettiğiniz dikey küçülüp büyüme ise md de yapılır sorun olmaz ama yatay olarak genişlmekse onu bende bilmiyorum daha önce ihtiyacım olmadığı için. ama table içinde bulunduğu modal boyutuna otomatik adapte olacaktır.
02-03-2019, 19:35:18

#6

Konya

MuhammetDemirel adlı üyeden alıntı: mesajı görüntüle

Rica ederim. Eğer bahsettiğiniz dikey küçülüp büyüme ise md de yapılır sorun olmaz ama yatay olarak genişlmekse onu bende bilmiyorum daha önce ihtiyacım olmadığı için. ama table içinde bulunduğu modal boyutuna otomatik adapte olacaktır.

olmadı hocam md yapmam lazım lg çok geniş oluyor md yapıp esnek olmalı
02-03-2019, 20:32:45

#7

MuhammetDemirel

Konya adlı üyeden alıntı: mesajı görüntüle

olmadı hocam md yapmam lazım lg çok geniş oluyor md yapıp esnek olmalı

Yatay eksende responsive kazanmasını istiyorsanız modal divinin (lg, md farketmez) width değerini % olarak değiştirmeniz gerek. Bunun için bootstrap.css kodlarındaki modal divini aratın, ait olduğu bütün kodları style.css gibi extra bir css dosyasına düzenlenmiş halini kaydedin. !important eklemeyi unutmayın bazen bootstrap kodları üstün olabiliyor. Bu şekilde çözebilirsiniz.