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?
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):
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'.
I am developing website everything was done and successful , but my problem is please look attached images , if browser is in maximize position the website looks neat but in minimize situation everything comes closer and text is overlap by another, please suggest me.
Try using % value of width and height of html elements instead of its pixel values in style sheet.
Since you didn't provide actual source code, i have to guess. I guess your page layed out using tables. And either elements have no width property or they have width in percentages like . The black top bar on the first images seems like it made with a table with two columns, second column being align=right.
For table layouts to work, you should set all columns' width to some constant number. Especially first rows' columns' width must be set.
I'm rendering a form in a table with the labels in tags (left) and text inputs in tags (right of labels).
For the sake of flexibility, I'd like to write as little css as possible and have everything magically fall into place, such that:
the cells expand to accomodate the width of the longest label
the fields on the right expand to fill the whole width of the cell
I've been trying various combinations of width:100% and width:auto on these various elements but to no avail. Is doing this possible, or should I just give up and specify hard widths like width:Npx?
Not sure what your code looks like (if you post, answers are so much better...).
Anyway: cells will expand naturally to the width of the longest element if no width is specified, BUT you can't have the element expand to the width of the cell at the same time! That would make the calculation of the width impossible. So I'd recommend fixing the inner content somehow. Input fields look great when they are all the same length...
You have two options as far as I'm concerned. Either you implement a solution with tables that allows you to have fluid lengths for your labels, or you set them as fixed widths and use table-less markup. I personally see no compelling reason to choose one solution over the other, although some web developers will do almost anything to avoid using <table> elements in their markup.
That being said, this solution is quite easy if you are using tables: http://jsfiddle.net/Wexcode/VcSXU/
td:first-child {
white-space: nowrap; /* don't allow text to wrap to the next line */
}
I can effectively create a two column layout in a <select> by using JavaScript to measure the text and add the appropriate number of spaces. However, depending on the font size, the space is ~4 pixels in width, meaning the column on the right kinda wavers to the left or the right up to 3 pixels at a time.
Fixed width is not the solution. Wavering actually looks better in this case. But an alternate space would be even better.
Is there a space of a different width that I can calculate in to reduce the waver?
There are various fixed-width spaces, but they do not work consistently across fonts.
If you need tabular presentation, use a table. This means that instead of a select element, you would use a set of radio buttons. You can then divide the radio button labels in two columns (and put the radio buttons in a column of their own, perhaps).