Wordpress Widget is displaying outside parent divs (Tried CSS tricks)

[phaedrusGhost]

Hi All,

I am stumped here. Perhaps I've been at it too long and am missing something elementary or it really is a missing link. I hope someone can point me in the right direction here.

I have this piece of code for my new widget functions:

function underslider_widgets_one_init() {
    register_sidebar( array(
        'name'          => 'Under Slider 1',
        'id'            => 'under_slider_1',
        'before_widget' => '<div class="under_slider_container">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="rounded">',
        'after_title'   => '</h2>',
    ) );

}
add_action( 'widgets_init', 'underslider_widgets_one_init' );

function underslider_widgets_two_init() {
    register_sidebar( array(
        'name'          => 'Under Slider 2',
        'id'            => 'under_slider_2',
        'before_widget' => '<div class="under_slider_container">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="rounded">',
        'after_title'   => '</h2>',
    ) );

}
add_action( 'widgets_init', 'underslider_widgets_two_init' );

function underslider_widgets_three_init() {

    register_sidebar( array(
        'name'          => 'Under Slider 3',
        'id'            => 'under_slider_3',
        'before_widget' => '<div class="under_slider_container">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="rounded">',
        'after_title'   => '</h2>',
    ) );

}
add_action( 'widgets_init', 'underslider_widgets_three_init' );

Followed by this piece of code to call on it:

case 'header_layerslider':

                $this->html.= '<div class="header-wrapper">
                                    ' . (isset($header_background_array['back_html']) ? $header_background_array['back_html'] : '') . '
                                    <div class="header-main-container">';

                $layerslider_id = (isset($args['_uncode_layerslider_list']) && $args['_uncode_layerslider_list'][0] != '') ? $args['_uncode_layerslider_list'][0] : '';
                $this->html.= __(do_shortcode('[layerslider id="' . $layerslider_id . '"]'));

                $this->html.=       '</div><div id="under-slider-widgets-area">';

                /****** NEW CUSTOM CONTENT BOXES UNDER SLIDER *********/

                if ( is_active_sidebar( 'under_slider_1' ) ) :

                    $this->html.= '<div id="under-slider-1">';

                    dynamic_sidebar( 'under_slider_1' );

                    $this->html.= '</div><!-- #primary-sidebar -->';

                endif; 

                if ( is_active_sidebar( 'under_slider_2' ) ) :

                    $this->html.= '<div id="under-slider-2">';

                    dynamic_sidebar( 'under_slider_2' );

                    $this->html.= '</div><!-- #primary-sidebar -->';

                endif; 

                if ( is_active_sidebar( 'under_slider_3' ) ) :

                    $this->html.= '<div id="under-slider-3">';

                    dynamic_sidebar( 'under_slider_3' );

                    $this->html.= '</div><!-- #primary-sidebar -->';

                endif; 

                $this->html.= '</div></div>';

                break;

The widgets display but are not nested in the <div id="under-slider-1">,<div id="under-slider-2">,<div id="under-slider-3"> divs.

I really do appreciate any and all help on this.

[diafol]

Your registrations are being hooked on to widgets_init and displayed accordingly. The case 'header_layerslider' code is printing out the content as part of the "header" - which I'm assuming is the correct behaviour (although not your intention) for the code you've written. I think you need to target the under_slider_container with specific ids directly.

Although you're querying under_slider_2, it doesn't mean you are now printing to its contents:

            if ( is_active_sidebar( 'under_slider_2' ) ) :
                $this->html.= '<div id="under-slider-2">';
                dynamic_sidebar( 'under_slider_2' );
                $this->html.= '</div><!-- #primary-sidebar -->';
            endif; 

[phaedrusGhost]

Hi diafol and thank you for the explanation. Initially, I had this inside the case 'header_layerslider'code so that this will display within the slider div. Reason for this is I need the slider to display behind these opace under_slider_1,2,3's.

I think you need to target the under_slider_container with specific ids directly.

I would grearly appreciate a bit of assistance in pointing me in the right direction on this one.

Although you're querying under_slider_2, it doesn't mean you are now printing to its contents:

Perhaps I am a bit out of my Wordpress element but, shouldn't these under_slider_(s) nest within my under-slider-widgets-area div id?

I can't thank you enough for your help.

[phaedrusGhost]

I've made the under_slider_container divs with unique ids but I still don't understand why these will not nest properly.

[diafol]

Sorry out for fee days. Anybody else in meantime?

[diafol]

Could you give the html as you wish to see it?