Tips for aligning the TextBox in the center of an Asp.net website

I have the following HTML/ASP code that I need to center the TextBox on the display page. Here is my code snippet below. Ideally, I would like to have the label displayed next to the TextBox once it is centered.

 <center>  <div class="container"  id="TextBox4" runat="server" width="181px"   bordercolor="Black" borderstyle="Solid">
    <div class="row">
      <div class='col-sm-6'>
        <div class="form-group">
          <div class='input-group date' id='datetimepicker1'>
         <p style="color: #000000; font-weight: bold; "> START DATE AND TIME&nbsp;&nbsp;&nbsp; <asp:TextBox ID="Tb4" runat="server" CssClass="form-control" Width="374px" style="text-align: center">
            </asp:TextBox></p>   
            <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
        </div>
      </div>
      <script type="text/javascript">
          $(function () {
              $('#datetimepicker1').datetimepicker();
          });
      </script>
    </div>
  </div></center>
javascripthtmlcssasp.nettwitter-bootstrap

Answer №1

Give this code a try. I've made some modifications by removing the id=Tb4 width and adding some classes.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication11.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">

        <div class="container" runat="server" bordercolor="Black" borderstyle="Solid">
            <div class="row">
                <div class='col-lg-12'>
                    <div class="row">
                        <div class="form-group">
                        <div class="col-lg-4">
                             &nbsp;
                        </div>
                        <div class="col-lg-4">
                            <div class='input-group date' id='datetimepicker1'>
                                <div class="text-center">

                                      <p style="color: #000000; font-weight: bold;">
                                    START DATE AND TIME&nbsp;&nbsp;&nbsp;
                                          <asp:TextBox runat="server" CssClass="form-control"  Style="text-align: center">
                                </asp:TextBox>
                                </p>
                                </div>


                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                        <div class="col-lg-4">
                             &nbsp;
                        </div>

                    </div>

                    </div>

                </div>
            </div>
        </div>

    </form>
</body>
</html>

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

Simple: What is causing the error message "TypeError: 'int' object is not callable" to appear? (refer to line 24 in the code)

I'm struggling with a coding issue and can't seem to find a solution. Would appreciate it if someone could provide some guidance on what's going wrong. Essentially, this script is designed to fetch the HTML content of a URL, extract specific ...

pythonhtmlregexselenium

Is it considered a best practice to use collection.find() to retrieve all items on a master node in Mongo?

Every night at midnight, a background process retrieves all users from MongoDB and performs various checks and processes on their accounts. I have some questions regarding this process: Is it efficient in terms of performance to use the following query t ...

javascriptpythonmongodb

What is the process for retrieving the search function value in Node Js?

I have been working on creating a search bar functionality using the Express Framework in Node.JS, Handlebars, and MySQL. The connection to MySQL is all set up and functioning properly, I have installed body parser, and even tested the query directly in ph ...

htmlnode.jsexpresswebhandlebars.js

What is the best way to retrieve the outcomes of .query within a class?

Currently, I am working on a NodeJS application using coffee script. My objective is to save the results of a sql query executed by a class into a variable that can be returned by that same class. This is what I have so far: class dataBase mySQL = requ ...

javascriptnode.jscoffeescriptnode-mysql

What is the process for displaying all cookies in node.js?

I recently wrote some node.js code to retrieve cookies for a specific route. router.get('/', function (req, res, next) { var cookies = req.cookies; res.render('cartoons', { Cookies: cookies, }); }); In my cartoons Jade file, the ...

javascriptnode.jsexpresscookiessession-cookies

Tips for creating text that changes size based on the container dimensions

