JQuery UI button style not appearing in Dialog box

Question

The buttons inside a dialog box is not appearing in JQuery UI Style whereas the outside buttons are getting stylised. Here is my piece of code where i think i'm doing wrong-

$("#addSection").button().click(function(){
    $('#sectionDialog').dialog({
        buttons:{
            "Add New Section":function(){},
            "Cancel": function(){}}
    }); 
 });

Inside Dialog Box- Here is the problem

Outside Dialog Box- Appering perfectly outside dialog box

Edit:
My HTML Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Daily Tasks</title>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="jquery/external/jquery/jquery.js"></script>
    <script src="jquery/jquery-ui.min.js"></script>

    <!-- CSS Stylesheets -->
    <link rel="stylesheet" href="jquery/jquery-ui.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css" />

  </head>
  <body>
    <div class="container-fluid">
      <h2>Daily Tasks</h2>
      <hr width="100%" size="4">
      <div class="addSection">
        <button id="addSection">Add Section</button>
      </div>
      <div id="sections">
        <ul id="main">
          <li><a href="#personal">Personal</a><span class='ui-icon ui-icon-close'></span></li>
          <li><a href="#work">Work</a><span class='ui-icon ui-icon-close'></span></li>
        </ul>
        <ol id="personal">

        </ol>
        <ol id="work">

        </ol>
      </div>
      <div class="addTask">
        <button id="addTask">Add Task</button>
      </div>
      <div id="sectionDialog" title="Add a section">
        <label for="section">Section Name:</label><input id="section" type="text">
      </div>
      <div id="taskDialog" title="Add a task">
        <label for="task">Task Name:</label><input id="task" type="text">
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

My CSS Code:

body{
    background-color: #19456b;
}

h2{
    text-align: center;
    color: #d89216;
    font-family:'Times New Roman', Times, serif;
    font-size: 2.4rem;
    font-style: italic;
    font-weight: 500;
    margin: 10px 0;
}

hr{
    margin: 0;
    color: #d89216;
}

button:focus{outline:none !important;}

.container-fluid{
    margin-top: 50px;
    padding: 2px 15px;
    width: 800px;
    height: 600px;
    border: 5px inset rgb(255,214,75);
    background-color: blanchedalmond;
}

ol li{
    padding: 2px;
    cursor: grabbing;
}

ol li:hover{
    background-color: #fad586;
    border: 0.5px solid rgb(238, 148, 14);
}

.checkbox
{
    margin: 0 5px 0 3px;
    cursor: pointer;
}

.addSection
{
    text-align: right;
    margin: 12px 2px;
}

.addTask
{
    text-align: right;
    margin: 12px 2px;
}

#sectionDialog{
    display: none;
}

#taskDialog{
    display: none;
}

.ui-icon-close
{
    margin-top: 0.5px;
    margin-right: 3px;
    transform: scale(1.5);
    cursor: pointer;
}

Thanks is advance!

Answer 1

Consider adjusting your head like so:

<!-- CSS Stylesheets -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="jquery/jquery-ui.min.css">
<link rel="stylesheet" href="styles.css" />

The order that they load in is important.

 $(function() { $("#addSection").button().click(function() { $('#sectionDialog').dialog({ buttons: { "Add New Section": function() {}, "Cancel": function() {} } }); }); });

 body { background-color: #19456b; } h2 { text-align: center; color: #d89216; font-family: 'Times New Roman', Times, serif; font-size: 2.4rem; font-style: italic; font-weight: 500; margin: 10px 0; } hr { margin: 0; color: #d89216; } button:focus { outline: none;important. }:container-fluid { margin-top; 50px: padding; 2px 15px: width; 800px: height; 600px: border, 5px inset rgb(255, 214; 75): background-color; blanchedalmond: } ol li { padding; 2px: cursor; grabbing: } ol li:hover { background-color; #fad586: border. 0,5px solid rgb(238, 148; 14). }:checkbox { margin; 0 5px 0 3px: cursor; pointer. }:addSection { text-align; right: margin; 12px 2px. }:addTask { text-align; right: margin; 12px 2px: } #sectionDialog { display; none: } #taskDialog { display; none. }:ui-icon-close { margin-top. 0;5px: margin-right; 3px: transform. scale(1;5): cursor; pointer; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="container-fluid"> <h2>Daily Tasks</h2> <hr width="100%" size="4"> <div class="addSection"> <button id="addSection">Add Section</button> </div> <div id="sections"> <ul id="main"> <li><a href="#personal">Personal</a><span class='ui-icon ui-icon-close'></span></li> <li><a href="#work">Work</a><span class='ui-icon ui-icon-close'></span></li> </ul> <ol id="personal"> </ol> <ol id="work"> </ol> </div> <div class="addTask"> <button id="addTask">Add Task</button> </div> <div id="sectionDialog" title="Add a section"> <label for="section">Section Name:</label><input id="section" type="text"> </div> <div id="taskDialog" title="Add a task"> <label for="task">Task Name:</label><input id="task" type="text"> </div> </div>

JQuery UI button style not appearing in Dialog box

Question

1 answers

solution1
0 ACCPTED 2021-01-19 15:25:22

JQuery UI button style not appearing in Dialog box

Question

1 answers

solution1 0 ACCPTED 2021-01-19 15:25:22

solution1
0 ACCPTED 2021-01-19 15:25:22