Dropdown menu wont stick to table - php

I have a CSS related problem, that would look easy, but I have been slamming my head against the wall for the last hour, since the tweaks arround i tried are not applying.
For some odd reason, the select dropdown menu wont stick into the cell, but is placed above the table.See picture below
The loop code to generate the table is build up as followed: (i didnt bother posting the php cause thats not relevant)
echo '<tr class="items">';
echo '<td id="cell11">'.$Date.'</td>';
echo '<td id="cell21">'.$link.'</td>';
echo '<td id="Fright1">'.MakeUserRoleDropdown($StatusId).'</td>';
echo '</tr>';
The CSS is pretty basic:
select { width: 367px; font-family: Verdana; font-size: 12px; color: #666; background: white; border: 1px solid #CECECE; padding: 4px;}
.dropdownrole { width:150px;}
#cell11 { padding-left: 10px; padding-right: 10px; width: 200px; text-align:left;}
#cell21 { padding-left: 10px; padding-right: 10px; width: 200px; text-align:left;}
#Fright1 { padding-left: 10px; padding-right: 10px; width: 200px; text-align:right;}
table.items tr { height: 32px; background:url(../images/tableRow.png); border-top: 1px solid #CCC; padding: 0; margin: 0;}
.items { width: 100%; border-collapse: collapse; color: ##797979; font-family: Verdana; font-size: 11px; }
table { border-spacing:2px;}
dropdownrole is in this case te class applied to the dropdown menu.
As you see, the dropdown wont apply to the row and just is put above the table (even in the code it's not even in the cell) And I cant wrap my head arround why. I made cells already bigger in size (height and width) but no luck.
Did i do something wrong within the CSS?
EDIT
Per request of the dropdown function.
function MakeUserRoleDropdown($StatusId){
echo "<select name='StatusId' class='dropdownrole'>";
$results = LoadRoles();
while($row = mysql_fetch_array($results)){
echo "<option value='".$row['SgroupId']."' ";
if($StatusId == $row['SgroupId']){
echo "selected='selected'";
};
echo ">".$row['SgroupUser']."</option>";
}
echo "</select>";
}
And here is the output in HTML.

I Think the problem is, that you call MakeUserRoleDropdown which contains echos
you proceed to use this method in this string: echo '<td id="Fright1">'.MakeUserRoleDropdown($StatusId).'</td>';
Alter your MakeUserRoleDropdown to this:
function MakeUserRoleDropdown($StatusId){
$str = '';
$str .= "<select name='StatusId' class='dropdownrole'>";
$results = LoadRoles();
while($row = mysql_fetch_array($results)){
$str .= "<option value='".$row['SgroupId']."' ";
if($StatusId == $row['SgroupId']){
$str .= "selected='selected'";
};
$str .= ">".$row['SgroupUser']."</option>";
}
$str .="</select>";
return $str;
}
And you should be good.

Related

I cannot set border radius for a div placed inside a td using inline CSS

I never though this could be an issue at all! I have a div element placed inside a td, which I want to display as a circle.
Here is the code:
<table>
<tr>
<td><div style="width: 20px; height: 20px; border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%; background: #ffcc00;color: #000;">!</div></td>
<td>Something else...</td>
<tr>
</table>
The above HTML markup is actually being created and returned from a function like this:
protected function disclaimer_markup( $link ) {
$sensitive = $link->is_sensitive;
$disclaimer = "";
if( "on" == $sensitive) {
$disclaimer = '<table style="margin: 0 25px 10px 25px;border-top: 1px solid #f58353; border-bottom: 1px solid #f58353;font-family: \'Noto\', sans-serif;">';
$disclaimer .= '<tr>';
$disclaimer .= '<td style="width: 20px; font-size: 18px;color: #f58353;">';
$disclaimer .= '<div style="width: 20px; height: 20px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;background: #f58353; color: #ffffff; text-align: center;font-weight: bold;border-collapse: separate;">!</div>';
$disclaimer .= '</td>';
$disclaimer .= '<td style="font-size: 12px; width: color: #f58353;font-style: italic;"><span style="color: #f58353;">This article has been shared with employees only. Some information in this article may not be appropriate to share with customers or external audiences</span></td>';
$disclaimer .= '</tr>';
$disclaimer .= '</table>';
}
return $disclaimer;
}
The border radius does not work at all. I checked both Chrome and Firefox.
The most surprising thing is when I checked page source, the entire border-radius properties are simply ignored and not rendered at all!
The rendered output looks like this:
<div style="width: 20px; height: 20px; background: #ffcc00;color: #000;">!</div>
What's went wrong? Please suggest.

Dynamic Table with a horizontal Scrollbar in CSS

Working on a homepage I came to the following problem:
I want to display a table - the number of table columns can be chosen with checkboxes. Also, my website should work on a mobile phone, so I put in the correspondingly meta line.
Unfortunately, my website do not work properly as it do not shows my horizontal scrollbar..
PHP Code:
echo '<table id="dynamictable">';
echo '<tr>';
foreach($res_category_arr as $columnname)
{
echo '<th>' . $columnname. '</th>';
}
echo '</tr>';
if (mysqli_num_rows($result) > 0)
{
while($data_current_row=mysqli_fetch_assoc($result))
{
echo '<tr>';
foreach($res_category_arr as $tabledata)
{
echo '<td>' . $data_current_row[$tabledata] . '</td>';
}
echo '</tr>';
}
}
echo '</table>';
res_category_arr represents an array, which contains the wanted column names.
CSS Code:
#dynamictable{
width: 100%;
overflow-y: auto;
margin: 0 0 1em;
text-align: center;
}
#dynamictable::-webkit-scrollbar {
-webkit-appearance: none;
width: 14px;
height: 14px;
}
#dynamictable::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 3px solid #fff;
background-color: rgba(0, 0, 0, .3);
}
Take the ID off the table, and put it on a div AROUND the table.
It should do what you're looking for, but you might also want to add a width:100% back to the table as well.
EDIT: Figured I would add a simple working example here.
http://codepen.io/anon/pen/qaGARr?editors=1100#0
.scroll {
overflow-x:auto;
width:100%;
}
table {
width:100%;
min-width:700px;
}
If you go below 700px wide, the scrollbar shows up

CSS Cannot set table width to be dynamic with screen width

I am having an issue with my CSS, It is by far something i am not good at but i cant seem to solve an issue where my Table will not display based on screen width. It used to be static but since changing the values to % of screen it has not made any visual changes to my Table. (UPDATED BASED ON ANSWERS/COMMENTS)
HTML / PHP
//Table Titles row
echo "<div class='tablediv' style='width:100%; border: 5px solid black'><table name ='ipv4' class='tableparent'><td class='tabled' width='100%'>IP Address</td><td class='table'>Subnet</td><td class='table'>PC Name</td><td class='table'>Owner</td><td class='table'>Customer</td><td class='table'>Customer Site</td></tr>";
//loops through search results and echo table
while ($row = mysqli_fetch_array($view)){
$id = $row['companyId'];
$company = $customers[$id];
echo "<tr><td class='tabled'>". $row['ip']."</td><td class='table'>". $row['Subnet']."</td><td class='table'>".$row['hostName']."</td><td class='table'>". $row['owner']."</td><td class='table'>". $company ."</td><td class='table'>".$row['siteName']."</td></tr>";
}
echo"</table></div>";
CSS
.table
{
border:1px solid black;
text-align: left;
padding:10px;
width:12%;
overflow:hidden;
}
.tabled
{
top:500px;
border:1px solid black;
text-align: left;
width:40%;
overflow: hidden;
}
.tableparent
{
border:1px solid black;
border-collapse:collapse;
width: 95%;
text-align: left;
padding:15px;
table-layout:fixed;
}
.tablediv
{
position:absolute;
width: 95%;
top:70px;
}
Currently this displays the table looking like this
Add width="100%" in table tag, it will set full width as parent div width
echo "<div class='tablediv' style='width:100%'><table width='100%' name ='ipv4' class='tableparent'><td class='tabled'>IP Address</td><td class='table'>Subnet</td><td class='table'>PC Name</td><td class='table'>Owner</td><td class='table'>Customer</td><td class='table'>Customer Site</td></tr>";
Found the issue, The page was POST'ed to by ajax. I then found that the result's div of the search was accidentally surrounded by another div, limiting its width. Thanks for the help

How do I fix the gap in the multiple div which is generated in while loop?

`echo '<div class="col-sm-4">';
echo '<div class="product-image-wrapper">';
echo'<div class="single-products">';
echo'<div class="productinfo text-center">';
echo'<a href="product-detail.php id='.$row[9].'&item='.$_REQUEST['item'].'&product='.$row[2].'&pro=2">';
echo '<img src="image/thumb_images/'.$row['6'].'" />'; // image
$thumb='image/thumb_images/'.$row[6];
echo '<h6>Rs. ' .ROUND($row['SellingPrice']).'/-';
if($row['discount']>0){;
echo ' <span>MRP. ' .$row[4].' /-</span>';
}else{}
echo '</h6>';
echo'<h6>'.$row[2].'</h6>';
$name=$row[2];`
echo' </div>';
echo '</div>';
echo '</div>';
echo '</div>';
CSS
.single-products {
position: relative;
}
.new, .sale {
position: absolute;
top: 0;
right: 0;
}
.productinfo h6{
color:#fff;
}
.productinfo h5{
font-size: 70%;
text-decoration: line-through;
font-weight:bold;
color:#999;
}
.product-overlay h2{
margin-top:250px;
color: red;
}
.single-products h6{
color:#fff;
font-size: 90%;
vertical-align: top;
text-decoration: none;
line-height: 1;
}
.single-products span{
font-size:12px;
text-decoration: line-through;
font-weight:300;
color:#Fff;
}
.productinfo p{
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 400;
color: #696763;
}
here i have write my bootstrap code and below i have attach my screenshot when i fixed size then it work fine but i want to fill up this gap by image... i have attach css also please read out the above code and give me answer related to problem..
please suggest me
With reference to Akhil try the following solution Kuldeep. Hope it works.
<?php
while($row = mysql_fetch_array($result)){
$product_count++ ;
echo '<div class="col-sm-4" style="text-overflow:ellipsis;">';
//put your code here
//put your code here
//put your code here
echo'</div>';
if($product_count % 3 == 0){
echo'<div style="clear: both;"></div>';
}
}
?>
kuldeep, either fix the height of the box and if there is more text you can use text-overflow: ellipsis; for showing more text is there. And one other option is You need to put a clear:both tag after each 3 boxes. You can make it in condition loop I think.

How to make my chat div's appear below each other

I am making a small chat and I am having issues making the div's appear below each other. This is what I have:
$i = 0;
while($i < 5)
{
echo "<div class='MyChatholders'>";
echo "<div class='pro_pic'>";
//my image
echo "</div>";
echo "<div class='ChatInfo'>";
//my information
echo "</div>";
echo "</div>";
echo "<br />";
$i++;
}
MY CSS:
div.MyChatholders
{
left: 5px;
color: black;
width: 290px;
height: 100px;
border-radius: 10px;
}
div.pro_pic
{
left: 5px;
width: 30px;
height: 30px;
border: solid black 1px;
}
div.ChatInfo
{
color: black;
font-size: 14px;
left: 40px;
width: 245px;
}
Please note that the (while function) is just to simulate the information drawn from the DBase.
Now my issues is that all the div's are in one position. I would like them to fall below each other. I do not understand why this is happening. Can someone help me with my code and explain why?
I have looked at this solution but it is not working for me Check here
Add position:relative; to your divs.
Working fiddle based on your code: http://jsfiddle.net/MmGyU/1/
Note: Borders in the fiddle are for demonstration purposes.
div.MyChatholders {
position: relative;
left: 5px;
color: black;
width: 290px;
height: 100px;
border-radius: 10px;
}
div.pro_pic {
position:relative;
left: 5px;
width: 30px;
height: 30px;
}
div.ChatInfo {
position:relative;
color: black;
font-size: 14px;
left: 40px;
width: 245px;
}
Make it print your <div> tags to a new line in your loop using \n
$i = 0;
while($i < 5)
{
echo "<div class='MyChatholders'>\n";
echo "<div class='pro_pic'>\n";
//my image
echo "</div>\n";
echo "<div class='ChatInfo'>\n";
//my information
echo "</div>\n";
echo "</div>\n";
echo "<br />\n";
$i++;
}
EDIT Syntax was wrong, the \n needs to be within quotes
2nd EDIT My mistake, \n is not HTML and it won't work. You could use <br /> instead according to this post
Add clear:both; to your chat divs.

Categories