I have a gwt project that has a panel where I added a style name to called "dock". When I open my application in Firefox everything is fine but in Chrome, Safari and IE the background isn't complete. This is my css code:
.dock {
background: #e3e8f3 url(img/hborder.png) repeat-x 0px -1000px;
padding: 4px 4px 4px 8px;
width: 100%;
margin: 0;
position: relative;
}
This is how it looks in Firefox (it should look like this) Screenshot
And this is how it looks in the other browsers like chrome: Screenshot
Any ideas how to correct this?
Thanks in advance.
[EDIT:]
This is the html code generated by gwt:
<table cellspacing="0" cellpadding="0" class="dock" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
<tbody>
<tr>
<td align="left" style="vertical-align: top;">
<button type="button" class="gwt-Button gwt-Button-helpButton" title="Zoek hulp"></button>
</td>
<td align="left" style="vertical-align: top;">
<button type="button" class="gwt-Button gwt-Button-browseButton" title="Blader door de database."></button>
</td>
<td align="left" style="vertical-align: top;">
<button type="button" class="gwt-Button gwt-Button-statButton" title="Laat populaire boeken zien"></button>
</td>
<td align="left" style="vertical-align: top;">
<button type="button" class="gwt-Button gwt-Button-search" title="Zoek een boek"></button>
</td>
<td align="left" style="vertical-align: top;">
<input type="text" class="gwt-TextBox gwt-TextBox-searchQuery">
</td>
</tr>
</tbody>
</table>
I noticed with firebug the panel also has got this css markup (this markup is automatically added when compiling in gwt).
element.style {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
try adding a fixed height to your .dock, which is same as background image height, i.e.
.dock { height: 100px }
Put the url in quotes:
background: #e3e8f3 url("img/hborder.png") repeat-x 0px -1000px;
Last time I checked that was the correct format.
Edit: Ah, your problem seems to be that tables aren't responding for some strange reason. Try this.
background: url("img/hborder.png") repeat-x 0px -1000px;
background-color: #e3e8f3;
Related
I am trying to build a timeline component, so the timeline component has majorly 4 components.
A cirlce
A dotted line
left side details
right side details
so i am able to add these components, but how to align this so that can be use based on the dynamic data supplied. The text should be there in the left and right side of each circle.
codesandbox
sample design
I suggest you create your "TimelineEvent" components so they include both the data and the info regarding each event (and receive them as props, obviously).
I'd use a table to keep the rows aligned vertically:
#wrapper {
display: inline-block;
}
table {
border-collapse: collapse;
}
.timeline-event {
height: 100px;
}
.timeline-event:first-of-type .timeline-dash {
top: 50%;
height: 50%;
}
.timeline-event:last-of-type .timeline-dash {
height: 50%;
}
.middle-cell {
position: relative;
}
.circle-wrapper {
position: relative;
width: 20px;
}
.circle {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
background-color: tomato;
border-radius: 100%;
z-index: 2;
}
.timeline-dash {
position: absolute;
width: 50%;
height: 100%;
top: 0;
border-right: 1px solid black;
z-index: 1;
}
<div id="wrapper">
<table>
<tr class="timeline-event">
<td class="data">
Event Data<br/>
Second Row
</td>
<td class="middle-cell">
<div class="circle-wrapper">
<div class="circle"></div>
</div>
<div class="timeline-dash"></div>
</td>
<td class="info">
Event Info
</td>
</tr>
<tr class="timeline-event">
<td class="data">
Event Data<br/>
Second Row<br/>
Third Row
</td>
<td class="middle-cell">
<div class="circle-wrapper">
<div class="circle"></div>
</div>
<div class="timeline-dash"></div>
</td>
<td class="info">
Event Info
</td>
</tr>
<tr class="timeline-event">
<td class="data">
Event Data<br/> Second Row<br/> Third Row
</td>
<td class="middle-cell">
<div class="circle-wrapper">
<div class="circle"></div>
</div>
<div class="timeline-dash"></div>
</td>
<td class="info">
Event Info
</td>
</tr>
</table>
</div>
Is there a way to vertically center this label inside the input? I did try the table/table-cell approach, but it didn't work here.
html:
<table class="header-table">
<tbody>
<tr>
<td class="column-2">
<label>asdf</label>
<input>
</td>
</tr>
</tbody>
</table>
css:
.header-table .column-2 label {
position: absolute;
}
.header-table .column-2 input {
height: 32px;
}
https://jsfiddle.net/tombrito/aj6eb2v6/6/
You can try this:
.header-table .column-2 {
position: relative;
}
.header-table .column-2 label {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.header-table .column-2 input {
height: 32px;
}
<!-- placeholder vertical centered -->
<table class="header-table">
<tbody>
<tr>
<td class="column-2">
<label>asdf</label>
<input>
</td>
</tr>
</tbody>
</table>
Offsetting the label vertically using transform and top. Doing it this way will automatically scale based on the size of the element. No need to guess offsets etc. :)
Well supported in browsers too - http://caniuse.com/#search=transform
Your absolute positioning is not currently relative to the cell it is inside.
.header-table .column-2{
position:relative;
}
.header-table .column-2 label {
position: absolute;
top:50%;
margin-top:-11px;
height:100%;
}
.header-table .column-2 input {
height: 32px;
line-height:32px;
}
<!-- placeholder vertical centered -->
<table class="header-table">
<tbody>
<tr>
<td class="column-2">
<label>asdf</label>
<input>
</td>
</tr>
</tbody>
</table>
Since the height of the container is 32px, you can give a 32px line-height to the label. This might be the easy trick as you don't have to worry about browser support.
See,
.header-table .column-2 label {
position: absolute;
line-height: 32px;
}
.header-table .column-2 input {
height: 32px;
}
td.column-2 {
position: relative;
}
<!-- placeholder vertical centered -->
<table class="header-table">
<tbody>
<tr>
<td class="column-2">
<label>asdf</label>
<input>
</td>
</tr>
</tbody>
</table>
I've found some very strange behaviour with Chrome with respect to the following CSS...
CSS:
table.addressBody {
width: 100%;
min-width: 100%;
}
table.addressBody tr td {
padding: 4px;
width: 40%;
min-width: 40%;
max-width: 40%;
border: none;
vertical-align: middle;
}
table.addressBody tr td.left, table.addressBody tr td.right {
background-color: White;
border: 2px solid #aaa;
}
table.addressBody tr td.centre {
width: 20%;
min-width: 20%;
max-width: 20%;
text-align: center;
}
HTML:
<div class="fitWidth centre">
<strong>Mr Smith</strong><br />
29/05/2014 11:17:00 - Department, Site
</div>
<table class="addressBody">
<tr>
<td class="left">
<select name="ctl00$phBody$repPatients$ctl01$ddlPickup" id="ctl00_phBody_repPatients_ctl01_ddlPickup"></select>
</td>
<td class="centre" style="border: none;"> </td>
<td class="right">
<select name="ctl00$phBody$repPatients$ctl01$ddlDest" id="ctl00_phBody_repPatients_ctl01_ddlDest"></select>
</td>
</tr>
<tr>
<td class="leftShadow" colspan="2">
<img src="../img/other/bottomShadowLt.png" alt="Shadow" />
</td>
<td class="rightShadow">
<img src="../img/other/bottomShadowRt.png" alt="Shadow" />
</td>
</tr>
</table>
(Fiddle)
The problem is the centre cell of the table which has a bottom border, despite the fact that I haven't actually specified that there should be one. I've tried the same code in both IE and FF and both produce the desired result (two outer cells with borders and the inner without).
I have also tried coding the CSS in turn for each border on all of the cells, but as soon as I code the #left cell bottom-border the centre cell is also bordered on the bottom. Also, notice in relation to this question there is no border collapse in the code (unless it's part of Fiddle itself).
Can anyone spot anything obvious that I've missed or know of any bug with Chrome that has a workaround?
-- EDIT --
But you did specify that it have a bottom border:
table.addressBody tr td.centre {
width: 20%;
min-width: 20%;
max-width: 20%;
border-bottom: 2px solid #aaa; <---
text-align: center;
}
As it turns out, my post is, in fact, a duplicate of this question, and so, if you wish to close it, please feel free.
I have a dropdown menu that appears when mousing over cells in a large table in the page. The table gets large enough that cells can sometimes appear at the far right of the window. Mousing over a row shows the menu just below the row, and it dynamically shifts to be under the cell you are hovering (all via JQuery). A menu button or header div is revealed that you can mouseover to show the dropdown, which is a container div which contains two ul's that float: left so they stay side-by-side.
It works fine unless I mouseover a cell at the far right of the page. It works in Safari, in that if the dropdown is outside the window, the ul's stay in their float and bleed off the page/window. But in Firefox, there's a line break/the ul's lose their float the second one breaks to the next line to stay within the window.
I tried this hack, but Firefox 7 still doesn't like it:
CSS floats - how do I keep them on one line?
Any help is greatly appreciated. Relevant markup/code:
HTML
<table summary="" class="tbl">
<thead>
<tr>
<th>Select</th>
<th>Employee<br>ID</th>
<th>Position Title</th>
<th>Job Code</th>
<th>Name</th>
<th>Employee<br>Dept</th>
<th>Organization</th>
<th>Location</th>
<th>FTE</th>
<th>Annualized FTE<br>Base Pay</th>
<th>Performance<br>Rating</th>
<th>Grade</th>
<th>Annualized<br>Base Min</th>
<th>Annualized<br>Base Max</th>
<th>Annualized<br>Compa-ratio</th>
<th>Annualized Range<br>Penetration</th>
</tr>
</thead>
<tbody>
<tr class="dataRow">
<td class="dataCell"><input type="checkbox"></td>
<td class="dataCell">1002</td>
<td class="dataCell">Accounting Manager</td>
<td class="dataCell">ACC1000</td>
<td class="dataCell">Doe, John</td>
<td class="dataCell">Accounting</td>
<td class="dataCell">Portland</td>
<td class="dataCell columnGreen">Abbottabad</td>
<td class="dataCell">1</td>
<td class="dataCell">$82,000</td>
<td class="dataCell">3</td>
<td class="dataCell"></td>
<td class="dataCell columnBlue">$30,000</td>
<td class="dataCell">$50,000</td>
<td class="dataCell">2.050</td>
<td class="dataCell">260%</td>
</tr>
<tr class="dataRow">
<td class="dataCell"><input type="checkbox"></td>
<td class="dataCell">1002</td>
<td class="dataCell">Accounting Manager</td>
<td class="dataCell">ACC1000</td>
<td class="dataCell">Doe, John</td>
<td class="dataCell">Accounting</td>
<td class="dataCell">Portland</td>
<td class="dataCell columnGreen">Abbottabad</td>
<td class="dataCell">1</td>
<td class="dataCell">$82,000</td>
<td class="dataCell">3</td>
<td class="dataCell"></td>
<td class="dataCell columnBlue">$30,000</td>
<td class="dataCell">$50,000</td>
<td class="dataCell">2.050</td>
<td class="dataCell">260%</td>
</tr>
</tbody>
</table>
<div id="menu">
<div id="menuHeader">Menu</div>
<div id="menuItems">
<ul>
<li>Select</li>
<li>View or Edit</li>
<li>Assign to Job Markets</li>
<li>Add a Note</li>
<li>Delete</li>
</ul>
<ul>
<li>Select</li>
<li>View or Edit</li>
<li>Assign to Job Markets</li>
<li>Add a Note</li>
<li>Delete</li>
</ul>
<br style="clear: both"/>
</div>
</div>
CSS
#menu {
position: absolute;
top: 36px;
left: 600px;
display: none;
white-space: nowrap;
}
#menu #menuHeader {
line-height: 24px;
height: 24px;
padding: 0 15px 0 0px;
}
#menu #menuHeader a {
height: 23px;
width: 61px;
margin: 0 58px 0 0;
display: inline-block;
padding: 0 0 0 15px;
}
#menu #menuItems {
border-collapse: collapse;
position: relative;
display: none;
}
#menu #menuItems ul {
float: left;
position: relative;
}
#menu #menuItems li {
display: block;
position: relative;
height: 23px;
line-height: 23px;
}
#menu #menuItems a {
display: block;
position: relative;
padding: 0 15px 0 15px;
}
JQuery
// row highlighting, menu display (visiblity)
$('tr.dataRow').mouseenter(
function () {
$('div#menu').css('display', 'block');
}
);
// menu offset relative to td hovered
$('td').mouseenter(
function () {
var tempOffset = $(this).offset();
var tempHeight= $(this).outerHeight();
var tempTop = tempOffset.top + tempHeight - 1;
var tempLeft = tempOffset.left;
$('div#menu').offset({top:tempTop, left:tempLeft});
}
);
Hi I have the following HTML:
<div id="CONTENT">
<div id="SIDEBAR"></div>
<div id="MAIN">
<table>
<tr>
<td>
<div><label><span><a><span>My Label</span></a></span></label><span class="colon">:</span></div></td>
<td>hsadnsdjfjkasdfhkjadshfjkahsdkfjhasdjkfhjkasdhfjkaf</td>
</tr>
<tr>
<td>
<div><label><span><a><span>My Label with a really long title</span></a></span><span class="colon">:</span></div></label>
</td>
<td>hsadnsdjfjkasdfhkjadshfjkahsdkfjhasdjkfhjkasdhfjkaf</td>
</tr>
<tr>
<td>
<div><label><span><a><span>My Label</span></a></span><span class="colon">:</span></div></label>
</td>
<td><input value="hsadnsdjfjkasdfhkjadshfjkahsdkfjhasdjkfhjkasdhfjkaf" /></td>
</tr>
</table>
</div>
</div>
and my CSS:
#CONTENT{
font-size: 87%;
padding: 5px;
}
#SIDEBAR{
width: 24em; float: left; margin-right: 0.5%;height: 200px;
border: 1px solid green;
}
#MAIN {
/*margin-left: 25em;*/
border: 1px solid purple;float:right;
}
table div{
position:relative;
}
.colon {
position: absolute;
right:0;
}
label {
margin-right: .4em;
}
In IE7 if you resize the window and make it thinner the table seems to move down the page. I would like to simply show a scrollbar like IE9 and FF.
Live Example : http://jsfiddle.net/aJsg2/19/
You'll need to set a min-width on the CONTENT in the stylesheet to be whatever the minimum width of the sidebar + main content is.