I will try to explain my problem in a way that is as clear as possible.
We are using a ERP that is web-based and when you access a Sale Order document you get to see a form view with a status bar in the top (which shows the current status of the document and also some buttons to perform some actions) and a table with the sale order lines within the document.
The problem is that some quotations are too big and the header of the table gets lost when scrolling down. I'm facing a lot of trouble try to get the header of a table stuck at the top using CSS only.
Here's a snippet of the source code:
If I set the header position to sticky and scroll down, what I get is this:
As you can see, it is underneath the statusbar. I'd like it to stick to it. But I don't see how would I define a div that goes from the bottom of the status bar to the end of the view so the header sticks in there.
I know I can set the "top" property of the header to the exact height of the status bar but this one can change if there's a lot of content on it, that's it, it's a dynamic height.
Here's the div structure:
I can provide a html file if needed.
Thank you in advance for any help!
Related
When using a tumblr theme, I added an extra row for links, but the page won't automatically scroll. When changing the position to absolute, they scroll, but it doesn't show all the way, nor do the titles scroll. Can anyone help me out with this?
I'm not such what to change/add/remove to have the page scroll properly with the titles moving too.
The original code is here.
And here is the code once I added the last row.
The person who made the theme has deactivated their blog and their credit link leads to some odd site, so asking them for help isn't that easy considering I have no way of reaching them.
I suggest you go for a structure change. Currently because of position: absolute it is difficult to overflow the content in a standard way.
Ideally you should do the following
wrap the following series () in a parent
and style it to be on the right hand side and add the style
overflow: scroll to it.
remove the #columni {margin-left: 530px;} instead make it
display:inline-block;
remove the #columnsi{position: absolute;}
My page has a fixed header, a fixed right sidebar, and an HTML table with each column having a set width (so that the table stays left of the sidebar). The table scrolls vertically, while the rest of the page remains fixed.
Each row has an expand button, which shows another row under it, with a bunch of images. This row may get very long, so the overflow needs to be hidden behind the side bar (already doing that). However, since I changed to the fixed sidebar paradigm, I am unable to scroll the row to the right without moving the whole table with it.
I will try to create a JSFiddle, but my app is an Ember/Bootstrap app, so may take a while to reconstruct in JSFiddle format. If you know the answer off-hand, please let me know.
I am using reporting services 2012 and want to display a group of elements at the bottom of the last page.
I have tried putting this in the footer and hiding the elements for all but the last page, however this doesn't work very well as there is a large blank space at the bottom of all of the preceding pages.
If there was a way of aligning the elements to the bottom of a page that would work, but I cant see any way of doing that. If there was a way to push the elements to the bottom of the page using a rectangle that has a dynamic height, that would also work, but I also cannot find a way of doing that.
Any suggestions?
Unfortunately, page headers and footers must be one constant size in SSRS. That is why you are getting all of that whitespace, and as far as I know, there is no workaround for this.
However, what you can do is page break at the end of your main table / report. Then have another table display the elements you want. Make this second table the height of a full page and put the elements at the bottom. Go into the Tablix Properties and check "Keep together on one page if possible".
If the second table doesn't work, try a subreport.
If you want to have the footer on the same page as the last page of data, this doesn't work. The only way I know of to do that is a major hack: check how many rows come back from the database and calculate how much space they will need to display. Then at the end calculate how big of a rectangle you need to make in between your main table and your second table to push it to the bottom of the page.
I am extending a scheduling app that displays multiple Fullcalendars in agendaDayView to show the day's schedule for multiple people. Having each Fullcalendar use its own scrollbar has been rejected; accordingly, all the calendars are displayed full-length, with a single scrollbar set in the surrounding div.
The problem now is to have the headers stay fixed during vertical scrolling. There are other requirements for extended header functionality (additional data, icons, links, etc.), so it made more sense to me to make my own headers above each Fullcalendar div.
Using CSS and placing the divs correctly, I was able to get the calendars to vertically scroll separately from the headers, thus achieving a 'fixed header' effect. The problem was then horizontal scrolling: if I made the divs extend outward horizontally, then the vertical scrollbar for the div containing the calendars was all the way to the right, outside of visibility.
I have also tried plugins for fixed headers by setting using a with arbitrary text for the headers and then putting the Fullcalendar divs inside elements in a single row. These all failed in different ways (hiding the calendars, reprinting the headers, other ways).
Here is the base setup: http://jsfiddle.net/jzqJC/. I am looking for some direction in how to have the main content area have (1) both vertical and horizontal scrollbars as necessary, (2) keep the column headers fixed when vertical scrolling, and (3) synchronize the horizontal scrolling of the column headers and calendars underneath them. I have spent several days tinkering and trying things based on stackoverflow and google searches, but I am at a loss and need help. Please advise.
[Side question: how can I link to fullcalendar.min.js in a fiddle? Do I need a public URL for the file and add it as a resource? If so, what's the best way to put out that file in a public URL?]
Thanks,
J
I created this Fiddle, take a look if it is what you are looking for: http://jsfiddle.net/7NgUB/
I changed .headerItem,.calendarItem display to inline and #headerRow,#calendarRow position to absolute in the CSS.
Then everything is done with jquery:
Asign #headerRow,#calendarRow width the total width of its children,
Set #calendarRow top position to appear below #headerRow,
Change #headerRow top position each time #content is scrolled
I added a custom control to a .NET page which allows user to upload a picture.
This control has a div element which parents an image that is supposed to get printed. The control is positioned near the bottom of the HTML structure and therefore the image gets printed on page two.
However the problem is that I want the picture to get printed on page one but no matter what I try the picture never gets there. I've tried absolute positioning and floating.
Now what to do, what to do? :)
Update:
The HTML page includes many forms and stuff so it's difficult to give code examples but here's what it basically looks like:
<div class="col">Bunch of stuff</div> // Left column
<div class="col">Bunch of stuff + the image control</div> // Right column
When print; the columns are stacked upon each other by using float, but I want the image element to be positioned on top of page one.
Since I couldn't figure out a solution for this problem, I ended up with restructuring the HTML so that the "image control" was at the top. Then I was able to position the control at the top of the printed page.