Databases
StackOverflow2013
Postsdbo
POediting CSS of PHP grid
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POediting CSS of PHP grid
    text
    copied!<p>I have an editable grid where I want to edit the CSS such that the textarea to show the maximum width, but somehow I can't increase the width of the text area.</p> <p>My database has three columns: </p> <ol> <li>ID</li> <li>Name</li> <li>Gossip</li> </ol> <p>I'm retrieving everything and displaying it in an editable grid using PHP.</p> <p><strong>index.php code</strong></p> <pre><code>&lt;?php $db = new mysqli('localhost', 'root', '', 'bollywood'); $db-&gt;set_charset('utf8'); if ($db-&gt;connect_errno) { die('Check the database connection again!'); } $userQuery = 'SELECT Id,Name,Gossip FROM bollywood'; $stmt = $db-&gt;query($userQuery); ?&gt; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { var textBefore = ''; $('#grid').find('td input').hover(function() { textBefore = $(this).val(); $(this).focus(); }, function() { var $field = $(this), text = $field.val(); $(this).blur(); // Set back previous value if empty if (text.length &lt;= 0) { $field.html(textBefore); } else if (textBefore !== text) { // Text has been changed make query var value = { 'row': parseInt(getRowData($field)), 'column': parseInt($field.closest('tr').children().find(':input').index(this)), 'text': text }; $.post('user.php', value) .error(function() { $('#message') .html('Make sure you inserted correct data') .fadeOut(3000) .html('&amp;nbsp'); $field.val(textBefore); }) .success(function() { $field.val(text); }); } else { $field.val(text); } }); // Get the id number from row function getRowData($td) { return $td.closest('tr').prop('class').match(/\d+/)[0]; } }); &lt;/script&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;?php if ($stmt): ?&gt; &lt;div id="grid"&gt; &lt;p id="message"&gt;Click on the field to Edit Data&lt;/p&gt; &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Id&lt;/th&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;Gossip&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;?php while ($row = $stmt-&gt;fetch_assoc()): ?&gt; &lt;tr class="&lt;?php echo $row['Id']; ?&gt;"&gt; &lt;td&gt;&lt;input type="text" value="&lt;?php echo $row['Id']; ?&gt;" /&gt; &lt;/td&gt; &lt;td&gt;&lt;input type="text" value="&lt;?php echo $row['Name']; ?&gt;" /&gt;&lt;/td&gt; &lt;td &gt;&lt;input type="textarea" cols="500" rows="100" value="&lt;?php echo $row['Gossip']; ?&gt;" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;?php endwhile; ?&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;?php else: ?&gt; &lt;p&gt;No actors added yet&lt;/p&gt; &lt;?php endif; ?&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>user.php code</strong></p> <pre><code> &lt;?php // Detect if there was XHR request if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &amp;&amp; strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { $fields = array('row', 'column', 'text'); $sqlFields = array('Id', 'Name', 'Gossip'); foreach ($fields as $field) { if (!isset($_POST[$field]) || strlen($_POST[$field]) &lt;= 0) { sendError('No correct data'); exit(); } } $db = new mysqli('localhost', 'root', '', 'bollywood'); $db-&gt;set_charset('utf8'); if ($db-&gt;connect_errno) { sendError('Connect error'); exit(); } $userQuery = sprintf("UPDATE bollywood SET %s='%s' WHERE Id=%d", $sqlFields[intval($_POST['column'])], $db-&gt;real_escape_string($_POST['text']), $db-&gt;real_escape_string(intval($_POST['row']))); $stmt = $db-&gt;query($userQuery); if (!$stmt) { sendError('Update failed'); exit(); } } header('Location: index.php'); function sendError($message) { header($_SERVER['SERVER_PROTOCOL'] .' 320 '. $message); } </code></pre> <p><strong>style.css code</strong></p> <pre><code>body { font: normal 14px Comic Sans, Comic Sans MS, cursive; } table { width: 500px; } td, th { border: 1px solid #d8d8bf; } th { padding: 5px; font: bold 14px Verdana, Arial, sans-serif; } td { padding: 10px; width: 200px; } td input { margin: 0; padding: 0; // width:200px; font: normal 14px sans-serif; /** Less flicker when :focus adds the underline **/ border: 1px solid #fff; } td input:focus { outline: 0; border-bottom: 1px dashed #ddd !important; } #grid input { // width: 200%; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload