Align text vertically at the top with a label in a bootstrap table cell, where the label text should wrap around.
<td>
<span>16/12/2018 00:00:00</span>
<p class="label label-danger" style="width:100px;line-height:normal;word-wrap:break-word;white-space: normal;">Some long text here like abcd smnopqurst xyz</p>
</td>label label-danger is no longer available in bootstrap 4, it has been replaced by badge badge-danger
By default, the vertical-align of a td is set to baseline, so make sure to change it to top
To style the P element, add the class badge badge-danger mb-0
<td>
<span>16/12/2018 00:00:00</span>
<p class="badge badge-danger mb-0" style="width:100px;line-height:normal;word-wrap:break-word;white-space: normal;">Some long text here like abcd smnopqurst xyz</p>
</td>
Check out this JSFiddle link for more details
CSS
td{
vertical-align:top;
}
td p.badge{
vertical-align:top;
display:inline-block;
}
Give this code a shot.
<html>
<table>
<tr>
<td>
<span>16/12/2018 00:00:00</span>
<p class="label label-danger" style="width:100px;line-height:normal;word-wrap:break-word;white-space: normal; display: block;">Some lengthy text here, such as abcd smnopqurst xyz</p>
</td>
</tr>
</table>
</html>
Remember to enclose both the span and Paragraph Tag elements within a div, and implement the following CSS style:
div { display: flex; align-items: center;}I'm trying to figure out if there's a more efficient method for storing data within HTML content. Currently, I have some values stored in my HTML file using hidden fields that are generated by code behind. HTML: <input type="hidden" id="hid1 ...
In this codepen, you'll find the first example: Subpar Pen: https://codepen.io/anon/pen/jGpxrp Additionally, here is the code for the second example: Excellent Pen: https://codepen.io/anon/pen/QqBmWK?editors=1100 I'm puzzled why the buttons l ...
I am facing an issue where a <a> tag inside a <div> element is not being recognized properly, causing the <div> height to remain unchanged and not accommodate the link as intended. You can view my HTML/CSS code here: http://jsfiddle.net/ ...
Is there a way to configure the labels in Material-ui + react forms to be displayed beside input fields for better readability? For example: name [input] title [input] instead of name [input] title [input] I have looked through the documentation b ...
I keep encountering the error 'parameter1 is not a valid node' when using document.adoptNode. Here's the code snippet in question: $.ajax({ type: "GET", url: url, datatype: "xml", success: function (results) { ...
Implement a time input using ng-forms <input type="time" class="form-control" path="time" formControlName="time" [ngClass]="{'is-invalid': submitted && f.time.errors}" /> ...
I've created a StackBlitz version to illustrate the issue I'm facing. It seems like the problem might be related to my CSS for buttons... Essentially, when you click on the button at the very top few pixels, it doesn't register the click an ...
I'm attempting to recreate the unique diagonal arrow animation featured on this website: For reference, here is a small boilerplate: https://jsfiddle.net/randal923/x0ywchq5/8/ Any advice on the best way to position and animate the arrow would be gre ...
As a beginner in coding, I am trying to recreate the comment section of the Facebook app where the send icon is integrated into the textarea and positioned at the right end. Although I have been experimenting with some code, I am facing issues where the t ...
I am looking to maintain the aspect ratio of a DIV element, similar to how it's done on Google Maps. <div id="map" style="background-color: grey;width:100%;"> Map here </div> The current setup adjusts the width based on the window size o ...
Working on scraping data from multiple years which are represented by different webpages. I have successfully extracted the 2019 data as expected, but encountering an error while attempting to preprocess the 2016 data in a similar manner. url19 <- &apos ...
The first container is working fine, displaying 2 images vertically, but when there are 6 images, it overflows. The problem lies with container 2, where I want to create a horizontal list of images with overflow (only horizontal). This is the current sta ...
Looking to have this content positioned at the very bottom of my webpage without any empty space below it. I'm having trouble applying the usual CSS to achieve this. .footer li{ display:inline; } <footer> <div cla ...
My code snippet appears fine in full-width view, but when I resize the browser, the images (cards) are not centered and lean towards the left side. How can I correct this issue? This is the HTML code I am using: <div class="container-fluid"> ...
I have an email sender feature on my website where users can fill out input fields and hit send, resulting in me receiving an email. The text from all the input boxes is included in the email body. Additionally, there are some generated texts in divs with ...
I am attempting to retrieve a component using Vue with cdn in order to dynamically re-render from a public project that contains a file named cash-sale.vue with the .vue extension. <script> export default { data(){ return { "rows&quo ...
How can I take the text 'Some random text' and enclose it within a span tag? For example, if I have the following element: <div> Some random text 1 <a href="some_url">Go to Link</a> </div> <div> <spa ...
We have a collection of images stored in the uploads folder within the root directory. Our goal is to display a single image for each user profile. Each user's profile image file name is saved in the database table called user under the field profile ...
Is it possible for a standard HTML element with defined width and height to manage characters using JavaScript, as shown in the code snippet below? <div id="text-habdler-with-width-and-height" ></div> <script> $("element& ...
I'm struggling with centering an element in the header bar of my website. I currently have a single header bar at the top, and inside the <header> tag, there's an unordered list with some items floating left and one floating right. Now, I w ...