Ways to expand the dimensions of the date range selector input field

Take a look at this image for the mobile viewHello, I am looking to expand the width of the date range selector text box.Click here to see the visual representation

Here is the code snippet:

<div class="row">
    <div class="col-xs-12 col-md-6">
        <label> Date Range</label><br />
        <input type="text" name="daterange" data-GetData="week" data-daterangepickerid="1" id="daterangepicker" class="date-range-picker" value="01/05/2017 - 01/06/2017" />
    </div>
    <div class="col-xs-12 col-md-6">
        <label>Id </label>
        @Html.TextBoxFor(model => model.NRIC, new { @class = "form-control", id = "NRIC" })
    </div>
</div>

I would like the date range text box to have the same width as the regular text box. How can I achieve this?

jqueryhtmlcss

Answer №1

To customize the width of an input field, you have a couple of options:

<input type="text" name="daterange" style="width: 300px" data-GetData="week" data-daterangepickerid="1" id="daterangepicker" class="date-range-picker" value="01/05/2017 - 01/06/2017" />
<!-------------- Adjust the width here --------------^^^^^---->

You can also create a new CSS rule for the input field:

input[name=daterange]{
    width: 300px;
}

Make sure to set the width to your desired size!

If you want to ensure the input field stays within certain boundaries, consider using a container with min-width and max-width CSS rules:

<div style="max-width: 100%; min-width: 50%">
    <input type="text" name="daterange" style="width: 100%" data-GetData="week" data-daterangepickerid="1" id="daterangepicker" class="date-range-picker" value="01/05/2017 - 01/06/2017" />
</div>

Answer №2

If you're utilizing rows and columns, the simplest way to adjust the width is by setting it to 100%. Don't forget to include padding or margins if necessary. Here's an example of CSS code that illustrates this:

.date-range-picker {
    width: 100%;
}

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

What's the best choice for ASP.NET: Using CSS or Themes?

What are the differences between using ASP.NET Themes and CSS for web design? When is it most beneficial to use each approach, and what are the advantages and disadvantages of one over the other? ...

asp.netcssthemes

Creating an element that remains a consistent height despite zooming or resizing the window: A guide with HTML and CSS

Recently, I created a custom scrollbar but faced an issue with its width. Whenever I zoom in or out (Ctrl + mousewheel), the width (set to 10px) changes due to being in pixels. When switched to width: 1vw, it works well with zooming but gets affected by wi ...

javascripthtmlcss

What is the best way to make a child div's height match its parent's height?

I am facing an issue with aligning 2 divs on the same line, separated by a vertical line while ensuring that the line always has the height of the parent div. Despite trying various solutions suggested online, none seem to work for me. I cannot use positi ...

htmlcss

How can I maintain text alignment when it wraps around a floated element?

Currently, I am working on a responsive website project. In the example code provided, I have set the width of the container div to a fixed value to highlight a specific issue. The problem arises when the text wraps onto multiple lines and extends beyond ...

htmlcss

Display a specific tab section upon clicking using jQuery or JavaScript

Hello everyone! I am completely new to JavaScript. I have added a tab slider to my HTML with 3 categories in the tab menu: All, Creative, and Branding. How can I show a div after clicking on one of the list items? I have assigned classes to the list items ...

javascriptjquerycsshtml

Disabling the jQuery event on #id after it has been clicked (or preventing multiple clicks)

Hello everyone! I have been working tirelessly to solve the issue below, but despite my efforts, I am unable to find the correct solution. Here is what I am facing: I have an element with the ID #opener that triggers a jQueryUI modal dialog via ajax whe ...

jqueryajaxmodal-dialogjquery-ui-dialog

What is the best way to include personalized attributes in a form_for?

Here is the code I am working with: <%= form_for @quiz do |f|%> <% @questions.shuffle.each do |q| %> # get_answers returns an array of 4 random answers <% answers = q.get_answers %> <%= f.label q.inquest %><br> ...

htmlruby-on-railsrubyerb

Continue scrolling once you reach the fixed-positioned div

live demo html <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> css .container{ margin: 0; padding: 0; ...

jqueryhtmlcss

Having issues with the functionality of single click in jQuery

I tried to remove the attribute element from a list item, but I am struggling to achieve the desired outcome. When clicking on a list item, it should add a class called "important," otherwise, the class should not exist. Here is my attempt using jQuery: ...

javascriptjquery

Creating a JSON array with JQuery for cloned table rows is a straightforward process that can be achieved

On my HTML page, I have a table where each row gets cloned when the focus is out. Now, when I click on the submit button, I need to write a JQuery script that can iterate through all the table rows and create a JSON array. This JSON array will then be sent ...

jqueryjson

XSLT selecting the remaining elements in a tokenized array

In my XSL document, I have a requirement to generate a hyperlink with text that includes a line break, resulting in two separate sentences. To achieve this, I am utilizing the tokenize function to split words based on whitespace character. <xsl:variab ...

htmlxmltemplatesxslttoken

Trouble with the drop-down menu displaying "string:2" in an AngularJS application

Currently, I am utilizing AngularJS ng-model to choose the value from a drop-down menu. Additionally, I am implementing datatable for organizing the columns. <select id="{{user.id}}" ng-model="user.commit" name="options" ng-change="update_commit_level ...

javascripthtmlangularjs

why is it that I am not achieving the expected results in certain areas of my work?

I am facing issues with getting an alert response from certain buttons in the code. The AC button, EQUALS button, and the button labeled "11" are not behaving as expected. I have tried troubleshooting but cannot identify the problem. Can someone please ass ...

javascripthtmlcsscalculator

Execute JavaScript script whenever the state changes

I have a large table with multiple HTML elements such as dropdowns, textboxes, radio buttons, and checkboxes. Additionally, I have a function that I want to execute whenever any of these items change. Whether it's a selection from a dropdown, typing i ...

javascriptjquery

Ways to clear the cache on a webpage after updating scripts

After scouring the internet for a way to update user cache when a website is modified, I came up empty-handed. The only suggestion I found was setting version control on the URL of the script files... Below, I'm sharing my own solution and I'm w ...

javascriptphpcsshtmlbrowser-cache

Ways to retrieve the text content from a class?

I am attempting to retrieve the string value within a span for each class on the webpage. The HTML structure looks like this: https://i.sstatic.net/qbqj5.jpg. Specifically, I want to extract the price value of "1.53 SKILL". This is my approach: ...

pythonhtmlseleniumclass

Is it feasible to completely erase the coding history of a website that has been indexed

Is it possible to completely erase the code-history of a website once it has been indexed by Google and other search engines? I have some content on a website that I want to remove from history, but I'm not sure if it's possible due to factors li ...

javascripthtmlcsssearch-engine

Rows Within Rows That Outsize Their Parent

I am having trouble with the Bootstrap 4 grid layout while working on Vertical forms. My goal is to place a col-lg-9(child) inside a col-lg-6(parent). For instance: <div class="form"> <div class="row"> <div class="col-lg-6"> ...

htmlbootstrap-4

The text within a textarea that is set to 100% width extends outside of its

I'm encountering an issue with a textarea (and potentially any input element) appearing too wide when the width is set to 100%. Below is my CSS code. Firstly, I am resetting all styles. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, ...

htmlcss

Updating the Facebook Comment Plugin with Jquery once it has finished loading

My goal is to populate the TextArea of a Facebook Comment Plugin so that my text is displayed inside it once it loads. The HTML code for the comment section includes: <div class="fb-comments facebook" data-href="https://www.facebook.com/RighToDignity" ...

jqueryfacebookfacebook-comments