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.
Related
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>
My HTML:
<table style="width:100%;">
<tbody>
<tr style="cursor:pointer; border-bottom:1px solid #ACACAC; height:60px;">
<td style="text-align:right; vertical-align:middle; padding:10px 10px 10px 0px;">
<span style="color:#F87E20;">Copy</span>
<div style="display:inline; color:#ACACAC;"> | </div>
<span style="color:#F87E20;">Export</span>
<div style="display:inline; color:#ACACAC;"> | </div>
<span style="color:#F87E20;">Delete</span>
</td>
</tr>
</tbody>
</table>
The result:
This is all fine, and is working wonderfully. I want to make some QOL changes, though, and while looking into some of the changes I wanted to make, ran into something that is confusing me quite a bit.
The entire row is clickable, as well as the Copy, Export and Delete spans. This becomes a problem when I try to click on Export, but miss by 2 or 3 pixels, and instead navigate away from this area. I wanted to make the clickable area for the spans bigger, so I gave the a style property like so: padding:10px 0px 10px 0px;
The padding works as intended, enlarging the clickable area around the spans, making it easier to click on them. However, I was expecting the padding to also make the entire row taller, but instead it's as if the spans' padding is just flowing over the padding on the parent.
Here are some images to help explain the situation:
Parent:
And Child:
I don't understand why the child's padding is flowing outside it's container, and I don't want to go on in this direction without understanding what's going on. I was wondering if anyone could please help me understand what's happening here?
Your spans are inline elements. Top and bottom padding is ignored in case of inline elements.
By default, spans are inline, and divs are block. However, you can always override these with display: block; or display: inline;. Block elements (also inline-blocks) have full padding support.
See:
table {
width: 100%;
border-bottom: 1px solid #ACACAC;
}
tr {
cursor: pointer;
height: 60px;
}
td {
text-align: right;
vertical-align: middle;
padding: 10px 10px 10px 0px;
background-color: #e0c000;
}
span {
display: inline-block;
color: #F87E20;
background-color: #f0e000;
}
.padded {
padding: 10px 0 10px;
}
div {
display: inline;
color: #ACACAC;
}
<table>
<tbody>
<tr>
<td>
<span>Copy</span>
<div> | </div>
<span class="padded">Export</span>
<div> | </div>
<span>Delete</span>
</td>
</tr>
</tbody>
</table>
See also this article for more on this.
I'm working on a website and I've to create a table with a mouse over effect the effect is only when you go with the mouse on the picture and only on the PDF icon.
What I need now is to apply this effect when you go with the mouse on the single table rows. How can I do it?
HTML:
<td class="thumbnail-item" data-th="PDF"><img src="http://salmenpark-test.nowcommu.myhostpoint.ch/wp-content/uploads/2015/07/pdf.png" alt="PDF" height="24" width="24">
<div class="tooltip">
<img src="qh_1.png" alt="" width="570" height="403" />
<span class="overlay"></span>
<span class="overlay"></span>
</div></td>
CSS :
.thumbnail-item {
/* position relative so that we can use position absolute for the tooltip */
display: inherit;
height: 10px;
max-width: 5px;
}
.thumbnail-item a {
display: block;
}
.tooltip {
/* by default, hide it */
display: none;
/* allow us to move the tooltip */
position: absolute;
/* align the image properly */
padding: 8px 0 0 8px;
z-index: 500;
top: 7px;
left: -8px !important;
max-width: 570px !important;
max-height: 403px !important;
Antionio:
CSS:
.thumbnail-item {
/* delete the line that was here for inheriting the display * /
height: 10px;
max-width: 5px;
}
HTML:
<tr class="thumbnail-item white">...</tr>
<tr class="thumbnail-item grey">...</tr>
etc, etc.
You were adding the "thumbnail-item" css reference to the <td>tag which represents a cell of data. You want the "thumbnail-item" css reference to be on the entire row, so it should be on each <tr> tag instead.
In your Jquery code, use the class of your td.hover function and try with the below code.
$(".thumbnail-item").hover(function() {
//Write your js code what you have written for hover pdf image
});
It would be better for us to understand if you post your jquery code as well.
I would like my table to look like the one in image with CSS. Is there a way to do it because I tried by my side as much as I could but did not work. I would appreciate your help.
Here is my HTML code
<div id="login_fields">
<form id="login_form">
<table>
<tr>
<td>User</td>
<td><input type="text" name="user" id="user" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" id="password" /></td>
</tr>
</table>
</form>
</div>
May I suggest amending your HTML (the table is entirely unnecessary), to the following:
<form action="#" method="post">
<!-- using a label means that clicking the text automatically focuses
the relevant input, the value of the 'for' attribute must match the 'id'
of the relevant input though -->
<label for="uName">User</label>
<input id="uName" />
<label for="pass">Password</label>
<input type="password" id="pass" />
</form>
With the following CSS (amend colours and dimensions according to taste):
form {
/* aesthetics, just to move the label/input pairs from the edge of the screen */
padding: 1em;
}
label,
input {
float: left; /* to allow for width to be given, and for clearing */
border: 1px solid #999; /* amend the following as required */
line-height: 1.2em;
padding: 0.2em 0;
font-size: 1em;
height: 1.4em;
margin-bottom: 0.8em;
}
input + label {
clear: left; /* this styles a label element that immediately
follows an input, and forces a new-line */
}
label {
text-indent: 0.5em; /* moves the text away from the curved corners */
width: 30%;
border-radius: 0.5em 0 0 0.5em; /* handles the curved corners */
}
input {
width: 60%;
border-radius: 0 0.5em 0.5em 0;
outline: none;
}
input:focus,
input:active {
box-shadow: inset 0 0 5px #55f; /* compensates for the fact I removed the
default outline, and gives visual
feedback to show the input is focused/active */
}
JS Fiddle demo.
I'd start replacing the TD's for User and Password with TH's, since they're table headers. Then I'd produce two images, one with the curve in the left and one with the curve in the right, then I'd apply then in the background. The CSS would look like that:
table tr th { background: url(bg-left.png) no-repeat; width: 100px; height: 40px; }
table tr td { background: url(bg-right.png) no-repeat; width: 250px; height: 40px; }
I've removed the font styling to keep it easy to read.
Ok then. I've a skewed button, with a div inside that is de-skewed to make images and text inside not looking like the leaning tower. Now I need inside that button to have a picture in the first 25% of the button, a text in the middle 50% and another image in the last 25%. I've tried with different divs but i had an issue depending on the fact that i have defined something like this:
.button-wrapper div {
background: transparent;
border: 0;
cursor: pointer;
padding: 4px 0;
margin: 0;
width: 100%;
font-family:Impact;
font-size:26px;
font-weight:normal;
text-align: center;
color:#ffffff;
text-shadow:1px 1px 0px #000000;
-webkit-transform: skewX(-35deg);
-moz-transform: skewX(-35deg);
-o-transform: skewX(-35deg);
transform: skewX(-35deg);
}
where button-wrapper is the button that i've skewed. The issue is that if I use other divs the unskewing continues and i have the elements inside the button hang on the other side. Any idea to how i can get what i want. Here's what I've tried for html:
<div class="button-wrapper" href="sport.php">
<div id="inner_text">
<img src="images/icon.gif" width="40px" height="40px">
<span width="200px"> sometext </span>
<img src="images/light.gif" width="40px" height="40px">
</div>
</div>
UPDATE: here's the image
Chances are you have to specify no skewX values on the inner items to avoid them inheriting the CSS from the container.