I have a table under a searchbar. When I write something inside it, it filters that word with my skills list and the table appears bottom the bar.
Everything works well but not the size of this div because it have an height of 300px so if I have 10 skills is ok, but if the skill are, for example, 2, every td will have a height of 150px.
So I would like to fix this with a max height of 300px and when the rows decrease I want the table to get smaller.
HTML
<div class="container">
<ng-container
*ngIf="searchString.searchString && (searchSkills.getAllSkill() | filterAll : searchString.searchString) as filteredSkills">
<ng-container *ngIf="filteredSkills.length > 0">
<div class="suggerite">
<cdk-virtual-scroll-viewport [itemSize]="10" class="sugtab style-bar modal-bar">
<table class="sugtab">
<tbody>
<tr *cdkVirtualFor="let skill of filteredSkills" class="sugtag">
<td (click)="addToSearch(skill)" class="skill">
{{skill.name}}
</td>
</tr>
</tbody>
</table>
</cdk-virtual-scroll-viewport>
</div>
</ng-container>
</ng-container>
</div>
CSS
.suggerite{
position: relative;
border: 1px solid #064a94;
border-radius: 5px;
background-color: rgba(255,255,255,0.9);
color: #064a94;
z-index: 100;
cursor: pointer;
padding-left: 0 !important;
padding-right: 0 !important;
}
.sugtab{
height: 200px;
width: 100%;
font-family: sans-serif;
}
tr.sugtab {
height: 50px;
}
td.skill{
padding: 3px;
}
I tried to use max height and different things but probably in wrong places.
Related
I have multiple tables across my application. (plain html, css etc, no framework except jQuery)
In some of the td's inside of those tables i have input fields. In some inputs i want to place a downwards pointing arrow, so that the user knows they can click on it to get a custom made dropdown list.
For a while now i've been using something in the line of the example shown below.
So, the user needs to see an input field inside of which on the right side there is a downwards facing arrow.
Also, the text that the user fills in the input field must not go underneath the arrow.
The issue is that the arrow has a fixed width of 20px and a height of 20px, but the input field needs to be as wide as the width of the td minus the width of the arrow (20 px). Setting the input's width to a percentage doesn't work because when the td varies in size, there will be a blank space in between the input and arrow.
CSS:
.col1{
width: 300px;
background-color: yellow;
}
.col2{
width:300px;
background-color: lightgrey
}
.col1 input{
width: 100%;
}
.ArrowBox {
position: relative;
right: 0px;
width: 20px;
height: 20px;
display: inline-block;
background-color: red;
}
.ArrowIcon {
position: relative;
top: -3px;
left: 4px;
width: 10px;
height: 10px;
border: solid white;
border-width: 0 1px 1px 0;
display: inline-block;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
HTML:
<table>
<tr>
<td class="col1">
<input type="text" value="" class="input1">
<i class="ArrowDownBox">
<i class="InputArrowDownIcon"></i>
</i>
</td>
<td class="col2">Line 1, Column 2</td>
</tr>
<tr>
<td class="col1">
<input type="text" value="" class="input2">
<i class="ArrowDownBox">
<i class="InputArrowDownIcon"></i>
</i>
</td>
<td class="col2">Line 2, Column 2</td>
</tr>
</table>
I've put a simple example in a fiddle here:
https://jsfiddle.net/j6ocL702/
The colors used are for example purposes.
Can anyone help me with this? i'm at a loss and google isn't my friend with this atm...
Try giving the input padding-right: 20px; that will stop users typing under the arrow if you position the input relative and the down arrow absolute with right: 0
You'll probably have to fiddle around to make sure default margin or padding isn't being picked up.
I have a table and when hover on certain data of a table column i'm displaying a tool tip. Following image shows it. The issue is when hovering the bottom records, the height of the table won't increase to make room to the tool tip.
The following image shows when hovering data of the top of part of the table. There is no issue with this.
But when hovering bottom part of the table , the position of the tool tip will become incorrect as shown in the following figure (Here i have hovered the last record of the table)
I tried giving much higher hight for the table manually. Then i can get the expected behaviour
I do not want to give the table height manually , i want it to increase height automatically. How can i achieve this target
Table code is as follows
<Table responsive striped borderless hover>
<thead>
<tr id="table_col_names">
<th className="label_type2 pl-lg-5 pl-xs-2 pb-4">Allowed Stations</th>
</tr>
</thead>
<tbody>
{consumers.consumerData && consumers.consumerData.map((item, key) => {
return (
<tr key={key}>
<td className="cell_style pl-lg-5 pl-xs-2">
<OverlayTrigger
placement='bottom'
overlay={
<Tooltip bsPrefix="consumer_tooltip">
{Object.values(this.groupData(item.allowedChargingStations)).map((evc,key) => {
return (
<div>
<p>{evc.groupName}</p>
{evc.stations.map((evcStation, key) => {
return (
<p className="ml-3">
<li>{evcStation.name}</li>
</p>
)
})}
</div>
)
})}
</Tooltip>
}
>
<label className="cp">{item.allowedChargingStations.length} stations</label>
</OverlayTrigger>
</td>
</tr>
)
})}
</tbody>
</Table>
i have used react bootstrap component OverlayTrigger and Tooltip for the tool tip.
tool tip css
.consumer_tooltip{
background: rgba(24, 68, 119, 0.5);
backdrop-filter: blur(10.8731px);
border-radius: 4px;
font-size: 14px;
width: 160px;
padding-left: 10px !important;
padding-top: 20px !important;
font-weight: 600;
margin-left: 64px;
margin-top: 10px;
pointer-events: none;
}
.consumer_tooltip:before{
content: ' ';
height: 0;
position: absolute;
width: 0;
left: 18px;
top:-20px;
border: 10px solid transparent;
border-bottom-color: rgba(24, 68, 119, 0.5);
}
I am simply trying to create a hover, so it hover over a entire section as seen below:
However, every time i hover over my products.
This happens instead
It adds extra white space to the section below and doesn't cover the section properly.
I have tried..
Changing the line height
Adding a new section/div
padding 0, margin 0
div#cat{
/*line-height: 30%;
height: 50px;*/
width: 61%;
margin-left: 39%;
height: 15px;
line-height: 50%
}
/*product area rollover/hover*/
div#cat:hover{
background-color: #e86065;
opacity: 0.5;
filter: Alpha(opacity=50);
background-position: 100% 100%;
height: 80%;
}
<div id='cat'>
<table>
<tr>
<td class='full'>
<a name='foodcat$iii' id='prods_nme'>$prod_name</a>
<td>
</td>
<p id='prods_desc'>$prod_desc</p>
</td>
<td class='price'>
<p id='prods_price'>£$prod_price</p>
</td>
<td class='add'>
<a href='Shopping_cart.php?add_item=$prod_id'>+</a>
</td>
</tr>
</table>
</div>
My code is actually a string, which loop information out of a database.
echo("<div id='cat$i' class='cat'>");
echo("<table>");
echo("<tr>");
echo("<td class='full'>");
echo("<a name='foodcat$iii' id='prods_nme'>$prod_name</a>");
echo("<td>");
echo("</td>");
echo("<p id='prods_desc'>$prod_desc</p>");
echo("</td>");
echo("<td class='price'>");
echo("<p id='prods_price'>£$prod_price</p>");
echo("</td>");
echo("<td class='add'>");
echo("<a href='Shopping_cart.php?add_item=$prod_id'>+</a>");
echo("</td>");
echo("</tr>");
echo("</table>");
echo("<br>");
echo("<br>");
echo("<hr id='hr'>");
echo("</div>");
echo("</div>");
echo("</div>");
echo("<br>");
echo("<br>");
$i++;
Your CSS is adding extra height when it changes to hover state. Make sure when you're adding hover styles that you only change the properties you want to - in this case, you don't want to change the height.
You want something like this:
div#cat{
width: 61%;
margin-left: 39%;
height: 15px;
line-height: 50%
}
/*product area rollover/hover*/
div#cat:hover{
background-color: #e86065;
opacity: 0.5;
filter: Alpha(opacity=50);
background-position: 100% 100%;
width: 61%;
margin-left: 39%;
height: 15px;
line-height: 50%
}
ArtOfCode has the correct solution for your problem.
However, it is not a good idea to use tables for formatting. You can see the table padding (which I have done all the right things to eliminate) when the cells are given borders. Tables bring with them a number of formatting problems.
I suggest that you use DIVs instead, and learn the three or four things needed to use float:left and/or flexbox.
table{border-collapse:collapse;}
td{border:1px solid #ccc;padding:0;}
div#cat {
/*line-height: 30%;
height: 50px;*/
width: 61%;
margin-left: 39%;
height: 15px;
line-height: 50%
}
/*product area rollover/hover*/
div#cat:hover {
background-color: #e86065;
opacity: 0.5;
filter: Alpha(opacity=50);
background-position: 100% 100%;
height: 80%;
}
<div id='cat'>
<table>
<tr>
<td class='full'>
<a name='foodcat$iii' id='prods_nme'>$prod_name</a>
<p id='prods_desc'>$prod_desc</p>
</td>
<td class='price'>
<p id='prods_price'>£$prod_price</p>
</td>
<td class='add'>
<a href='Shopping_cart.php?add_item=$prod_id'>+</a>
</td>
</tr>
</table>
</div>
I have a set of HTML elements that I need to style, which I can't change the structure of in any way (yeah, I know).
The HTML has a div that contains two nested spans. The div has padding and the overflow is hidden. The width of the div is set programatically and applied as an inline style.
I would like the text contained within the inner span to be clipped, but still retain the right hand padding as specified on the containing div.
After some research, it appears that the standard approach to this is to use a second nested div but, as I mentioned, I can't change the structure of the HTML.
Currently I have:
<!-- This is what I have to work with (I can't change the structure of this HTML!) -->
<div class="c1" style="width: 100px;">
<span class="c1-inner">
<span class="c1-inner-2">
122333444455555666666777777788888888999999999
</span>
</span>
</div>
<!-- This is how I want the HTML above to display -->
<div class="c2" style="width: 100px;">
<div class="c2-inner">
122333444455555666666777777788888888999999999
</div>
</div>
Styled by the following CSS:
.c1 {
border: 1px solid red;
border-radius: 4px;
background-color: #c0c0c0;
padding: 0 13px 0 13px;
overflow: hidden;
}
.c1-inner {
// No relevant styles here yet
}
.c1-inner-2 {
// No relevant styles here yet
}
.c2 {
border: 1px solid red;
border-radius: 4px;
background-color: #c0c0c0;
padding: 0 13px 0 13px;
}
.c2-inner {
overflow: hidden;
}
A jsFiddle is available here
I need to style the top "button" so that it looks like the second one only using CSS. I have reached the limits of my CSS skills and any help would be very much appreciated.
A simple fix. Most important bit: you can make a span have a display value of block rather than inline, which is its default.
Here's the relevant CSS you need and a working example:
.c1 {
border: 1px solid red;
background-color: #c0c0c0;
padding: 0 13px 0 13px;
}
.c1-inner {
overflow: hidden;
display: block;
}
.c2 {
border: 1px solid red;
background-color: #c0c0c0;
padding: 0 13px 0 13px;
}
.c2-inner {
overflow: hidden;
}
We want this<br>
<!-- This is what i Have to work with -->
<div class="c1" style="width: 100px;">
<span class="c1-inner">
<span class="c1-inner-2">
122333444455555666666777777788888888999999999
</span>
</span>
</div>
<!-- This displays how i want the html above to display -->
<br>
to look like this<br>
<div class="c2" style="width: 100px;">
<div class="c2-inner">
122333444455555666666777777788888888999999999
</div>
</div>
<br>
but cannot change the structure of the html!
I have the following problem of adding a row to a html table with css column specified but when a row is added the columns no longer use the css. Does anyone know why this is happening and how I can get around this? The code is below.
<table class="Grid" style="width: 740px;">
<thead><tr><th class="cbx"><input type='checkbox'/></th><th class="DocType">DT</th><th class="narrowColumn">Pg</th><th class="narrowColumn">V</th><th class="narrowColumn" id="sCol">S</th><th class="srcInfo">SI</th></tr></thead>
<tr id="node" class="gridrow">
<td class="cbx"><input class="cbxLeft" name="IDs" type="checkbox" value="4e420f8e-022a-4640-833e-e37bbdb6d856" /></td>
<td class="DocType"><div style='float:left'><a class="" href="/B/" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: 'GET', updateTargetId: 'Left', url: '/B/', onComplete: Function.createDelegate(this, Poll) });" target="_blank" title="">AA</a></div></td>
<td class="narrowColumn">1</td>
<td class="narrowColumn">1</td>
<td class="narrowColumn">1</td>
<td class="srcInfo"><img alt="SI" src="Content/Images/ico_properties.gif" /></td>
</tr>
<tr id="tr1" style="display: none;">
<td colspan="6" style="margin: 0px; padding: 0px;">
<div style="float: left; width: 50%; margin: 0px; padding: 0px;">Capture Channel: Auto Synchronous Reassembly</div>
<div style="float: left; margin: 0px; padding: 0px;">Indexed By: SomeNetworkId</div>
</td>
</tr>
<script language="javascript" type="text/javascript">
function ShowHide(id) {
var tr = document.getElementById(id);
if (tr.style.display == "none") tr.style.display = "";
else tr.style.display = "none";
}
</script>
<style type="text/css">
.SourceInfo
{
width: 732px;background: red;
border:none;
border-style:none;
}
th.cbx, td.cbx
{
margin: 0;
padding: 0;
width: 13px !important;
text-align: center;
vertical-align: middle;
}
table.Grid .cbx input
{
text-align: center;
padding: 0;
}
table.Grid th.cbx input
{
width: 13px;
margin: -2px 0px -2px 0px;
}
table.Grid td.cbx input
{
width: 15px;
margin: -3px 0px -2px 0px;
}
td.DocType img
{
margin-left:5px;
border:none;
}
th.narrowColumn, td.narrowColumn
{
width: 25px;
text-align: center;
}
.gridrow
{
background:#fff;
}
</style>
sorry all of this couldn't fit in the code for some reason.
thanks for any help,
bruce
when a row is added the columns no longer use the css
If you are talking about the way the column widths change in IE when you unhide the bottom (colspanned) row, this is to be expected.
You haven't specified the widths of all the columns, so in the default ‘table-layout: auto’ mode the browser will guess how to distribute the ‘spare’ table widths to each column. It does this by guessing at how much content there is in each column, based on all the rows. So when you add the extra row, which has an equal amount of content in every column (due to sharing with a colspan), the averaged cell widths get closer to equality and all the column widths change.
If you don't want this behaviour, set the style ‘table-layout: fixed’ on the table. With fixed layout, only the first row of cells makes any difference to the column widths, and any columns you leave with unspecified widths will share all the ‘spare’ width equally. This is probably what you wanted. It's also faster for the browser to render, and allows you to leave off styles on subsequent rows if you're only using them to set width.