OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to make div height expand with its content using css in WordPress Customizer?

  • Thread starter Thread starter Sam94
  • Start date Start date
S

Sam94

Guest
To make it short, how to make an html element's height expand/reduced with its content using css in WordPress Customizer ?

To clarify more, I'm trying to add a setting/control for the WP Customizer, this setting/control will reduce/expand header's height and its content (logo, menu, social icons). My problem is that I reached my goal of height's reducing/expanding, but the content inside of the header stays in its place without expanding or minimizing. So I want Header content to be like flexible, expandable with header's height.

Here's my code :

Code:
    //Add Header Height value setting
    $wp_customize->add_setting( 'header_height_settings' , array(
        'type' => 'option',
        'capability' => 'manage_options',
        'default' => '#',
        'sanitize_callback' => 'is_numeric_number', // is_numeric_number will check whether the given value is numeric or a number.
    ) );

    //Add Header Height value control
    $wp_customize->add_control( 'header_height_control', array( 
        'type'     => 'number',
        'label'    => __( 'Header Height' ),
        'description' => __( 'This is a custom height.' ), // Tooltip to understand what is this field made for
        'section'  => 'a_s_h_section',
        'settings' => 'header_height_settings'
    ) );

    //sanitizing here
    function is_numeric_number($number, $setting) {
        $numb = is_numeric($number);
        return ( $numb == true ) ? $number : $setting->default;
    }

    function my_custom_css_output() {

    echo '<style>
            /*Simple Mode*/
            #header {
                width: 100%;
                height: ' . get_option( 'header_height_settings', '#' ) . 'px; /* # is the default value of Opacity */
            }

        </style>';
}

I tried with the given code, but it is just controlling header's height, I can make the header looks huge or small, expand it or reduce it, but when it comes to the elements inside of it, they are not moving at all.
<p>To make it short, how to make an html element's height expand/reduced with its content using css in WordPress Customizer ?</p>
<p>To clarify more, I'm trying to add a setting/control for the WP Customizer, this setting/control will reduce/expand header's height and its content (logo, menu, social icons). My problem is that I reached my goal of height's reducing/expanding, but the content inside of the header stays in its place without expanding or minimizing. So I want Header content to be like flexible, expandable with header's height.</p>
<p>Here's my code :</p>
<pre><code> //Add Header Height value setting
$wp_customize->add_setting( 'header_height_settings' , array(
'type' => 'option',
'capability' => 'manage_options',
'default' => '#',
'sanitize_callback' => 'is_numeric_number', // is_numeric_number will check whether the given value is numeric or a number.
) );

//Add Header Height value control
$wp_customize->add_control( 'header_height_control', array(
'type' => 'number',
'label' => __( 'Header Height' ),
'description' => __( 'This is a custom height.' ), // Tooltip to understand what is this field made for
'section' => 'a_s_h_section',
'settings' => 'header_height_settings'
) );

//sanitizing here
function is_numeric_number($number, $setting) {
$numb = is_numeric($number);
return ( $numb == true ) ? $number : $setting->default;
}

function my_custom_css_output() {

echo '<style>
/*Simple Mode*/
#header {
width: 100%;
height: ' . get_option( 'header_height_settings', '#' ) . 'px; /* # is the default value of Opacity */
}

</style>';
}

</code></pre>
<p>I tried with the given code, but it is just controlling header's height, I can make the header looks huge or small, expand it or reduce it, but when it comes to the elements inside of it, they are not moving at all.</p>
Continue reading...
 

Latest posts

Top