When the width of a tr tag is reduced, an <select> and <span> tag will split into two lines

I am working on creating a table that includes a field for each row along with a symbol to indicate mandatory fields. As the screen width decreases, I want the content to break into a new line at a specific point.

Desired behavior: The field width should decrease in relation to the screen size until it reaches a minimum size where it can no longer shrink. The indicator and field must always remain inline.

Below is the code I have created using Bootstrap. I need assistance with this. Let me know if you require more information.

<td style="white-space:nowrap;" class="form-inline">
    <span id="${grMD.sys_id}_mandatory_span" style="color:red; font-size: large;">*</span>
    <select class="form-control" name="${grMD.sys_id}_type" id="${grMD.sys_id}_type" onchange="updateSendTo(this, '${grMD.sys_id}')" required="true">
    </select>
</td>
htmlcssbootstrap-4

Answer №1

Check out the following CSS code to position an asterisk sign absolutely:

.form-inline.required span {
    padding-right: 15px;
    color:red;
    position: absolute;
}
.form-inline.required .form-control, .checkbox-inline {
    margin-left: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<table>
    <tr>
        <td class="form-inline required">
            <span>*</span>
            <select class="form-control">
                <option>Hello World</option>
            </select>
        </td>
        
        <td class="form-inline required">
            <span>*</span>
            <input type="text" class="form-control" placeholder="Hello Universe" />
        </td>
        
        <td class="form-inline required">
            <span>*</span>
            <label class="checkbox-inline">
                <input type="radio" class="" />
                Hello Planet
            </label>
        </td>
    </tr>
</table>

If you encounter any issues, feel free to let us know. Hopefully, this solution will be beneficial to someone!

Answer №2

When placing the mandatory indicator in a narrow column on its own, it will remain on the same line without breaking to a new one.

<td style="white-space:nowrap;" class="form-inline">
    <span id="${grMD.sys_id}_mandatory_span" style="color:red; font-size: large;">*</span>
</td>
<td>
    <select class="form-control" name="${grMD.sys_id}_type" id="${grMD.sys_id}_type" onchange="updateSendTo(this, '${grMD.sys_id}')" required="true">
    </select>
</td>

It's worth noting that modern HTML best practices discourage using tables for layout purposes and instead recommend using tools like the Bootstrap grid system and learning about CSS flexbox.

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

I am looking to add some flair to my ID "checkimg" using JavaScript

JavaScript if ((valid1 && valid2 && valid3 & valid4 && valid5 && valid6 && valid7 && valid8)==1) { // include an image in the specified ID. document.formElem.next1.disabled=false; } else { docume ...

javascriptjqueryhtmlcss

What is the most effective way to utilize a loop in order to generate a comma-separated list of values that does not contain an additional comma

Using @for to generate multiple box-shadow arguments: .myclass { $bxsw : ""; @for $i from 1 through 10 { $bxsw : $bxsw + " -" + $i + "px -" + $i + "px " + brown + ","; } box-shadow: #{$bxsw}; } This results in: .myclass { bo ...

csssass

Show the form for user input

I have an HTML code for a form that requires input. Once the 'OK' button is clicked, the values are sent to a PHP script using $_POST. Is it possible to display the same form again if the input format is incorrect, but do so only within my PHP sc ...

phphtml

In Vue, when you want to display text after reaching a height of 50px, any additional text will automatically be replaced by five full

https://i.stack.imgur.com/mp0YJ.png >>>>>>>>>Explore Sandbox Example <div style="height:50px"> ...

htmlcssvue.js

Accordion symbol for adding or subtracting

Looking for a way to change the Toggle text in my angular 7 application accordion to images or content displaying a + sign for collapse and - for expand. I need to achieve this using CSS in my SCSS stylesheet so that I can later change the color of the sig ...

htmlcssangularsass

Adjust the size of points positioned absolutely on an image map

Are you struggling to position POIs on a picture map correctly? Check out this link for more information: Even after trying CSS scale and re-positioning in media queries, getting the points in the right place seems impossible. What do you think? Can this ...

cssmedia-queriesscale

Navigating a local and server environment with relative paths in a web server's multiple sites

My ASP.NET website is published to a web server with multiple sites, such as www.example.com/SiteA or www.example.com/SiteB. Before publishing, I test the site locally at localhost:12345. When referencing an image path like /Images/exampleImage.gif, it wo ...

javascripthtmlasp.netpath

Hide programmer's comments from public view using personalized PHP scripts

When developing a HTML page, comments such as <!-- Comment 1 --> or within PHP // Comment2 can be easily viewed by right-clicking and selecting "Show code". Is there a way to prevent this from happening? ...

phphtml

Can you point out the syntax error in my flex code?

I'm attempting to redesign my layout grid using flex. It seems that the flex code I commented out is incorrect, possibly due to an issue with setting the width in my .container class. The grid auto property adjusts the columns automatically within my ...

htmlcssflexboxcss-grid

creating an interactive element that seamlessly integrates with a dynamic background image slideshow

Struggling to make this work correctly as a newbie in javascript. I need the background image to slide upon hover and stay active on its selected div when clicked. The html, css, and javascript I have currently work fine - when the user clicks on a div, a ...

javascriptjqueryhtmlcssjquery-animate

Tips for inserting a dropdown arrow below caret on Bootstrap 4

I'm currently utilizing the dropdown feature in Bootstrap 4. My goal is to include an upward arrow for the dropdown menu positioned in the top left corner. In Bootstrap 3, we could utilize caret markup on the button to easily add the arrow to the dr ...

htmlcss

Ways to ensure that an inner div causes the outer div to shift downward

Imagine I have a div. Within this div, there are two divs positioned side by side with the float left property. The div on the left is designated for an image. However, if the image is too tall, it does not expand the outer div to accommodate it. Instead ...

csstemplates

Suggestions for merging 2 distinct :host() selectors with contrasting styles in Angular

I am facing a challenge with combining the CSS of two Angular components into one file. The issue arises from the difference in the :host() code for each component. For example: style1.css includes: :host() { flex: 2; overflow: auto; } style2.css ...

cssangularangularjs

Android Chrome users experiencing sidebar disappearance after first toggle

Over the past few days, I've dedicated my time to developing a new project. I've been focusing on creating the HTML, CSS, and Java layout to ensure everything works seamlessly. After completing most of the work, the design looks great on desktop ...

javascriptandroidhtmlcssgoogle-chrome

Calculate the number of input boxes that have been filled

<input type="number" name="day1"> <input type="number" name="day2"> <input type="number" name="day3> Can anyone help me figure out how to count the number of filled fields in this form? For example, if only day1 is filled, the count resu ...

phphtml

Using jQuery to identify whether the dates displayed in a table are earlier than the current date

I need some assistance with what appears to be a straightforward task. Unfortunately, I lack the expertise required to solve this issue. Essentially, I have a form where I pick a date (for the due date) using jQuery's datepicker. The outcomes are the ...

jquerycss

Tips for adjusting Bootstrap's sub drop-down menu to the opposite side when hovering with the mouse

I'm working on a menu that has a dropdown feature, and here is a snippet of the code: <li class="nav-item flyout"> <a href="#" class="nav-link dropdown-toggle nav_sp_clr {{#ifpage 'quicklink'}}active{{/ifpage}}">Quick Links ...

htmlcssbootstrap-4

Modifying the TITLE dynamically post header insertion: A guide

Is there a way to dynamically change the title of an HTML page based on the content included below the header section using PHP? For example: <html> <header><title>I would like to change</title></header> <!--CONTENT--> ...

phphtml

JS and MUI are combining forces to create a dynamic background change on the page when selecting items from a dropdown menu

I encountered an unusual issue on my website that appears to be related to the UI library I am using. Whenever I click on a select element, the background undergoes a slight change in width, causing the background image to flicker. Initially, I assumed thi ...

javascripthtmlcssreactjsmaterial-ui

Prevent automatic submission of forms when selecting attributes in HTML forms using AngularJS

I need to create a form where users can select their branch of study. Here is the form I have designed- <form method="post" [formGroup]="formData" (click)="dataSubmit()" > <div class="form-group"> <label for="branch">Selec ...

htmlangular