I'm currently in the process of moving my companies documentation over into a wikimedia server. There are quite a few very large and expansive excel sheets I would like to transfer over. I have already implemented scrolling for the tables using this div:
<div style="overflow-x: scroll">
But how would I go about locking the first row and column so users don't have to constantly check where they are?
Use sticky:
<div style="height: 20ex; width: 20em; overflow-x: auto; overflow-y: auto">
{| class="wikitable"
!
! style="position: sticky; top: 0;" | Col1
! style="position: sticky; top: 0;" | Col2
! style="position: sticky; top: 0;" | Col3
! style="position: sticky; top: 0;" | Col4
! style="position: sticky; top: 0;" | Col5
! style="position: sticky; top: 0;" | Col6
! style="position: sticky; top: 0;" | Col7
! style="position: sticky; top: 0;" | Col8
! style="position: sticky; top: 0;" | Col9
! style="position: sticky; top: 0;" | Col10
|-
! style="position: sticky; left: 0;" | Row 1
| Cell 1,1 || Cell 1,2 || Cell 1,3 || Cell 1,4 || Cell 1,5 || Cell 1,6 || Cell 1,7 || Cell 1,8 || Cell 1,9 || Cell 1,10
(many more rows)
|}
</div>
Related
Can someone tell me what is wrong there? Because it throw error "Cannot convert null to 'float' because it is a non-nullable value type"
#model float
<div class="progress-bar">
<div class="progress-green-bar" style="width: #string.Format("{0}", (int?)(Model / 100.0f * 400));">
</div>
<div class="progress-bar-percent-text" style="text-align: center; color: black; font-size: 20px; position: absolute; top: 0; left: 0; right: 0; bottom: 0;">
#((int?)(Model))%
</div>
</div>
NULL means that there is no variable at all so You can not convert something what doeasn't exist. There is nothing what can be converted.
I have the folowing structure:
.wrapper{
position: relative;
margin: 20px;
}
#bottomBar{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -40;
}
#percentageText{
position: absolute;
z-index: 9;
margin-top: 37px;
left: 20px;
background-color: red;
}
<div class="wrapper">
<div class="ldBar"
data-type="fill"
style="margin: 0 auto;"
id="bottomBar"
data-fill-dir="ltr"
data-path="M10 10 H 790 V 90 H 10 L 10 10 M10 10 A 5 5 0 0 0 10 90 M 790 10 a 5 5 0 0 1 0 80"
data-fill-background="rgba(0, 0, 0, 0.0)"
data-fill="red"></div>
<div id="percentageText"></div>
</div>
the text in percentage text is controlled by a JS script that works. I want to change the background of the div where the text is
However background-color does nothing whatsoever to the div of the text.
What am i doing wrong?
set height and width for your div and test it again!you can use below css.
.wrapper{
position: relative;
margin: 20px;
}
#bottomBar{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -40;
}
#percentageText{
position: absolute;
z-index: 9;
margin-top: 37px;
left: 20px;
background-color: red;
height:100px;
width:100%;
}
<div class="wrapper">
<div class="ldBar"
data-type="fill"
style="margin: 0 auto;"
id="bottomBar"
data-fill-dir="ltr"
data-path="M10 10 H 790 V 90 H 10 L 10 10 M10 10 A 5 5 0 0 0 10 90 M 790 10 a 5 5 0 0 1 0 80"
data-fill-background="rgba(0, 0, 0, 0.0)"
data-fill="red"></div>
<div id="percentageText"></div>
</div>
You are changing the background color of the div #percentageText.
Your color red is not showing because the div is empty. Try adding some text inside #percentageText, or increase the width of the element, and your color will become visible.
Looks like there is a bug in HTML classes. Try the same thing using an ID instead of a class. I had the same problem. Classes did not work. An ID did. If this is indeed a bug in HTML (JS, CSS), it needs to be fixed urgently.
I am having three to four elements inside 'th' of a table.
The header label
The sort icon
label of filter but in my case, it is hidden though present in dom
Input text filter or a date range selector wrapped in div.
This 'th' is auto-generated by component library primefaces, I have no control over it. The issue is when there are lots of columns the sort icon for some columns moves to a new line and the input and date range do not align.
--------------------------------------------------------------
label1 long| label2 ^ | label3 ^ | label4 is longg |
^ | _________ | --------------- |^ |
_________ | | | select date | | -------------- |
| | | | select date| |
---------------------------------------------------------------
The HTML output for above is something like
<th id="entityForm:results_table:j_idt280" class="ui-state-default ui-sortable-column ui-filter-column ui-state-active" role="columnheader" aria-label="Task Number: activate to sort column ascending" scope="col" tabindex="0" aria-sort="descending">
<span class="ui-column-title">Task Number</span>
<span class="ui-sortable-column-icon ui-icon ui-icon ui-icon-carat-2-n-s ui-icon-triangle-1-s"></span>
<label id="entityForm:results_table:j_idt280:filter_label" for="entityForm:results_table:j_idt280:filter" class="ui-helper-hidden">Filter by Task Number</label>
<input id="entityForm:results_table:j_idt280:filter" name="entityForm:results_table:j_idt280:filter" class="ui-column-filter ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" value="" autocomplete="off" aria-labelledby="entityForm:results_table:j_idt280:filter_label" role="textbox" aria-disabled="false" aria-readonly="false">
</th>
What I have done is
Given 'th' a position of relative
the first span of header label margin and 80% width.
The sort icon a position of absolute and offsets from right
The input box and date range selector I have tried to give a fixed same height and absolute position with the offset from the bottom.
With this, they align up and sort icon does not move to the new line.
I am not a UI developer, just need some ideas is this the best way to achieve this, or maybe I have overdone this.
I have to support IE 10 and above.
My Css is
th.ui-sortable-column.ui-filter-column {
position: relative;
}
th.ui-sortable-column.ui-filter-column > span.ui-column-title {
width: 80%;
display: block;
margin-bottom: 30px;
}
th.ui-sortable-column.ui-filter-column > span.ui-sortable-column-icon {
position: absolute;
top: 10px;
right: 4px;
}
th.ui-sortable-column.ui-filter-column > .ui-column-filter {
position: absolute;
bottom: 0px;
height:25px;
}
th.ui-sortable-column.ui-filter-column > .ui-column-customfilter > button.comiseo-daterangepicker-triggerbutton {
height:25px;
}
th.ui-sortable-column.ui-filter-column > .ui-column-customfilter > button {
bottom: 2px;
position: absolute;
left: 0px;
margin-left: 5px;
margin-right: 5px;
}
Please advice.
Logo Here. | -- 3 Column -- |
Error Message here | |
____________________________________________ || W:232.5px |
| - - 1 Column -- | -- 2nd Column -- || |
| W:232.5px | W:465px || |
|_________________|__________________________||_________________|
Max W: 930px.
Hey, could anyone explain to me how I can achieve this CSS.
3 columns, all has 100% height depending how much contents in the column, e.g. column 1 might be
bigger than column 2 and/or 3.
I've also struggled to keep its structure when minimizing the browser, e.g column 3 is going under column 1.
so if possible I'd like to know how to keep its structure on minimizing.
Something like this maybe...
body {
border:0
}
#logo {
position: fixed;
top: 0px;
left: 0px;
width: 200px;
height: 64px;
background-color: blue;
}
#error-msg {
position: fixed;
top: 0px;
left: 200px;
width: 497px;
height: 64px;
background-color: green;
}
#column1 {
position: fixed;
top: 64px;
left: 0px;
width: 232px;
height: 100%;
background-color: #efefaa;
}
#column2 {
position: fixed;
top: 64px;
left: 233px;
width: 465px;
height: 100%;
background-color: #aaefef;
}
#column3 {
position: fixed;
top: 0px;
left: 698px;
width: 232px;
height: 100%;
background-color: #efaaef;
}
<div id="logo"></div>
<div id="error-msg"></div>
<div id="column1"></div>
<div id="column2"></div>
<div id="column3"></div>
To prevent column 3 go under column 1 either wrap everything inside a container with fixed width or use % as unit for the columns
I would go with a Flexbox with align-items: flex-end;
That will align the items to the bottom of the container and respect their variable height and width.
Here is a great reference for flexboxes
What you're looking for is pretty straight forward, you just need to add a wrapper to the first two columns and use that as the 'main' column.
In terms of responsiveness the best method is converting your pixels to percentage values, then using breakpoints when the widths start to become too tight/too wide.
|________________________________________________| | --Side Column-- |
| - - Main Column - - | | |
| W: 75% | | |
|________________________________________________| | |
| Logo Here. | | |
|________________________________________________| | |
| Error Message here | | |
|________________________________________________| | |
| ______________________________________________ | | W:25% |
| | - - 1 Column -- | -- 2nd Column -- | | | |
| | W:33.3% | W:66.6% | | | |
| |_________________|__________________________| | |_________________|
| |
------------------------------------------------
Fiddle
I have two Div , one is in table and other , outside of table .
My problem is , as you can see , divOne overflow outside of parent Div .
I want to show like
---------------------
| ---- ---- |
| | | | D2 | |
| | D1 | | | |
| | | ---- |
| | | |
| ---- |
---------------------
Here is my code ,
html
<div class="wrapper">
<textarea rows="12" cols="8" class="divOne">
Division One
</textarea>
<table>
<tr>
<td>
<textarea rows="6" cols="8" class="divOne">
Division Two
</textarea>
</td>
</tr>
</table>
</div>
Css
.wrapper
{
border: 1px solid #999999;
position: relative;
margin: 0px;
padding: 10px;
width: 600px;
background-color: #FCFCFC;
min-height: 50px;
color: black;
border-radius: 8px;
-moz-border-radius: 8px;
line-height:normal;
}
.divOne
{
float:left;
}
http://jsfiddle.net/fNhet/1/
.wrapper {
display: inline-block;
}
The issue over there is that you are using floats but you aren't clearing
.wrapper:after { /* Using a clearfix */
display: table;
content: "";
clear: both;
}
Demo
So, the parent takes the height of the non floated elements... and thus the background doesn't increase.
For more information on float and clear, read my answers here and here.
In your css try addding to your .wrapper
CSS:-
overflow:hidden;
DEMO.This will do the trick.
use display: inline-block; overflow: hidden; width: 50% .. this will give you some additional effect
Add display:inline-block; to wrapper div then you can get the result.....