Generating a collection of clickable buttons based on a search - customizing the dimensions using CSS

I have encountered an issue where the CSS is not displaying the second word in the buttons, even after removing all CSS from the submit buttons. Instead, it only shows 'robert'. Even when using $_post, only 'robert' is displayed. However, when looping through the buttons, 'robert tables' is displayed, indicating that 'tables' is somehow getting dropped from the name. Changing the name in the database to 'robert_tables' resolves the issue.


As I delve into CSS for the first time, I have stumbled upon a challenge that Google has not been able to provide an answer for.

Beginning with a query:

$query="select name from members where active=1 order by name";

Next, I am creating a table that is five columns wide, spanning 100% of the page, with each column occupying 20%.

echo "<form action='individual.php' method='post'>";
$column = 0;
echo "<table class='fullheight' >";

   while($row = $rs->fetch_assoc()) {
        if ($column == 0) {
        echo "<tr>";
        }
    echo "<td class='cellnopad'><input type='submit' class='submitbtn' name='name' value=".$row['name']." ></td>";

    $column++;
        if ($column >= 5) {echo "</tr>";
        $row++;
        $column=0;
        }
    }
    echo "</table>";
echo "</form>";

While I have achieved the desired layout, the text within each button can exceed the button's dimensions and get cut off. For example, 'robert tables' only displays 'robert'. Is there an auto text size setting for buttons? If so, how can I implement it? Any suggestions on improving this setup would be greatly appreciated, but please keep in mind that I am just starting out.

Answer №1

Kindly modify the layout as follows:

1. #cellnopad should be changed to .cellnopad
2. #submitbtn should be changed to .submitbtn
3. <td id='cellnopad'> should be changed to <td class='cellnopad'>
4. <input type='submit' id='submitbtn' name='name' value=".$row['name']."> should be changed to <input type='submit' class='submitbtn' name='name' value=".$row['name']." />
   Don't forget to close the <input> tag.   
5. .submitbtn {
       height: 40px; // instead of height: 100%;
   }

Remember to use ID for elements that are unique on the page. There should only be one per page.

Check out: http://css-tricks.com/the-difference-between-id-and-class/

Answer №2

With expertise, Kypros provided a solution to the query explained Here.

The correction is: value=".$row['name']." should be changed to value='".$row['name']."'

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

Difficulty with the responsiveness of a website due to issues with the bootstrap grid system

I've been working with a Bootstrap grid that you can find at . While it works perfectly on large desktop screens, everything is a bit messy on mobile devices. The "NEW" text specifically is not visible on mobile and doesn't seem to be responsive. ...

What is the best way to center-align my list within the designated area?

I need help centering a two column list on my webpage. It's currently justified to the left. How can I adjust it? To see what I'm working with, check out my jsfiddle: http://jsfiddle.net/huskydawgs/c2yqmfzt/5/ <p> A banana is an edible fr ...

Watching for changes to an object's value in an AngularJS service triggered by a controller from a separate module (Extended Edition)

Referring to this discussion on Stack Overflow: AngularJS trigger and watch object value change in service from controller The original question was about watching for changes in a service from a controller. I am interested in extending this concept to ...

When YII_DEBUG is disabled, the CSS will not be implemented

My website is built using Yii along with YiiBooster. Everything works fine when I am in DEBUG mode - all styles load and apply correctly. However, when I set YII_DEBUG to false in the index.php file, the CSS files still show as loaded in Firebug, but it ap ...

Tips for ensuring a div stays centered while resizing the window

When I resize the window, the div tab on the right side of the screen moves to the bottom right. How can I make it stay in the middle regardless of screen size? I've tried using margin-left:auto and margin-right:auto but it didn't work. Changing ...

Should I consider implementing Flexbox even if I need to cater to users still using IE9?

Currently, I am embarking on a fresh project centered around constructing a chat window. Typically, I would readily employ Flexbox for this endeavor; nevertheless, one of the stipulations for this project is to ensure compatibility with IE9. While I under ...

Is there a translation issue affecting Chrome version 44?

Recently, Chrome 44 (44.0.2403.89 m) was released and I've encountered some issues with the translate3d feature (on both Mac and Windows versions). This problem is impacting plugins such as fullPage.js and consequently affecting numerous pages at th ...

Is there a way for me to determine the quality of a video and learn how to adjust it?

(function(){ var url = "http://dash.edgesuite.net/envivio/Envivio-dash2/manifest.mpd"; var player = dashjs.MediaPlayer().create(); player.initialize(document.querySelector("#videoPlayer"), url, })(); var bitrates = player.getBitrateInfoListFor("vid ...

navigating through tab menus based on time intervals

I'm a beginner in the world of HTML and website building. I have all my content ready to display on my site, but I'm looking for assistance in automating tab switching. Is it feasible to alternate between tabs every 5 minutes? Can someone guide m ...

"Enhance Your Website with Slider Swipe Effects using CSS3 and

After scouring the internet for various types of sliders, including swipe sliders, I am interested in creating a responsive swipe slider specifically for mobile phones. This would be a full page swipe slider where users can swipe left and right seamlessly. ...

Unable to control audio playback in Android WebView

My Android application features a Web View component. In this Web View, I have incorporated the following HTML code to showcase an audio player: <audio controls="" preload="none"><source type="audio/mpeg" src="test.mp3"></audio> Eve ...

Problems with Bootstrap affix scrolling in Internet Explorer and Firefox

I'm encountering an issue with the sidebar on my website. I've implemented Bootstrap affix to keep it fixed until the end of the page, where it should move up along with the rest of the content at a specific point... Everything seems to be worki ...

Sharing Variables with $(document).ready

I need help understanding why this code is not functioning and how I can fix it. Despite my efforts to use namespaces and IIFEs, I am still unable to make it work. $(document).ready(function() { alert (hi); }); $(document).ready(function() { var hi = ...

PHP bug causing inaccuracies in output results

I've written a PHP script to determine a student's final grade, taking into account weight and target grades. However, the output value it generates is incorrect. Below is my current PHP code: <?php $numassignments = isset($_GET['numass ...

Choose an image and save the selection information for the following page (Tarot card)

I'm in the process of creating a website that showcases multiple tarot cards. The goal is for users to select the cards they're interested in and have their chosen card displayed on the next page. I've implemented some code for selecting the ...

Unable to set SimpleLazyObject as the value for the CustomUser model in Django

Hey everyone, I ran into an issue with my blogpost. Every time I try to add a new one, I encounter this error: ValueError at /pages/blog/new/ Cannot assign "<SimpleLazyObject: <CustomUser: <a href="/cdn-cgi/l/email-protection" class="__cf_email__ ...

I am having trouble getting my divs to show up side by side in one line

I am struggling to get the second div (right-column) to move next to the first div (left-column) in order to create 2 columns of links. I would prefer not to create a separate stylesheet for this small page. <div class="container" style="height: 700px; ...

Ways to expand media queries using sass

I have been using media queries to modify my code. @media (min-width: 576px) .modal-dialog { max-width: 500px; margin: 14% auto; } I want to change the media query, but after searching online, I couldn't find a suitable solution. I know the foll ...

Incorporating additional options onto the menu

I recently designed a menu on https://codepen.io/ettrics/pen/ZYqKGb with 5 unique menu titles. However, I now have the need to add a sixth title to the menu. After attempting to do so by adding "strip6" in my CSS, the menu ended up malfunctioning and looki ...

Utilizing Regex Patterns to Manipulate CSS Attributes

I am dealing with a string containing CSS properties and their values: str = "filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); background: -webkit-linear-gradient(top, black, wh ...