Wordpress Shortcodes Appear In Wrong Place - php

Question

I have a wordpress shortcode to handle some PHP (for custom fields) for my sidebar. The shortcode is below:
add_shortcode('my_further_information_list','my_further_information_list_func');
function my_further_information_list_func(){
$additional_info_1 = get_field( 'additional_info_1');
$additional_info_2 = get_field( 'additional_info_2');
$additional_info_3 = get_field( 'additional_info_3');
if ( $additional_info_1) {
$html = '<li>'.the_field('additional_info_1').'</li>';
}
if ( $additional_info_2) {
$html = '<li>'.the_field('additional_info_2').'</li>';
}
if ( $additional_info_3) {
$html = '<li>'.the_field('additional_info_3').'</li>';
}
return $html;
}
For some reason, when I use this shortcode, it generates the html in completely the wrong place on the page (in the div above where the shortcode is). I haven't come across this before, so any ideas on why this might happen?
You can see the weird place they're appearing here:
shortcode generating in weird place...
This is the theme sidebar code:
<?php if ( x_get_content_layout() != 'full-width' ) : ?>
<aside class="x-sidebar nano" role="complementary">
<div class="max width nano-content">
<?php if ( get_option( 'ups_sidebars' ) != array() ) : ?>
<?php dynamic_sidebar( apply_filters( 'ups_sidebar', 'sidebar-main' ) ); ?>
<?php else : ?>
<?php dynamic_sidebar( 'sidebar-main' ); ?>
<?php endif; ?>
</div>
</aside>
<?php endif; ?>
This is the generated HTML. As you can see, the top widget (also using a shortcode whose function references custom fields (but in a different way - with a loop - as the fields it's referencing are different)) works fine, as does the bottom (just a simple followed by a button). But in the middle widget, the shortcode generates the link and text above the div that the widget is supposed to be in...
<div id="text-8" class="widget widget_text">
<h4 class="h-widget">Related Articles</h4>
<div class="textwidget">
<p>
<ul>
<li>Related Article 1</li>
<li>Related Article 2</li>
<li>Related Article 3</li>
</ul>
</p>
</div>
</div>
Further Information 1Further Information 2
<div id="text-9" class="widget widget_text">
<h4 class="h-widget">Further Information</h4>
<div class="textwidget"><p><ul><li></li><li></li></ul></p></div>
</div>
<div id="custom_html-4" class="widget_text widget widget_custom_html">
<h4 class="h-widget">Feedback</h4>
<div class="textwidget custom-html-widget">
<p>Please provide feedback!<p>
<button>PROVIDE FEEDBACK</button>
</div>
</div>

Answer 1

i think you code should be
add_shortcode('my_further_information_list','my_further_information_list_func');
function my_further_information_list_func(){
$additional_info_1 = get_field( 'additional_info_1');
$additional_info_2 = get_field( 'additional_info_2');
$additional_info_3 = get_field( 'additional_info_3');
$html = "<ul>";
if ( $additional_info_1) {
$html .= '<li>'.$additional_info_1.'</li>';
}
if ( $additional_info_2) {
$html .= '<li>'.$additional_info_2.'</li>';
}
if ( $additional_info_3) {
$html .= '<li>'.$additional_info_3.'</li>';
}
$html .= "</ul>";
return $html;
}
non valid html elements can cause this type of behavior depending on your css. If you require more assistance please provide template code, or at least the snippet around the_content()
edit: the_field is the same as echo get_field. it can't be used to build a string. that's why you use get_field on top :)