I'm working on a MVC application and am having some trouble with the HTML/CSS layout in regards to one of the partials that we have.
The shell of the application contains two columns that expand to be the height of the column with the most content. The left column contains the navigation for the app. The right column is the content area.
I've managed to get this part working appropriately.
Where I'm having issues is that inside for some pages, the content area (right column) needs to be split into two columns. I need both of these columns to dictate the height of the content area, which in turn would dictate the height of the main navigation.
Any input would be incredibly useful! Thanks!
EDIT I got it working, but am not entirely happy with the solution. It requires me to use inline-block, which reads white-space. As a result I used the comment across two lines strategy, but I'm afraid that this would get deleted by somebody while editing/cleaning the project up after the fact.
http://jsfiddle.net/StSmith/RzKJX/
.
I'd imagine that, if you simply added the columns they would automatically fill the space up thus dictating the height of 'content'.
However, if you're floating the columns then the containing element won't pick up their height. In this case you'll need to add, either a cleared element below the columns, or, better add 'clearfix'.
Related
I am working on an interface for a Raspberry Pi based embedded device. The interface is built with Bootstrap 4 and is currently centered around a .navbar at the top and a .row > .col structure with just two columns within the row. Within each column there are multiple cards. Depending on the user actions and enabled features, there are one or two cards that won't be rendered and the others can change in height.
My current issue is that upon a specific user action, a new card will be added to the first column thus pushing the other cards down the page and some out of view. When this happens, I want one or two of those "out-of-view" cards to then instead show up in the second column.
I can't seem to figure out a good solution to this problem. I want to keep the two columns (at least in visuals) and dynamically assign the various card elements to one column or the other.
If I leave the current structure of .row > .col then each of the card elements are static within each column via the HTML thus short of putting the card in the DOM twice and hiding one or the other, I need a different solution.
If I rebuild the page to use flex-box instead and rely on wrapping, I run into issues where one card will be larger than the other within the row causing a bunch of empty space to show up. That is before I even try changing the order of each card. On to the next solution.
Trying the grid system, I can get something close to what I am looking for but it isn't perfect. The cards move from one column to the next by adjusting grid-template-areas. Since there are cards of different heights (and can change during use), I have some cards spanning multiple rows so there isn't any empty vertical space between cards in a given column or vertical growth to any cards beyond its internal content. This works fine for one given combination of card order and heights, but doesn't for others; I run into the same problem as with the flex-box with empty space within one column for a given row.
I want this to be mainly HTML and CSS driven in order to keep the javascript to a minimum. I figure that I would add some functions to call when various user actions happen (such as with changing the grid-template-areas), it is just a matter of figuring out what HTML and CSS combo to use before writing the necessary JS.
Is there something I am missing with the solutions I have tried so far? Is there other solutions I have overlooked? Do I just need to use JS to essentially "cut" the entire card HTML code block from one column and "paste" it into the other column? Any insight or direction to another solution I can look into is appreciated!
Here are some visuals:
Initial layout:
After that, the user could cause card 2 to pop up which pushes card 3 and 4 out of view:
When that happens, I want card 4 to show up in the second column:
When using the grid system, due to how the various cards can change in height, I have not been able to find a way to size the rows dynamically enough to correct these anomalies (growth if the height is not capped, or empty space if it is):
Quick Summary
I have an issue that only occurs when exporting my SSRS report to a Word document (something clients have requested). In short, when rectangle is shorter than its peer, Word inserts a page break even if there is plenty of whitespace left to render the longer column all on one page. I would like to resolve this so that Word takes advantage of the entire page when the peers are of different heights.
Layout
The highest level of the layout consists of three rectangles, as shown below:
The left and right rectangles are of fixed widths, but variable heights.
There is no extra space at the bottom of the Parent Rectangle; it expands based on the contents of the other two.
Each rectangle several other items and uses multiple datasets.
There are rectangles inside the rectangles, which group some of the child objects together.
Some of the controls are textboxes. I don't know the length of the text at design time.
Word Export Result
There is enough empty space above the footer to hold the entire left column, with excess.
If I open the document and manually enter empty lines into the right-hand column to increase its height, items from the left-hand column which have a height equal to or less than those line breaks will float back up to the first page. This is what makes me believe Word is cutting off at the shortest of the two peers.
Things I've Tried
Another thread suggested putting the columns into a table instead of rectangles, to force them to expand together. However, it required that they use the same dataset, which they do not.
Looked for CanGrow or ConsumeContainerWhiteSpace type options that could apply to rectangles, but couldn't find any. ConsumeContainerWhiteSpace is set to true on the report itself but makes no difference.
Attempted to create a function to dynamically set the inner rectangles' height, or the height/padding of a hidden textbox, based on the longer peer. Unfortunately, there doesn't seem to be anything for fetching the height at runtime; the functions I found all rely on knowing static data such as the number of rows (of a fixed height) in the sheet, but each column has several fields of which the height is unknown prior to loading data.
Extended the height of each rectangle to that of a full page by default and tried to find a way to make the elements inside consume this empty space as needed. The space was never consumed, and always pushed down, resulting in an extra page of whitespace.
Question
Is there any way to notify Word to use its available whitespace rather than cutting off at the shortest peer? I've been looking for a long while and keep coming up empty-handed.
Thank you!
How about instead of using a rectangle, you use a List with two columns?
I think the list will do better with pagination than the rectangle. YMMV - Not sure how it exports to WORD.
Put your left rectangle in the first column and the right rectangle in the second column.
Use the same data set and Group on 1 (the number) so there's just one row.
Had the same issue. I managed to make it work by adding a horizontal line that take the whole width of the main rectangle just below the two child rectangles
I have two DIV elements side-by-side, to create two columns. The two elements both have a fixed height of ~200px (calculated based on window height). I would like the content to overflow from the left DIV into the right, ONLY when the first DIV is full.
Unfortunately, I can't use CSS columns, since it automatically balances content across the columns, instead of filling the first column completely before overflowing.
So far the only option I've found (including here on SO) involves JS, and since the content may include HTML (including block elements), the use of JS is just about my least desirable approach.
Thanks in advance :)
You want something called CSS regions and it is only a working draft atm.
"The CSS Regions module allows content from one or more elements to flow through one or more boxes called CSS Regions..."
Until then, I'd go with a polyfill.
I have a large table inside a scrollable div. The table contains a person's name, followed by his details. I need the first column of the table to stay fixed while scrolling horizontally, so that the person's name stays visible while look at his details. Similar to this: HTML table with horizontal scrolling (first column fixed)
However, my table is also very large in the y direction, so when I scroll down, the person's name should also scroll up with his details. This almost solves my problem, but not the vertical scrolling.
Please help!
I was trying to solve fixed column issue where a table is inside other DIV control. While solving that, I faced the same issue and found solution via setting up container at ScrollTop property on event of "onscroll". I applied below style to the container:
.floatingStyle
{
position:relative;
background-color:#829DC0;
top:0px;
}
You can look complete solution here: http://rajputyh.blogspot.in/2011/12/floatingfixed-table-header-in-html-page.html
There are few browser related issues which are also handled there.
For vertical scrolling the problem is keeping the headers and footer fixed. The best way to do this is to actually have three tables - one for headers, one for the data (in a scrollable DIV) and one for the footer. If the table column widths are fixed then that's all you need to do. If they aren't then you'll need to use JavaScript to adjust them. But there is a trick here - a table with AUTO column widths can't be guaranteed to use widths that you specify in JS, especially if a column is empty, or a header text item is quite long.
I've handled this by setting the headers width based on the data, finding if the browser resized and then changing the data widths. Once they are close I then set the table to FIXED mode for the final adjustment.
Have a look here:
http://hifi.goneill.co.nz/cd.php
Click on Jazz, Classical buttons etc to see the tables. Also read the technical notes page as it describes the coding and try out the Ajax version too.
For your fixed column you could do something similar: have two tables and use the offsetTop of one to set the scrollTop of the other. See how my table sets the top line when you sort on a column with empty rows, or saves and restores the current row in the Ajax version when swapping between tabs.
I have a pretty basic question.
I am designing a form using HTML and CSS which should resize to the current page width (e.i. I have to use the relative units for all sizes). The form consists of several text fields all having different width and my client wants that they are arranged in a certain manner (like, for example, ZIP, City and Country to be three different fields in one row with different size proportions etc.).
To correctly layout the input fields along with their captions I put them into a table, using cells with different column span. I align the controls within TD with float:left and use relative width (like width:90%) to make the controls occupy the entire cell.
The problem I am facing is that my controls are aligned to the left and in the cells with different column spans the right margin looks jagged, i.e. all text input fields have slightly different width, because the cell have different widths and the size is proportional to cell width which may vary due to different colspan (see the picture).
How can I make my controls to look aligned on both sides?
P.S.: I am a web developer with some knowledge of HTML and CSS, but I am not at all a designer. Thus, this question might be utterly basic for a designer, but I failed to find a plausible answer with reasonable keyword combinations. If it is a sort of common topic (that I suppose) please just provide me with some clues how to formulate my question in the way to find answers.
i cant tell without your code but it looks like you may be using different font sizing for the input fields which i think could create the effect you are getting.
can you paste the css and html for the three elements you have shown in the pic?