I am looking for a way to ensure that the content within a div container remains neatly contained without overflowing. How can I make the container responsive so that it adjusts its size based on dynamic text? .element { display: inline- ...

javascriptjqueryhtmlcss

Automatically increase the height of a text area as you type beyond the maximum width limit

Is there a way to dynamically expand the textarea width as I type beyond its maximum set width without displaying a horizontal scrollbar? Here is the HTML code in its rendered form: <textarea name="CatchPhrase" class="inp ...

javascriptjquerycssasp.net-mvcrazor

What is the best way to execute a specific set of unit tests in Gulp-Angular using Karma?

In the midst of my AngularJS 1.4 project, fashioned through the Gulp-Angular yeoman generator, I find myself facing a dilemma. With karma and gulp settings already in place, executing gulp test runs all *.spec.js files within the project. However, my desir ...

javascriptangularjsunit-testingkarma-runnerkarma-jasmine

The webpage does not display the updated information from the controller after the Ajax call

Learning the ropes of MVC, I delved into creating a post method for showcasing fresh data post a datepicker selection in jquery. The jquery functionality is up and running smoothly, allowing me to iterate through the new data in the view. However, when i ...

javascriptc#jqueryajaxasp.net-mvc

What is the best way to ensure that my <h1> header stays above my <h2> header at all times?

As a novice in web design, I recently took on the challenge of creating my own website. I am a graphic designer and came up with a mock-up of how I envision the site to look. While I managed to complete most parts of it, there's one specific area wher ...

htmlcssheaderpositionalignment

Steps for creating an expandable menu in the Magento category list

Looking for a way to create a category menu that expands when clicked on? Check out this example of a left menu (not Magento) at Can this be achieved with CSS alone? Or is there a specific module that can help with this functionality? ...

cssmagentowebshop

Tips for utilizing sendToDevice multiple times in a function return value

In my Firebase Cloud Functions script, I have successfully implemented sending push notifications to users using a specified set of token arrays returned by a function: return getTokens(array1).then(tokens => { return (admin.messaging().sendToDevice( ...

javascriptnode.jsfirebasegoogle-cloud-functions

Text in ion-searchbar should be clear

I currently have a search bar implemented on my page <div id="search"><ion-searchbar [(ngModel)]="searchQuery" (change)="onChange($event)" (ionClear)="onCancel($event)" (ionInput)="onInput($event)" debounce="1"></ion-searchbar></div&g ...

javascripthtmlangularjsionic-frameworkionic2

retrieve the height value of a div element using AngularJS

I'm having trouble retrieving the updated height of a div using AngularJS. It seems to only provide the initial value and does not update as expected: vm.summaryHeight = $(".history-log-container").height(); console.log(vm.summaryHeight);//always dis ...

cssangularjs

The function "onFinish" is utilizing the React Hook "useAxios", but it is not part of a React function component or a custom React Hook function

I'm currently working on a project using React and Ant Design. Here is the custom hook useAxios that I created: import { useState, useEffect } from 'react'; import axios from 'axios'; axios.defaults.baseURL = 'http://localho ...

javascriptreactjs

Is there a way to determine if jQuery lightslider has been initialized, and if so, how can I effectively remove the instance?

Currently, I have integrated the JQuery lightSlider into my project. Despite some code adjustments, it is functioning well. My goal is to dynamically replace the lightSlider content with data returned via AJAX, which I have successfully achieved. After r ...

javascriptjqueryhtmlcssajax

Efficiently generating and managing numerous toggle buttons in Reactjs with Material-ui ToggleButtons

Currently, I am exploring the idea of designing a sidebar that incorporates a variable number of toggle buttons generated from an object containing keys and values. However, I am encountering difficulties in utilizing the "key" value to adjust the corres ...

javascriptreactjsmaterial-ui

Utilizing Chrome's Firebug technique for monitoring AJAX requests

I am facing a challenge with my google chrome extension as I attempt to monitor ajax requests while browsing the web. The only method I have found so far is to listen for the DOMSubtreeModified event. This event gets fired during every ajax event, but unfo ...

javascriptajaxgoogle-chrome-extensionfirebuggoogle-chrome-devtools

Evaluating the values of one array in comparison to those of another array

Exploring arrays and comparing their values. Here is an example of an array with values: arr1 = [1,5,6,7,3,8,12]; Now we have another array that we want to compare with: arr2 = [3,5,7]; We need to check if all the values in arr2 are present in arr1. f ...

javascriptarrays

Searching for the closest jQuery value associated with a label input

As a beginner in JQuery, I am looking to locate an inputted value within multiple labels by using a Find button. Below is the HTML snippet. Check out the screenshot here. The JQuery code I've attempted doesn't seem to give me the desired output, ...

javascripthtmljqueryfindlabel