How do I create a 2 column layout, with 1 column fixed width, and the other column taking up the remaining space?
Please see this demo.
Originally, I tried a fluid layout, but didn't like the left column becoming too small, so I wanted to keep it at a constant width.
I tried setting the 2nd column's margin-left equal to the width of the first column, but this meant the 2nd column did not expand into all the available space. It took up only as much space as needed, which was not enough to keep the layout attractive.
How can I make the #right column fill all the left over space within #container?
The easiest way is display:table. It's perhaps not the best way, but it works. You can see a fiddle I created with your code here:
http://jsfiddle.net/hp8Vg/1/
You could also use calc() in your CSS, but that is not as widely supported.
You might want to consider using media queries to trigger other CSS rules depending on the viewport size.
This should do what you're asking for:
#media only screen and (max-width: 960px) {
#right { float: none; width: 100%; }
#left { float: none; }
}
Related
I have a react mui table where sometimes two adjacent rows are related. I want to show a chain icon (or similar) between the two related rows. Crude mockup below:
Is there a straightforward way to achieve this?
I'm having trouble finding the correct terms to describe what I need, hence google search is failing me. "Overlay" seems to be within a row or cell, and most "Overflow" search hits are about preventing overflow rather than intentionally causing it. Here's a codesandbox starting point if it helps: https://codesandbox.io/s/basictable-material-demo-forked-jzb96?file=/demo.js
There are two possible ways to achieve this effect. One is to use an absolutely positioned chain icon element and then offset its coordinates so that it "floats" between the two table row elements. It may take some playing around with the attributes but it would look something like
.chain-icon {
position: absolute;
left: 100px;
top: 10px;
z-index: 100;
}
The other option that might work is to place the chain icon inside the row and offset it with negative margins margin-top: -50px; and make sure overflow attribute is set correctly. Since it's a table, for either approach I would suggest adding a new column next to dessert and adding the icon to that row cell.
I used plain old css transform - Unsure if this is a good idea.
I'm working in web project(Angularjs) and facing one problem. I have given height: 80% and my screen resolution is 1280 x 1024. but when I opened same project in my laptop(Resolution 1386*768) Div get invisible. I have tried following code
#media (min-height: 500px){
#chatViewList
{
overflow-y: auto;
position: relative;
height: 80%;
}
}
Please suggest andd help me.
Is the height of the parent element fixed? If not you can't use a percentage based height (there are some exceptions but they're unlikely to be practical).
I would suggest using the viewport height unit instead. vh allows you to specify a height in relation to the viewport window.
#media (min-height: 500px) {
#chatViewList {
height: 80vh;
overflow-y: auto;
position: relative;
}
}
Browser support: http://caniuse.com/#search=vh
VH is what you need!
height: 100vh; = 100% of device height
You can of course use like 80vh for 80% of the device height. VH means viewport height
You can set the responsive height of a div when it's part of a parent div that has a defined height.
Or, You can pre-define the height of the div or dynamic specify static values based on various commonly available heights <-- could be an overkill but can work.
Alternatively, try the following links"
https://www.sitepoint.com/community/t/how-to-make-div-height-responsive/30438
OR
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
Its not best practice to create media queries to resolution height. how ever as you asked here I guess you trying to create full screen web page. to make it work set you html tag and body tag height 100%
ex:
html, body {
min-height: 100%;
hight: 100%;
}
like this what ever resolution you working on web page hight will remain 100%. then add CSS height as percentage as you wish. And also make sure you set min-height and max-height to all.
This is a little trick that I am using when creating full screen web pages
Hope this will help
for calculating the screen height for every screen we can use this formula.
height:calc(100% - 200px);
which calculate the height and subtracts 200px from it.
we can use any value in place of 200px
example
#div1 {
height:calc(100% - 200px);
}
if the screen size is 1000, Resulting div1 height will be 800
I have a problem with aligning text in a single row I tried using Fexl approach as well as other approaches as well
also some of the data in my div is rendered dynamically using ng-repeat
the third column displays special data always.
all the rows from 3 columns should be aligned equally
please help me
link for plnkr http://plnkr.co/edit/LSLktvmvlaQtWUofzJvF?p=preview
I think I understand your question - I ran into a similar problem on another project, and I ended up giving each div a fixed height and setting the overflow to hidden. It takes a bit of testing, but if you're aiming for a responsive design, you can uses Sass to set it to different heights based on screen resolution.
Adding this CSS to your Plunkr would be a good starting point. Of course, you'd want to apply this to a custom class and not '.col-md-6':
.col-md-6 {
height: 100px;
overflow: hidden;
}
Increase the 'height' as needed to make sure all text fits.
We are working to make one of our responsive sites more accessible, but are struggling to get our heads around ARIA as it seems to go against the core principle of separating design elements from the HTML.
For example if an element is hidden in aria one would indicate it as aria-hidden="true". However most visibility is determined by media queries depending on screen size etc.
In other cases elements work completely different based on media queries. So at some sizes aria-haspopup="true" would be appropriate while on other resolutions the navigation is always visible.
Am I missing something, or are we at font tags all over again with this standard? Are we supposed to add / remove aria tags using javascript as appropriate?
Actually Kenneth, your question makes a lot of sense, and, yes - tooling for responsive sites is not ideal. I don't have an answer for you, but what I have to say is too long to be a comment...
Consider the following example:
You app has a menu button that opens a side drawer using a short sliding animation. Without a11y considerations, your job is easy (lets assume the drawer is on the left and has a width of 250px):
#media ... (min-width: 1000px)
#drawer {
left: 0;
}
#media ... (max-width: 999px)
#drawer {
left: -250px;
}
#drawer.opened {
left: 0;
}
(Not an exact syntax, add your own wizardy for the sliding animation)
To make this accessible, you'd have to do one of the following:
option 1
Don't use aria-hidden='true'. It's generally enough to hide the drawer using visibility:hidden or display:none. Of course, now you need to wait for the end of the sliding out animation to hide the drawer (or you
lose the animation).
option 2
Use aria-hidden='true'. You'll have to catch window resize and add / remove aria-hidden='true' when switching sizes (you lose the media query magic).
To sum things up, you're right. There's definitely room for improvement. This is especially true, considering the general shift to move stuff off of JS to keep things 60fps smooth.
You have to use the window.matchMedia function
For instance:
var mm = window.matchMedia("(min-width: 600px)");
mm.addListener(updateAriaHidden);
updateAriaHidden(mm);
var updateAriaHidden= function (obj) {
if (obj.matches) {
// set aria-hidden true/false when width >= 600px
}
else {
// set aria-hidden true/false when width < 600px
}
}
Using jQuery for instance, you can use the :hidden selector with a custom CSS class to set the aria-hidden attribute dynamically:
$(".toggleable:hidden').attr('aria-hidden', true);
$(".toggleable:visible').attr('aria-hidden', false);
The use of the custom class make it easy to match the elements which would change based on your media queries
container, by default, puts contents in the centre (with margins on the side) instead of filling up the whole screen.
What is the rationale behind this?
#media (min-width: 768px) {
.container {
max-width: 750px;
}
}
#media (min-width: 992px) {
.container {
max-width: 970px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1170px;
}
}
Is this a question regarding why, by design, container doesn't fill out the entre screen?
While I can't claim I know for sure, I can imagine this is a decision based upon the fact that you rarely would want your content to start right at the edge of a screen. I can also imagine many people are more comfortable doing a couple of static layouts rather than a completely liquid design, not to mention some layouts can be very challenging to design with a percentage based width.
You could obivously go liquid and use max-width: 100% and apply padding to the container instead. Personally this is my preferred approach.
There's no best practice here, the better approach is largely based on the layout in question.
You can also use the container-fluid class, which makes everything percentage based. So instead of the container having a fixed width and being centered on the page, you then have container-width equal to 100% of the viewport.