Bootstrap 5 carousel carousel-caption text overlapped when I use JavaScript to append html content to the <div class="carousel-inner">

huangapple
go评论105阅读模式
英文:

Bootstrap 5 carousel carousel-caption text overlapped when I use JavaScript to append html content to the <div class="carousel-inner">

问题

I was able to get the Bootstrap 5 carousel with carousel-caption working in a static pages with multiple <div class "item"> Here is the page with static contents and it works.

<div class="carousel-inner">
<div class="item active">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>CAPTION 1123</h3>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="item">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>CAPTION 235</h3>
<p>OC is always so much fun!</p>
</div>
</div>

<div class="item">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>CAPTION 555</h3>
<p>SD is always so much fun!</p>
</div>
</div>
</div>

But if If I replace the page with this

<div class="carousel-inner">

</div>
Then I filled the div class="item" with dynamic contents using PHP fetching from a mysql database.
Then I used JavaScript to append all the div class="item" as follow :

const divBtag = index === 0 ? '<div class="carousel-item active">' : '<div class="carousel-item">';
//const divBtag = '<div class="carousel-item">';
var photoHtml =
divBtag +
'<img src="' + photo.photo_path + '" class="d-block"
style="width:100%" />' +
'</div>' +
'<div class="carousel-caption">' +
'<h5>' + photo.photo_description + '</h5>' +
'<p>' + photo.photo_datetime + '</p>' +
'</div>' +
'</div>';

  1.         $(&#39;.carousel-inner&#39;).append(photoHtml);

The "carousel-caption" text in "h3" tag will show overlapped with item 0 and item 1 and only the last item 2 work fine. and the text in "p" tag also show overlapped text with item 0 and item 1 only the last item 2 work fine. Is that a way to fix that?

英文:

I was able to get the Bootstrap 5 carousel with carousel-caption working in a static pages with multiple <div class "item"> Here is the page with static contents and it works.

  1. &lt;div class=&quot;carousel-inner&quot;&gt;
  2.     &lt;div class=&quot;item active&quot;&gt;
  3.     &lt;img src=&quot;http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg&quot; alt=&quot;Los Angeles&quot; style=&quot;width:100%;&quot;&gt;
  4.     &lt;div class=&quot;carousel-caption&quot;&gt;
  5.        &lt;h3&gt;CAPTION 1123&lt;/h3&gt;
  6.        &lt;p&gt;LA is always so much fun!&lt;/p&gt;
  7.     &lt;/div&gt;
  8.     &lt;/div&gt;
  9.    &lt;div class=&quot;item&quot;&gt;
  10.      &lt;img src=&quot;http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg&quot; alt=&quot;Chicago&quot; style=&quot;width:100%;&quot;&gt;
  11.   &lt;div class=&quot;carousel-caption&quot;&gt;
  12.     &lt;h3&gt;CAPTION 235&lt;/h3&gt;
  13.     &lt;p&gt;OC is always so much fun!&lt;/p&gt;
  14.   &lt;/div&gt;
  15. &lt;/div&gt;
  17. &lt;div class=&quot;item&quot;&gt;
  18.   &lt;img src=&quot;http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg&quot; alt=&quot;Chicago&quot; style=&quot;width:100%;&quot;&gt;
  19.   &lt;div class=&quot;carousel-caption&quot;&gt;
  20.        &lt;h3&gt;CAPTION 555&lt;/h3&gt;
  21.     &lt;p&gt;SD is always so much fun!&lt;/p&gt;
  22.    &lt;/div&gt;
  23.    &lt;/div&gt;
  24. &lt;/div&gt;

But if If I replace the page with this

  1. &lt;div class=&quot;carousel-inner&quot;&gt;
  3. &lt;/div&gt;

Then I filled the div class="item" with dynamic contents using PHP fetching from a mysql database.
Then I used JavaScript to append all the div class="item" as follow :

  1. const divBtag = index === 0 ? &#39;&lt;div class=&quot;carousel-item active&quot;&gt;&#39; : &#39;&lt;div class=&quot;carousel-item&quot;&gt;&#39;;
  2.       //const divBtag = &#39;&lt;div class=&quot;carousel-item&quot;&gt;&#39;;
  3.          var photoHtml =
  4.                         divBtag +
  5.                            &#39;&lt;img src=&quot;&#39; + photo.photo_path + &#39;&quot; class=&quot;d-block&quot; 
  6.                             style=&quot;width:100%&quot; /&gt;&#39; +
  7.                         &#39;&lt;/div&gt;&#39; +
  8.                          &#39;&lt;div class=&quot;carousel-caption&quot;&gt;&#39;  +
  9.                              &#39;&lt;h5&gt;&#39; + photo.photo_description + &#39;&lt;/h5&gt;&#39; +
  10.                              &#39;&lt;p&gt;&#39; + photo.photo_datetime + &#39;&lt;/p&gt;&#39; +
  11.                          &#39;&lt;/div&gt;&#39; +
  12.                        &#39;&lt;/div&gt;&#39;;
  13.       
  15.             $(&#39;.carousel-inner&#39;).append(photoHtml);

The "carousel-caption" text in "h3" tag will show overlapped with item 0 and item 1 and only the last item 2 work fine. and the text in "p" tag also show overlapped text with item 0 and item 1 only the last item 2 work fine. Is that a way to fix that ?

答案1

得分: 0

在以下HTML代码中，将

标签包裹在"h5"和"p"标签周围，以解决文本重叠问题：

  1. const divBtag = (index === 0) ? '<div class="carousel-item active">' : '<div class="carousel-item">';
  2. const photoHtml =
  3.   divBtag +
  4.     '<img src="' + photo.photo_path + '" class="d-block" style="width:100%" />' +
  5.     '<div class="carousel-caption">' +
  6.        '<div>' +
  7.           '<h5>' + photo.photo_description + '</h5>' +
  8.           '<p>' + photo.photo_datetime + '</p>' +
  9.        '</div>' +
  10.     '</div>' +
  11.   '</div>';
  13. $('.carousel-inner').append(photoHtml);
英文:

Add a div wrap around the "h5" and "p" tag as shown in the following html code resolve the overlapped text issue.

  1.   const divBtag = (index === 0) ? &#39;&lt;div class=&quot;carousel-item active&quot;&gt;&#39; : &#39;&lt;div class=&quot;carousel-item&quot;&gt;&#39;;
  2.   const photoHtml =
  3.   divBtag +
  4.     &#39;&lt;img src=&quot;&#39; + photo.photo_path + &#39;&quot; class=&quot;d-block&quot; style=&quot;width:100%&quot; /&gt;&#39; +
  5.    &#39;&lt;div class=&quot;carousel-caption&quot;&gt;&#39; +
  6.        &#39;&lt;div&gt;&#39; +
  7.           &#39;&lt;h5&gt;&#39; + photo.photo_description + &#39;&lt;/h5&gt;&#39; +
  8.           &#39;&lt;p&gt;&#39; + photo.photo_datetime + &#39;&lt;/p&gt;&#39; +
  9.        &#39;&lt;/div&gt;&#39; +
  10.     &#39;&lt;/div&gt;&#39; +
  11.   &#39;&lt;/div&gt;&#39;;
  13. $(&#39;.carousel-inner&#39;).append(photoHtml);

huangapple
  • 本文由 发表于 2023年6月8日 01:30:03
  • 转载请务必保留本文链接：https://go.coder-hub.com/76425774.html
  • css
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定