Place the button and text box side by side

I am attempting to align the following button and text box side by side, with the button on the left and the text box on the right. I have tried using span and margin properties, but currently the text box is displaying below the button. Can you suggest a different approach to accomplish this layout?

<div style="display: flex;">
    <input type="submit" id="Connect"  style="width: 150px;" class="btn action-but" />
    <div class="form-group" style="margin-left: 10px;">
        @Html.LabelFor(model => model.Service, new { @class = "col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(model => model.Service, new { @style = "width: 700px;" })
            @Html.ValidationMessageFor(model => model.Service)
        </div>
    </div>
</div>
htmlcssasp.netasp.net-mvctwitter-bootstrap

Answer №1

If you are trying to display something similar to this: [button] [label text errors]

An easy way to achieve that is by adding the following style: display: inline-block;

With your code, the outcome will look like this:

<span>
    <input type="submit" id="Connect"  style="display: inline-block;margin-left: 195px; width: 150px;" class="btn  action-but" />
    <div class="form-group" style="display: inline-block;">
        @Html.LabelFor(model => model.Service, new { @class = "col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(model => model.Service, new { @style = "width: 700px;" })
            @Html.ValidationMessageFor(model => model.Service)
        </div>
    </div>
</span>

You can view a demo of this on JsFiddle here: http://jsfiddle.net/pR6Wg/

Answer №2

It seems like you are in need of a vertical form layout. Check out this example bootstrap vertical form

Razor illustration

<form class="form-inline" role="form">
  <div class="form-group">
     <button type="submit" class="btn btn-default">Submit</button>
  </div>
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-addon">@</div>
       @Html.TextBoxFor(model => model.Service, new { @class="form-control", @placeholder="Enter email" })
    </div>
  </div>
</form>

Answer №3

Take out the margin-left: 195px from the submit button and place it within .col-md-2 before the label.

Additionally, replace <div class="col-md-10"> with <div class="col-md-8">

DEMO

CODE

<span>

    <div class="form-group">
        <div class="col-md-2">
            <input type="submit" id="Connect" style=" width: 150px;" class="btn action-but" />
        </div>
        @Html.LabelFor(model => model.Service, new { @class = "col-md-2" })
        <div class="col-md-8">
            @Html.TextBoxFor(model => model.Service, new { @style = "width: 700px;" })
            @Html.ValidationMessageFor(model => model.Service)
        </div>
    </div>
</span>

Answer №4

Have you considered using a table for this? Or are you set on using div's?

<table class="col-md-10">
     <td>
           <tr>
               @Html.TextBoxFor(model => model.Service, new { @style = "width: 700px;" })
           </tr> 
     </td>
     <td>
           <tr>
               @Html.ValidationMessageFor(model => model.Service)
           </tr> 
     </td>         
</table>

I hope this information proves helpful! =)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Failing to draw an image on a blank canvas

I'm having trouble with my canvas. I want to clear it and then redraw it 30 pixels to the left on the x axis. However, when I try running the code, the canvas clears but the new image is not drawn. If I remove the "clearRect" function, the images are ...

javascripthtmlcanvas

Creating Bootstrap columns in a 6-6 layout using Pug JS and data

I'm just starting out with the Node.js Express.js framework and I've encountered a challenge. I have retrieved a Category array from an API and I want to display these categories in a 6-6 column layout using Bootstrap, but I'm unsure of how ...

javascriptnode.jstwitter-bootstrapexpresspug

Using CSS/HTML to showcase rows in a vertical table format (or similar)

Can someone please help me with formatting my tabular data in a specific way? column A | column B | column C | column D | ------------------------------------------- 1-1 | 2-1 | 3-1 | 4-1 | ------------------------------------------- 1 ...

htmlcss

Animating a SVG element within a group tag using the path element

I'm struggling to make a slice of a circle rotate using the :hover selector in CSS. Even though my initial attempt at applying CSS transformations works perfectly, the rotation stops when I introduce the :hover selector. Below is the HTML and CSS co ...

htmlcsssvg

The outcome varies between PHP Local Host and server environments

I have developed a script for searching lk domains. Below is the code: <form action="" method="GET"> <input type="text" name="dm" placeholder="Enter Domain Name"> </form> <?php if (isset($_GET["dm"])) { $domain = $_GET["dm ...

javascriptphphtmlarrayserror-handling

Screenshots showcasing examples of HTML5 Canvas presentations

I recently discovered html2canvas through a question I had asked previously. I'm now trying to figure out how to use it to achieve the following: Generate a live thumbnail of a website. Clicking on the live thumbnail should load a larger image of th ...

javascripthtmldomcanvashtml5-canvas

Activate just the show more / show less button on the website that has several buttons with identical ids

Whenever the "show more" button is clicked, additional images are displayed in the gallery and the button text changes to "show less". However, in my ExpressionEngine (CMS) templates and entries, all "show more" buttons share the same id, causing other but ...

javascripthtmlbootstrap-4toggle

Is the custom cursor feature malfunctioning in IE9?

In my form, I have a web browser control that uses a custom cursor in the CSS code. Everything appears to be working fine in IE8. Css Code cursor: url(AppDirectiry\Classes\QClasses\ClsDesignHtml\Cursors\arrow.ani); However, it s ...

c#csswinformscursorwebbrowser-control

How can I assign a background image to a specific state or template using AngularJS?

While attempting to style the entire template with a CSS div tag, I encountered an issue. The code snippet used was: <div ng-style="{'background-image': 'url(/images/food.png)', 'background-repeat': 'repeat-y'}"& ...

htmlcssangularjs

Methods for removing an <img> tag when there is no file path provided in the database

I am currently working on a repeater that displays articles, and some may or may not have a picture included. Although it's functioning well, I noticed that when there is no picture included, the alt text still shows up without an actual image. < ...

c#asp.net

Unable to adjust table, row, and cell heights in Outlook template due to HTML/CSS formatting issues

I'm struggling to make the height of the leftmost (commented) nested table adjust automatically based on the content in the right section. It displays correctly in Chrome, but does not stretch in Word/Outlook. Any ideas on how to fix this for Word/Ou ...

htmlcssoutlook

What types of UML diagrams are typically generated for ASP.NET applications?

In my role as a Senior developer at a mid-size company, I am often tasked with working on long-term projects that require a significant amount of development time. While most of the architects I work with do not see the value in creating UML diagrams due t ...

.netasp.netuml

When the button is clicked, I would like to use JavaScript to toggle the visibility of a div, allowing it to open and

I am attempting to toggle a div using JavaScript when the open and close button is clicked. However, I have encountered an issue where the div disappears when the button is clicked, possibly due to post-back. var toggle = function () { var mydiv = d ...

javascriptjqueryhtmlasp.net

Stopping the sound when its' Div is hovered over

I've managed to successfully trigger the audio to play on hover, but I'm having trouble getting it to pause when my mouse leaves the area. Check out the code in action here: https://jsfiddle.net/jzhang172/nLm9bxnw/1/ $(document).ready(functio ...

javascriptjqueryhtmlcss

Requesting HTML content from a PHP file using JQuery Ajax callback

For an ajax request, I am entering a name in an input box to search for data from a database. Everything is functioning properly. <script> $(document).ready(function(){ $('input#name-submit').on('click', function() { ...

phpjqueryhtmlajax

Guide to utilizing ASP.NET Identity 2.0 for onboarding new users through mobile devices

Currently, I am working on an ASP MVC project that utilizes Identity 2.0 for user registration. Users can sign up and create accounts through the Account Controller on the website. Additionally, I have developed an Android application that needs to access ...

asp.netasp.net-mvcasp.net-identityasp.net-identity-2

Trouble with displaying a CSS background image in Google Chrome on the Three.js birds demo

My website displays a background image in both Safari and Firefox, but for some reason Google Chrome is not showing it. I am unsure why this is happening. Do you have any insights on what I might need to adjust? renderer = new THREE.CanvasRenderer(); ren ...

javascripthtmlcssgoogle-chromethree.js

Get rid of the horizontal scrolling issue caused by the navbar

Take a look at this basic Bootstrap example: Check out the demo here. I'm encountering an issue with the navbar causing horizontal scrolling. Any suggestions on how to fix this? Appreciate any help, thank you! ...

htmlcsstwitter-bootstrapbootstrap-4

Creating a CSS grid layout with dual columns to dynamically adjust and accommodate two items in each row

I am attempting to create this layout using CSS grid: https://i.sstatic.net/Ktbnm.png The goal is to have an input and a textarea. The textarea should be of the size of 2 inputs. If there is already a textarea in the previous column, the next column shou ...

csscss-grid

Is it possible to enable the Enter key for logging in on asp.net platforms?

I am facing an issue with my standard asp:login control: <asp:Login ID="mbLogin" runat="server" TitleText="" DestinationPageUrl="~/Default.aspx" PasswordRecoveryText="Forgot your password?" PasswordRecoveryUrl="~/LostPassword.aspx"></asp:Lo ...

c#asp.netauthenticationsubmitenter