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

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

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>';

        $(&#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.

&lt;div class=&quot;carousel-inner&quot;&gt;
    &lt;div class=&quot;item active&quot;&gt;
    &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;
    &lt;div class=&quot;carousel-caption&quot;&gt;
       &lt;h3&gt;CAPTION 1123&lt;/h3&gt;
       &lt;p&gt;LA is always so much fun!&lt;/p&gt;
    &lt;/div&gt;
    &lt;/div&gt;
   &lt;div class=&quot;item&quot;&gt;
     &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;
  &lt;div class=&quot;carousel-caption&quot;&gt;
    &lt;h3&gt;CAPTION 235&lt;/h3&gt;
    &lt;p&gt;OC is always so much fun!&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;item&quot;&gt;
  &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;
  &lt;div class=&quot;carousel-caption&quot;&gt;
       &lt;h3&gt;CAPTION 555&lt;/h3&gt;
    &lt;p&gt;SD is always so much fun!&lt;/p&gt;
   &lt;/div&gt;
   &lt;/div&gt;
&lt;/div&gt;

But if If I replace the page with this

&lt;div class=&quot;carousel-inner&quot;&gt;

&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 :

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;;
      //const divBtag = &#39;&lt;div class=&quot;carousel-item&quot;&gt;&#39;;
         var photoHtml =
                        divBtag +
                           &#39;&lt;img src=&quot;&#39; + photo.photo_path + &#39;&quot; class=&quot;d-block&quot; 
                            style=&quot;width:100%&quot; /&gt;&#39; +
                        &#39;&lt;/div&gt;&#39; +
                         &#39;&lt;div class=&quot;carousel-caption&quot;&gt;&#39;  +
                             &#39;&lt;h5&gt;&#39; + photo.photo_description + &#39;&lt;/h5&gt;&#39; +
                             &#39;&lt;p&gt;&#39; + photo.photo_datetime + &#39;&lt;/p&gt;&#39; +
                         &#39;&lt;/div&gt;&#39; +
                       &#39;&lt;/div&gt;&#39;;
      

            $(&#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"标签周围，以解决文本重叠问题：

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

$('.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.

  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;;
  const photoHtml =
  divBtag +
    &#39;&lt;img src=&quot;&#39; + photo.photo_path + &#39;&quot; class=&quot;d-block&quot; style=&quot;width:100%&quot; /&gt;&#39; +
   &#39;&lt;div class=&quot;carousel-caption&quot;&gt;&#39; +
       &#39;&lt;div&gt;&#39; +
          &#39;&lt;h5&gt;&#39; + photo.photo_description + &#39;&lt;/h5&gt;&#39; +
          &#39;&lt;p&gt;&#39; + photo.photo_datetime + &#39;&lt;/p&gt;&#39; +
       &#39;&lt;/div&gt;&#39; +
    &#39;&lt;/div&gt;&#39; +
  &#39;&lt;/div&gt;&#39;;

$(&#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:

确定