0

I am trying to implement semantic-ui in WordPress with Contact Form 7 plugin. I included semantic-ui css and js in head section. My inclusion is like below 

<link rel='stylesheet' id='dashicons-css'  href='http://127.0.0.1/sm/wp-includes/css/dashicons.min.css?ver=5.2.2' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css'  href='http://127.0.0.1/sm/wp-includes/css/admin-bar.min.css?ver=5.2.2' type='text/css' media='all' />
<link rel='stylesheet' id='wp-block-library-css'  href='http://127.0.0.1/sm/wp-includes/css/dist/block-library/style.min.css?ver=5.2.2' type='text/css' media='all' />
<link rel='stylesheet' id='wp-block-library-theme-css'  href='http://127.0.0.1/sm/wp-includes/css/dist/block-library/theme.min.css?ver=5.2.2' type='text/css' media='all' />
<link rel='stylesheet' id='contact-form-7-css'  href='http://127.0.0.1/sm/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=5.1.3' type='text/css' media='all' />
<link rel='stylesheet' id='twentynineteen-style-css'  href='http://127.0.0.1/sm/wp-content/themes/twentynineteen/style.css?ver=1.4' type='text/css' media='all' />
<link rel='stylesheet' id='twentynineteen-print-style-css'  href='http://127.0.0.1/sm/wp-content/themes/twentynineteen/print.css?ver=1.4' type='text/css' media='print' />
<link rel='stylesheet' id='semantic_ui_style-css'  href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css?ver=5.2.2' type='text/css' media='all' />
<script type='text/javascript' src='http://127.0.0.1/sm/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'></script>
<script type='text/javascript' src='http://127.0.0.1/sm/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type='text/javascript' src='http://127.0.0.1/sm/wp-content/themes/twentynineteen/js/school_management.js?ver=5.2.2'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js?ver=5.2.2'></script>

I read this SO post. As per this post I added $('.ui.dropdown') .dropdown(); this code as like below

enter image description here

But I am getting below output

enter image description here

How can I solve the issue ?

abu abu
  • 6,599
  • 19
  • 74
  • 131

1 Answers1

1

If you initialize with $('.ui.dropdown').dropdown();make sure your page references dropdown.js

Imtiaz Epu
  • 171
  • 1
  • 5
  • Thanks @Imtiaz Ahmed. How can I references dropdown.js ? Thanks – abu abu Aug 03 '19 at 03:39
  • in footer you can try with this- $(document).ready(function(){ $('.ui.dropdown') .dropdown(); }); – Romi Aug 03 '19 at 11:54
  • 1
    @abuabu you need to enqueue your assets for admin panel. **In function.php** `function semantic_ui_assets($screen) { if ( 'options-general.php' == $screen ) { wp_enqueue_script( "pqrc-minitoggle-js", plugin_dir_url( __FILE__ ) . "/assets/js/dropdown.js", array( "jquery" ), "1.0", true ); } } add_action( "admin_enqueue_scripts", "semantic_ui_assets" );` – Imtiaz Epu Aug 05 '19 at 03:10