Enhance your table layout with Bootstrap 3 by adjusting textarea size to fill

I am currently in the process of developing a forum and bulletin board software. I am facing some challenges while trying to integrate a reply section into the thread page. You can view what I have implemented so far here.

Html:

<div class="panel panel-default">
<div class="panel-body">
    <table>
        <tr>
            <td class="forum-post-heading-container">
                <img src="http://i.imgur.com/YURsw6g.png" class="img-thumbnail avatar-image forum-image">
                <div class="forum-post-header-padding"></div>
                <div class="forum-post-header-author-name"><a href="./?a=profile&u=test">username</a></div>
            </td>
            <td class="forum-post-contents">
                <textarea id="reply-text" class="form-control"></textarea>
            </td>
        </tr>
    </table>
</div>

Css:

.forum-post-heading-container{
    padding: 15px;  
}
.forum-image{
    width: 100px;
    height: 100px;  
}
.forum-post-header-padding{
    height: 5px;    
}
.forum-post-header-author-name{
    text-align: center; 
}
.forum-post-contents{
    border-left: 1px solid silver;
    padding: 15px;  
}

#reply-text{
    height: 200px;
    width: 150px;
    resize: none;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box
}

Answer №1

Get rid of the .panel-body, add the .table class to your table for full width, and use col-*-* to adjust the width of the second td:

<div class="panel panel-default">
    <table class="table">
        <tr>
            <td class="forum-post-heading-container">
                <img src="http://i.imgur.com/YURsw6g.png" class="img-thumbnail avatar-image forum-image">
                <div class="forum-post-header-padding"></div>
                <div class="forum-post-header-author-name"><a href="./?a=profile&u=test">username</a></div>
            </td>
            <td class="forum-post-contents col-xs-11">
                <textarea id="reply-text" class="form-control"></textarea>
            </td>
        </tr>
    </table>
</div>

Lastly, remove the width from #reply-text and add text-align: center to .forum-post-heading-container.

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

FitText.js malfunctioning

I'm currently experimenting with using FitText.js to dynamically adjust the size of headlines to fit within the limits of the browser width. Interestingly, while this script successfully resizes the text in multiple sections of my website, it seems t ...

Display or Conceal Sub-Header according to Scrolling Position

Question: My goal is to create a specific animation on my website. When loading the page on mobile, I want to display the div with ID "sub-header", but once the user scrolls more than 50px down, I want to hide it. Additionally, if the user scrolls up by 60 ...

Ways to showcase a variable's value in conjunction with text using .html() method

Hello, I need assistance with printing a value in a popup window. Below is the code I am using: "code" $('#warning').html('<p style="font-size: 12px;padding-top: 13px;">The updated list value is <p>' + var11); https://i.s ...

When using jQuery to select elements of a specific class, make sure to exclude the element that triggered the

A dynamic number of divs are generated from a data source. Each div contains an image button and another div with text. While the actual scenario is more complex, we can present a simplified version: <div id="main"> <div id="content_block_1" ...

What is the best way to conceal all input elements in a form?

I have been attempting to conceal input elements within my form by using the code snippet below. Unfortunately, it doesn't seem to be functioning as expected... <html lang="en"> <head> <title>example</title> < ...

Initiating a conversation from deep within a conversation using JQuery Mobile

I've been attempting to open a Dialog from within another Dialog, but so far no success. Take a look at the HTML code below: <a href="#popupDialog" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition=" ...

Interactive text that changes when hovered over in an HTML document

My table contains text and I have implemented code that displays a small text when hovering over it. I would like the entire column to trigger the text display on hover, ideally in a larger size. Any suggestions on how to achieve this? ...

Issue with jquery's .load() and getScript functions

Earlier today, I encountered an issue with a .load() function being called in a script. I managed to solve the problem using .getScript(), but now I'm facing a major issue - the function is being executed multiple times. You can find the full code a ...

Here's a guide on how to retrieve the element type or tag type in Selenium using C#

Let's say we have a tag like this: <a class = "fp-anchor fp-forgot-password pull-right" href = "/Account/ForgotPassword">Forgot Password?</a> == $0 In order to determine the type of element, we need to identify if it is a hyperlink. For ...

Detecting a click event within a hidden div located behind another visible div

I am facing an issue with triggering ng-click in a div that is covered by another div. The current scenario I have is as follows: Basically, I need to activate ng-click on the yellow circle when it is clicked. However, there is another div positioned abov ...

Javascript clock problem, kick off on click

Currently working on a game and in need of a counter that starts when clicked and stops at 00 (From 1m to 00). It is currently starting onload and cycles back to start when it reaches 00. HTML: <body> <div> <div class="timer" >Battle t ...

"Securing digital signatures by storing them as base64 encoded data in the

What is the most efficient way to store a base 64 encoded signature in a MySQL database? I've discovered that some of my signatures are larger than the character limit for varchar. I am currently utilizing jSignature to collect the string. Is this th ...

CSS: text positioning issue observed in Mozilla browser

I am facing an issue with the text position inside the box/button element on my website. The text appears correctly in Chrome, but in Firefox, it is positioned above the box, making it difficult to read. Can someone assist me with fixing the CSS or identi ...

The alignment of Material-UI Button and ButtonGroup is not consistent

I'm puzzled as to why the Button and ButtonGroup elements are not aligned on the baseline in the code snippet provided. Is there a specific property that can be adjusted on the ButtonGroup element to achieve alignment? <!DOCTYPE html> <htm ...

Inserting HTML content into a DIV with the help of jQuery

Looking for a solution with my index.html file. I want to load other HTML files into a DIV by clicking on buttons. Here's an example of what I'm trying to achieve: I've searched through various examples online, but none seem to work for ...

Problem with CSS transition on horizontal scrolling list items

I am currently working on a horizontal list with list items. When I hover over the list, it is supposed to expand horizontally to display more information, although this feature has not yet been implemented. However, I am having trouble understanding why ...

What is the best way to manage a multi-select dropdown with checkboxes in Selenium Webdriver?

Below is a snapshot of the drop-down I am working with. In order to handle multiple selections, I currently have code that clicks on the arrow in the drop-down and then selects the corresponding checkbox. However, I would like a more efficient solution fo ...

Smooth vertical scrolling for the mousewheel using jQuery

I am currently working on a parallax website and I want to enhance the user experience by making the page scroll more smoothly with the mousewheel. I found inspiration from this website: I would love to incorporate a similar smooth vertical scrolling and ...

Unable to add the div using a jQuery click event

Hey there, I'm looking to add a div dynamically when clicking on another div. Check out the code snippet below: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title></title> <script src= ...

Text appears unclear and fuzzy when using Firefox browser

While my website looks fine on Chrome and Opera, it appears blurry on Internet Explorer and Firefox. I've tried researching and applying different CSS styles, but nothing seems to work. Both my Firefox and Internet Explorer versions are up to date, an ...