CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
stack
stack

Reputation: 841

How to add two div into a dialog widget of jQuery UI

I have chosed jQuery UI in my project. And I need two divs which named div1 and div2 in one dialog.

Div1 and div2 should be at same horizontal line. If div1 and div2 in one div, I can choose

<style>
.divclass  div{float:left} 
</style>

<div class="divclass">
<div>
     div1
</div>
<div>
     div2
</div>
</div>

But in jQuery ui, css div{float:left} can't work. Here is My jQuery ui code:

<script>
 $(function(){
 $( "#dialog" ).dialog({
  height:450,
  width:800,
  show: {
    effect: "blind",
    duration: 100
  },
  hide: {
    effect: "explode",
    duration: 1000
  }
});
});
</script>
 <div id="dialog" title="basicDLG">
 <p>jqueryui test</p>
 <div style="">
     div1
 </div>
 <div>
     div2
 </div>
</div>

I have tried :

<style>
 .jui  div{float:left}
</style>
<div id="dialog" title="basicDLG" class="jui">

I have no idea about it, Who can help me ?

Upvotes: 0

Views: 199

Answers (3)

Sanchit Patiyal
Sanchit Patiyal

Reputation: 4920

I think this is what you are asking. 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#dialog" ).dialog();
  } );
  </script>
  <style>
  .jui div{
  float:left;
  border:2px solid red;
  margin:3px;}
  </style>
</head>
<body>
 
<div id="dialog" class="jui" title="Basic dialog">
 <div>div1</div><div>div2</div>
</div>
 
 
</body>
</html>

I don't know how you tried this

.jui  div{float:left}

but it is working fine

Upvotes: 0

JDK92
JDK92

Reputation: 96

Adding 'display: flex' to your outer Divs CSS might also do the job.

Upvotes: 1

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

The issue with your code is you are applying:

.divclass  div{float:left}

on parent div, which is a container <div> for dialog, but you have to apply the float on its child div's.

Try this:

Html:

<div id="dialog">
  <div id="left">Left</div>
  <div id="right">right</div>
</div>

<a href="#" id="open">Open dialog</a>

Css:

<style>
#left {
  float:left;
}
#right {
  float:right;
}
</style>

Upvotes: 0

Related Questions