CODEWITHSUNDEEP
jqueryhtmlcss
Michael
Michael

Reputation: 13616

How to make two buttons on the same row?

I create two buttons then I atach them to the same do=iv with id=dvSearchTitle.

Here is the code:

     var button = $('<button/>', {
             text: data.d.txtSearch, 
             id: 'btnFeatureLocation',
             click: function () 
             {  
                        parent.parent.mapFrame.SetSelectionXML(data.d.featureSelection);
                        parent.parent.mapFrame.ZoomSelection();     
             }
        }); 

             var button2 = $('<button/>', {
             text: "ddd", 
             id: 'ddd',
             click: function () 
             {  
                alert("ddd");
             }
        }); 

    $('#dvSearchTitle').append(button);
    $('#dvSearchTitle').append(button2);

The result I get two button one above another.

I need to make two buttons on the same row.

UPDATE

Here is JSFiddle.

What do I need to change to make two buttons on the same row?

Upvotes: 0

Views: 1466

Answers (3)

Nims Patel
Nims Patel

Reputation: 1056

Please change width btnFeatureLocation 100% to 50% and add same css in second button.

		 var button = $('<button/>', {
				 text: "button1", 
				 id: 'btnFeatureLocation',
				 click: function () 
				 {  
							//some logic
				 }
			});	
			
		 var button2 = $('<button/>', {
				 text: "button2", 
				 id: 'ddd',
				 click: function () 
				 {  
					alert("ddd");
				 }
			});	
			
						
		$('#dvSearchTitle').append(button);
		$('#dvSearchTitle').append(button2);
.exosphere{
	border: solid 1px #333;
	-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);	
}


.searchResults{
	background-color: rgba(255, 255, 255,0.7);
	 position:absolute; 
	 z-index:100;
	left: 20%;
	overflow: hidden;
	font-family: Arial; 
	font-size: 14pt;
}


#btnFeatureLocation{
	 width: 50%; 
	 height:40px;
	 border: 1px black solid;
	 font-weight: bold; 
}

#ddd{
	 width: 50%; 
	 height:40px;
	 border: 1px black solid;
	 font-weight: bold; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dvSearchTitle" class="exosphere searchResults"></div>

Upvotes: 0

backbone
backbone

Reputation: 98

Look in this answer here

in short:

style ="display: inline-block;"

Upvotes: 1

Rahele Dadmand
Rahele Dadmand

Reputation: 573

try this in your css: 

#dvSearchTitle button {display:inline-block}

Upvotes: 1

Related Questions