I have a table, where I would like to move element div (last div) to the right.
<thead>
<tr>
<th>...</th>
<th>...</th>
<th>...</th>
...
<th>
<div>
<span></span>
<span>
<div>Move me!</div>
</span>
</div>
</th>
<tr>
<thead>
The div has following CSS and it's important, that I can't change postion to relative
{
position: absolute;
top: 0;
width: max-content;
}
I would like to add property left like this:
left: calc(100% -(position+width)),
where postion is currently x-coord of div and width is the width of the div.
How could I access this values?
PS. Currently my div is placed in such way, that it crosses the border of main div and it leads to appearing of scrollbar. I would like to avoid this by moving div to left with negative value (for example if I assign
left: -20px;
it is moving to the right and I achieve whta I want, but I can't assign it to certain value, because the width of div always changes, ,so it should be dynamically calculated)
What could be possible soultion with Javascript? How could I extract the postion? Right now offsetLeft is 0...
What about right: 0; It should stay in your main div while positioning itself on the right side of it (0 pixels from the right side).
Can you post a codepen with an example so we might help you better :)
Related
I'm interested in querying the maximum size that a DOM element in a browser might grow to be. It is well known that an empty DOM element (without styling) has .clientWidth of 0, but adding text/images/etc. to the element might cause its width to grow. Take for instance the DOM element thisOne in the structure below:
<table style="padding: 20px; border-spacing: 100px">
<tr>
<td></td>
<td>
<div id="thisOne"></div>
</td>
</tr>
</table>
Currently #thisOne.clientWidth === 0 but if I append a large amount of text to it, its width will grow and grow, but not until it reaches document.body.clientWidth because of the columns, padding classes, etc. I am wondering how I can figure out the current maximum width of the object without doing something like:
const thisOne = document.getElementById('thisOne');
thisOne.style.visibility = 'hidden'; // do not display to user.
thisOne.innerHTML = 'blah '.repeat(2000);
const maxWidth = thisOne.clientWidth;
thisOne.innerHTML = '';
thisOne.style.visibility = 'visible';
JQuery based answers are fine, though knowing a pure HTML/JS version would be better.
(In case anyone's wondering, I'm planning on placing an SVG of music notation into the div, but I want it to have nice wrapping onto additional lines by giving the renderer a width to fit before adding it)
What you can do is to set the width of the table to 100% (so it takes all the available space of the container). Set the desired width of the other columns (<td>), either fixed or %. And set the width of the column containing #thisOne to 100%, it will span to the remaining space available (<div> is a block, so it will use the whole width by default).
<table style="padding: 20px; border-spacing: 100px; width: 100%">
<tr>
<td style="width: 100px"></td>
<td style="width: 100%">
<div id="thisOne"></div>
</td>
</tr>
</table>
Now, #thisOne will take all the available space and you can get it's width with #thisOne.clientWidth.
If you don't want #thisOne to take the whole width by default (i.e., when it's empty), you can simply not set his container td width to 100% and do it by code before you get the #thisOne.clientWidth (but you will have to get the clientWidth in a setTimeout because the browser needs to compute the layout before the clientWidth is changed).
As 小聪聪到此一游 pointed out, you can also use display: flex and flex-grow to achieve the same goal.
<div style="display: flex">
<div style="flex-grow: 0"></div>
<div style="flex-grow: 1" id="thisOne"></div>
</div>
Seems like the easiest way would be to get the width of the parent e.g.
element.parentNode().clientWidth
a div will grow only to it's parent element. unless, of course, white-space: nowrap is specified.
EDIT: this doesn't work
In my project I have a table. In the leftmost column groups are displayed; on the right the details. Sometimes there can be many entries in a group, so that the group may not fit completely on the screen. Since the text in the left column is displayed at the top, it is possible that the label disappears when scrolling.
I've added an example picture for you. The red area represents the viewport. If you scroll down, Group 1 should stay visible until the user scrolls down further.
Is there a way to pin the text to the top of the screen using CSS or JavaScript in such a way that it stays at the top while scrolling, as long as the cell is still in the viewport?
I found a solution. First, you have to put the group labels into a '' element. Then add bootstrap's 'sticky-top' class, or the following attributes:
.sticky-top {
position: -webkit-sticky;
position: sticky;
top: 0;
}
An example would be:
<table>
<tr>
<th rowspan="2">
<span class="sticky-top">Group</span>
</th>
<td>Detail</td>
</tr>
<tr>
<td>Detail</td>
</tr>
</table>
Using "position: sticky;" can help you, I guess.
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
<div>
<div class="sticky">Im sticky!</div>
</div>
Here is the fiddle I'm working on: http://jsfiddle.net/fFYqF/
Basically it's a h1 above an h2 with some hidden paragraphs in-between them. This is all contained inside a div which I am trying to make visually centered (horizontally and vertically on the screen. I have used this css on the container div to center it on the page:
div#holder {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height:40%;
width:60%;
min-width:300px;
}
For this to work the width and the height of the div must be specified.
I have 2 problems... first, I don't know the height of the div so I have tried to use jQuery to apply it dynamically:
var h = $('#holder').height();
$('#main').css('height', h + 'px');
Secondly, I have a further bit of jQuery to animate the paragraphs of text open. This changes the height of the holder div thus rendering the earlier calculated height incorrect and the div is no longer vertically centered.
Is there a way to have the holder div always centered on the page? I.e. it should move up when it is opening.
Please see the fiddle above to see what I mean. Thanks
I have updated a branch of your fiddle to use a mixture of using .animate() with the height as well as the top position of the element to make it look like its opening up.
Have you tried the .animate method instead? I haven't tested this in a vertical-centered situation like you're describing, but I've used this method to increase the height of my containers when I'm bringing other elements into view.
$('#main').animate({height: '+='h }, 'slow');
I am customizing jquery-ui slider(range). The two corner points(div) are draggable. I wish to place the exact value of the slider just above the corner points but i am unable to do So, can anyone suggest how the position of the div containing the current values can be changed using javascript ?
I'd do it using CSS - make the value div a child of the slider div, then use position: relative on the value div with a negative top
<div id="Slider">
<div id="Value" style="position: relative; top: -100px; width:...">
</div>
</div>
I have two side borders on my website, left and right side... small image about 15x15 which repeats itself down the website... When setting 100% like below, the border only goes "one screen" down (which is 100%). But my website is dynamic and the content changes... I want the border to change along with the total height of the page...
How can I do this?
Here is the css:
.bgr_right {
background-image: url(../Graphics/bgr_right.jpg);
background-repeat: repeat-y;
background-position: right;
position: absolute;
top: 0px;
height: 100%;
width: 30px;
right: 0px;
background-color: #E7F5F0;
}
Here is the HTML DIV:
<div class="bgr_right"></div>
Also, is position: absolute the right thing to have?
UPDATE:
After reading the responses, I thought there has to be a better way...
How about using javascipt...
Does anybody know if there is a way to, with javascript, get the height of the body?
then:
<div height="javascript_function()" or something...
???
Thanks again
Alternativly I'd suggest to wrap another two divs around content container and repeat the background aligning it in one div to the left and in the other to the right. I.e.:
<div id="left_wrapper" style="background: url(my_leftimage.png) y-repeat top left;">
<div id="right_wrapper" style="background: url(my_rightimage.png) y-repeat top right;">
<div id="content">hello world</div>
</div>
</div>
Then if you want it to go height 100% set the html, body and the content containers to 100% height like this in the CSS:
html, body, #content { height: 100%; }
Hope this helps :)
At the risk of angry comments and loss of reputation - use a table to contain your layout. You get the full-height borders free - they will automatically adjust to the same height as your content.
<table>
<tr>
<td class="bgr_left"></td>
<td class="content"></td>
<td class="bgr_right"></td>
</tr>
</table>
If you have a fixed-width design, you could just use one background image, either on the body or on your content container, depending on the effect you want. This image would be something like:
(left bar)-> | ([x]px space here) | <-(right bar)
With repeat-y, this would give you:
| |
| |
| |
| content here |
| |
| |
| |
Then the bars will be as high as your content. If you apply this to <body>, then it will have the height of the body.
Hope this helps.
There doesn´t seem to be a reason to use a separate div for the background as it´s empty, but it depends if the column width is fixed.
You should apply the background image to the div you want to have a background, that way you can be sure that it will continue below as the div grows.
If your column width is fixed, you
can just combine the left and right
image in a very wide image that will
only repeat vertically.
If your column width is variable,
you can have for example the left
background in the growing div and
the right one on a wrapper div that
contains the growing div.
Using the right padding you will get the effect you want.