This is a part of the application I'm building. There are two columns. First column contains a song lyrics, and the second column contains some buttons that control some of the properties of lyrics column.
<div id="content">
<div class="column board">
<div id="lyricsBox">
<div id="song">Kryptonite - 3 Doors Down</div>
<div id="lyrics">
<br><span style="color: DodgerBlue;">[Verse 1]</span>
<br>I took a walk around the world to ease my troubled mind
<!-- on and on... see fiddle -->
</div>
</div>
</div>
<div class="column board" id="controls">
<div id="lyrics_controls">
<img src="images/ts_dark.png" id="textSelect" />
<img src="images/center.png" id="align" />
<div id="fontSize">
<span class="up_down" id="increase">▲</span>
<span id="currentSize">15px</span>
<span class="up_down" id="decrease">▼</span>
</div>
</div>
</div>
</div>
I decided not to post CSS and JS here, because it'll just spam the question, make it longer and scare you. That's why I isolated the code and created fiddles with different states. If anyone were to suggest that I should also include them, I will.
Since the second column is shorter than the first column, it'll disappear if I scroll down. I don't want that. So, I change the position of the second column to fixed. That solves the problem, but causes another one.
If I change text-align or font-size of lyrics (first) column through control buttons, the second columns gets pushed down.
To fix the problem, I added another line of code to the control buttons:
controls.style.position = "fixed";
So, after changing text-align or font-size properties of the first column, I set the position of the second column to fixed, though it's already set to fixed with CSS.
Unchecking and checking the position property of the second column in Developers Tools also solves the problem. That gave me the idea of adding controls.style.position = "fixed"; to the end of the control button functions.
Even though I managed to find a way to make it work, I want to know what causes the problem. Why the second column gets pushed down? And why unchecking and checking it's position property back fixes it?
I agree with @CBroe's comment. Such behavior (fixed position without top, left, right or bottom) is undefined by the spec so there's no telling why it's doing that. If I go into dev tools and remove and add again the fixed positioning, it goes back to where it should be, so I don't think it's intentional (webkit bug perhaps), but in any case, you should be assigning direction attributes along with the fixed positioning. It gets a bit hairy here because it's hard to place it in that exact spot, but considering your first column is more or less a fixed width, you can add a right or left attribute of 50% and adjust is with a negative margin. For example:
position: fixed;
top: 48px;
right: 50%;
margin-right: -388px; /* about half of the left
columns ultimate width
including padding, margin,
etc. */
If your code needs to be more dynamic (is responsive or the code must be reusable with containers of other sizes) you will need to add different classes, use media queries, use javascript to calculate it, or use a combination of these methods.
Demo: fork of your fiddle demonstrating the above CSS
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments