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

It appears that my array is not being properly populated by my callback functions

I am encountering an issue with my callback functions. The objective of my code is to send 16 GET requests to a REST API in order to retrieve 16 distinct JSON files. These JSON files are then supposed to be converted into dictionaries representing the foot ...

Utilizing Google Maps to generate outcomes for an online platform

My approach with Google Maps is a bit unconventional. Instead of rendering images, I aim to execute JavaScript code that processes data and returns a text response. However, I soon realized that running JavaScript as a remote web service might not be pos ...

Having trouble retrieving post data using Jquery Ajax post method

I'm currently attempting to perform an AJAX post using the following code snippet: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> ...

Managing the response from a dataless AJAX GET request

I find myself stuck on a seemingly simple issue. I am currently working on refining a basic AJAX GET request function that deals with response handling. There is no data being sent out with the request; instead, the data is managed through the GET URL. Whi ...

I am looking to dynamically generate HTML elements using AngularJS based on data from a JSON file

Although there are existing answers to this question, I have a specific approach that I need help with. I've already made progress but could use some guidance. This is my Controller : angular.module('dynamicForm.home-ctrl',[]) .con ...

Get the nearest H2 value in jQuery that is not a direct parent or child

In search of the h2 value closest to where the click occurred. The h2 resides within a sibling of the parent div. There are multiple div elements containing different h2 values. When a link is clicked, the nearest h2 value needs to be retrieved. <div c ...

The trio of Angular, jQuery, and Chrome extensions is a powerful

I'm currently working on developing a Chrome extension that can alter the content of a specific website. However, since I don't have access to the source code of the website, I need to make these modifications using JavaScript. The goal is to ma ...

Astro Project experiencing issues with loading SRC folder and style tags

After setting up a brand new astro repository with the following commands: npm create astro@latest npm run dev I encountered an issue where the default project template failed to display correctly on my computer. Here is how the page appeared: https://i. ...

Dynamic divs to occupy the rest of the available vertical area

I have been experimenting with a new website layout and created a form setup. However, I am facing an issue with the fluidity of the layout. While the items are floating into position, there is a problem where if the item on the right is 400px bigger than ...

AJAX allows developers to declare variables within their code to

Here is a snippet of my JavaScript code: $(\"img.agree\").click(function() { var follow_id = $(this).attr(\"id\"); var user_id = $(\"img.user_id\").attr(\"id\"); $.ajax({ type: \"POST& ...

jQuery append reduces size

Are there any tips to improve efficiency and clarity when using .append? For example: $('body').append("<div class='overlay'></div>"); // Standard way $('body').append("div.overlay"); // Is this alternative bette ...

Ways to expand a navbar background without compromising the central alignment of its elements

I need the blue color of the navigation bar to cover the entire screen, while keeping the About, Updates, and Who am I? links centered. The background should adjust accordingly if there are any resizing changes. If there's a better method for centerin ...

Sending a JavaScript variable with jQuery Ajax

<select id="selectmaterial" class="textbox" size="12" name="materials" style="width:250px" multiple> <?php if($materials!=null&&$mater ...

jQuery UI Error: e.widget.extend cannot be used as a function

Recently, I made some changes to my jQuery files which now include jQUery UI for using the tooltip feature. However, I am facing an issue where Javascript is throwing the following error: TypeError: e.widget.extend is not a function Can someone provide ...

Ways to display or conceal an anchor tag depending on the database value

I am facing an issue with my aspx page where I have a listview containing three tags - one for hotel invoice, the second for package, and the third for vehicle. Currently, all three tags are visible. What I want is for the visibility of the tags to chang ...

Most effective strategy for handling PHP processing delays

As a newcomer to web programming, I appreciate your patience with me. I have developed a web page that submits form data to a PHP exec() function. This function retrieves data from a website, processes it in different ways, and saves it on my server. Whil ...

Is my page not displaying correctly due to compatibility view?

My client "jordanzad.com" has a website where the main page design appears broken when viewed in compatibility view. Can you help fix this issue? ...

Struggling to choose a target following the activation of a personalized JavaScript trigger

Below is the basic structure of the trigger and target elements. <div id="search"> <form id="searchForm" action=""></form> </div> <div class="searchResults"></div> When a user enters a search term, the searchResu ...

Unable to prevent AJAX request initiated by setTimout

Despite coming across various posts discussing how to abort AJAX requests using the .abort() function, I am still unable to make it work in my case. One example of such discussion can be found in this particular post. Currently, my code initiates repeated ...