How to create a widget with input text field and button beside in service portal

[sinu2]

Hi,

I have to create a widget like below  figure. I wanna create an input text field and button beside in service portal.

 I have coded like below and the result is not like expected

 <form>
<div class="panel panel-default">
 <div class="panel-body">
   <tr>
     <td>
 <input type="text" placeholder="Enter tracking code" class="form-control">
     </td>
     <td>
       <button type="submit" class="btn btn-primary">Submit</button>
     </td>
     </tr>
     <tr>
       <td>
         Please enter a tracking code to track a new shipment
       </td>
     </tr>
 </div>
</div>
   </form>

current result: 

Expected outpit should be like below:

[Prashant16]

Hi Sinu,

Here is and example to add the button on right side:

HTML:

<div id="mybutton">
<button class="feedback">Feedback</button>
</div>

CSS:

.feedback {
background-color : #31B0D5;
color: white;
padding: 10px 20px;
border-radius: 4px;
border-color: #46b8da;
}

#mybutton {
position: fixed;
right: 10px;
}

Output:

Thanks,

Prashant

Mark my answer Correct/helpful if it resolves your issue.

[Prashant16]

You have css id mentioned as btn-btn-primary here:

<button type="submit" class="btn btn-primary">Submit</button>

So just search this in CSS and add as given below

btn btn-primary {
position: fixed;
right: 10px;
}

Thanks,

Prashant

[Prashant16]

Hi Sinu,

Please mark my answer correct/helpful if it resolved your issue.

Thanks,

Prashant

[Raghu Ram Y]

Hello @sinu 

Use the below code, it works tested.

<form class="form-inline">
  <div class="form-group">
     <input type="text" placeholder = "Enter tracking code" class="form-control"> 
    </div>
     <button type="submit" class="btn btn-primary mb-2">Submit</button>
     <p> Please enter a tracking code to track a new shipment</p>
  </form>

Mark my response as both helpful and correct based on the impact.