[Bootstrap] Div Heights

[soulofangel]

I have two columns and one row:

When it detect small screen it will auto stack into one column vertically.

My question is how do i make it when they stack, they will all have the same height?

 

[davidktw]

I have two columns and one row:

When it detect small screen it will auto stack into one column vertically.

My question is how do i make it when they stack, they will all have the same height?

height is often the more involved part of layout. one way is using Javascript, measure the max height u found across all the DIV, then set the max height u calculated across all the div.

bind this function to browser resize events and the div tree nodes changes events

 

[natnai]

Pretty advanced css. One way is wrap everything in a div and set the height to a percentage with a media query. But the problem is you'll the need to set fixed height on the wrapper div. I'm not sure if you can set 100% on the wrapper div. You can try.

Sent from Xiaomi MI NOTE LTE using GAGT

 

[natnai]

here's a pen demonstrating the concept:

http://codepen.io/anon/pen/NxPYxO

It's very hacky, and this is not recommended AT ALL, but that's quick and dirty for you. Otherwise do what david says, but beware that it WILL force repaints on every browser resize which is gonna lag your UI like all hell.

Also just be aware that if you are gonna force equal heights on all your columns, you need to handle overflow properly, otherwise everything will **** up. So just be aware.

 

[KnightNiwrem]

Pretty advanced css. One way is wrap everything in a div and set the height to a percentage with a media query. But the problem is you'll the need to set fixed height on the wrapper div. I'm not sure if you can set 100% on the wrapper div. You can try.

Sent from Xiaomi MI NOTE LTE using GAGT

...advanced... CSS?

Why not just flexbox?

http://philipwalton.github.io/solved-by-flexbox/demos/grids/

 

[natnai]

...advanced... CSS?

Why not just flexbox?

http://philipwalton.github.io/solved-by-flexbox/demos/grids/

I hesitate to get people to switch to flexbox because implementation is still a little bit patchy. So just hack the CSS a bit, cross your fingers and pray to god it works in IE

 

[natnai]

Yes, such is the state of front end web development in 2015. We have react, we have immutable, we have all this great stuff...and then we have polyfills for legacy browsers and the constant fear that everything will break if someone decides to open it in internet explorer.

Hard Web Development Truths

 

[natnai]

A useful resource for flex aficionados:

https://github.com/philipwalton/flexbugs

 

[davidktw]

here's a pen demonstrating the concept:

http://codepen.io/anon/pen/NxPYxO

It's very hacky, and this is not recommended AT ALL, but that's quick and dirty for you. Otherwise do what david says, but beware that it WILL force repaints on every browser resize which is gonna lag your UI like all hell.

Also just be aware that if you are gonna force equal heights on all your columns, you need to handle overflow properly, otherwise everything will **** up. So just be aware.

excessive enters can be easily resolved using settimeout approach where the function to resize only kick in via event queue. I remember one will also need to work in combination with clearTimeout. that will allow resizing to proceed with no changes to the dom until the resizing event has settle down.

setImmediate can also be used, but I think it is only currently supported in IE10 and later. someone did wrote a cross browser JS which is worth looking at https://github.com/YuzuJS/setImmediate

 

[natnai]

excessive enters can be easily resolved using settimeout approach where the function to resize only kick in via event queue. I remember one will also need to work in combination with clearTimeout. that will allow resizing to proceed with no changes to the dom until the resizing event has settle down.

setImmediate can also be used, but I think it is only currently supported in IE10 and later. someone did wrote a cross browser JS which is worth looking at https://github.com/YuzuJS/setImmediate

That's a reasonable solution. At any rate, repainting is not such a big problem unless you have many elements on the screen at the given time, which I suppose TS doesn't have. Anyway he should try several methods and decide which one fits best.

 

[KnightNiwrem]

I hesitate to get people to switch to flexbox because implementation is still a little bit patchy. So just hack the CSS a bit, cross your fingers and pray to god it works in IE

Unfortunately, I've already given up on making IE-supported pages...

Hard web developer truths.

 

[KnightNiwrem]

Yes, such is the state of front end web development in 2015. We have react, we have immutable, we have all this great stuff...and then we have polyfills for legacy browsers and the constant fear that everything will break if someone decides to open it in internet explorer.

Hard Web Development Truths

Hence, the preference for separate mobile and desktop webpages + viewport-relative sizing, no collapse?

 

[natnai]

Hence, the preference for separate mobile and desktop webpages + viewport-relative sizing, no collapse?

Increasingly now I think the overhead of having a m.xyz.com thing is growing a little bit of fashion. With flexbox and grid solutions like bootstrap's it has become significantly easier, but still on legacy browsers, the problem is very serious. Recently I just gave up on anything below IE10, because it's a waste of time.

 

[natnai]

I mean, why should developers have to account for legacy browsers anyway? You hired me to build an app. I built it on top of battle-tested technology with all the best practices to ensure the app's longevity in the next 3, 4, even 5 years. And you get clients who then tell you they're basically too lazy to click a few buttons and download the latest IE, so you have to change the app to make it lousier, so that they can indulge their own utter laziness. It's unbelievable. It's now at the point where I just tell them that this is the way it is and it isn't gonna change.

It gets even worse when you have to support Safari. People always associate Apple with cutting edge, but the truth is Apple has been deliberately sabotaging their own browser for ages because it's in their best interests to make developers move to obj-c/swift development. Now react-native has come along, and I'm curious to see how they're going to sabotage that too. Apple is a filthy capitalist monster that's even more cutthroat and unconscionable than Microsoft.

 

[davidktw]

I mean, why should developers have to account for legacy browsers anyway? You hired me to build an app. I built it on top of battle-tested technology with all the best practices to ensure the app's longevity in the next 3, 4, even 5 years. And you get clients who then tell you they're basically too lazy to click a few buttons and download the latest IE, so you have to change the app to make it lousier, so that they can indulge their own utter laziness. It's unbelievable. It's now at the point where I just tell them that this is the way it is and it isn't gonna change.

It gets even worse when you have to support Safari. People always associate Apple with cutting edge, but the truth is Apple has been deliberately sabotaging their own browser for ages because it's in their best interests to make developers move to obj-c/swift development. Now react-native has come along, and I'm curious to see how they're going to sabotage that too. Apple is a filthy capitalist monster that's even more cutthroat and unconscionable than Microsoft.

Regarding your first part, whether you get to support only the latest browser is not an easy choice of just download the latest. In large corporates and especially government sectors, they don't get to use the latest browsers or latest OS most of the time.

of course you can choose not to do those businesses. But then, who is at the losing end?

 

[KnightNiwrem]

of course you can choose not to do those businesses. But then, who is at the losing end?

Both parties, really. Not using the latest browser or OS could easily mean that their browser or OS are open to holes that have already been patched in later versions. It means that their systems are incapable of doing better things safely and efficiently.

On the developer's side, it also means that he has to be careful about any new patches he pushes into his software or website. At worse, he keeps an older version of the software somewhere for legacy browsers or OS to access, but runs the risk of having to use more and more "creative" hacks if patch needs to be pushed to both versions (e.g. security patch, bug fix).

Depending on the circumstances, it might not be worth the time, effort or money to continue supporting legacy browsers and OS.

 

[KnightNiwrem]

Increasingly now I think the overhead of having a m.xyz.com thing is growing a little bit of fashion. With flexbox and grid solutions like bootstrap's it has become significantly easier, but still on legacy browsers, the problem is very serious. Recently I just gave up on anything below IE10, because it's a waste of time.

I doubt they really have much of a choice anyway, which makes your statement sort of true.

On 12/1/16, Microsoft will drop support for all legacy browsers except for the latest possible browser for a supported OS. This means that businesses runs the risk of running browsers that have holes that will never be fixed, if they persists with legacy browsers.

Since most of us has switched to at least Windows 7, including most of our governmental agencies, that means that the only browser that will continue receiving support after 12/1/16 is IE11. Which does mean that supporting anything below IE10 is, indeed, a waste of time.


(Source: https://support.microsoft.com/en-us/lifecycle#gp/msl-ie-dotnet-an)

 

[davidktw]

Both parties, really. Not using the latest browser or OS could easily mean that their browser or OS are open to holes that have already been patched in later versions. It means that their systems are incapable of doing better things safely and efficiently.

On the developer's side, it also means that he has to be careful about any new patches he pushes into his software or website. At worse, he keeps an older version of the software somewhere for legacy browsers or OS to access, but runs the risk of having to use more and more "creative" hacks if patch needs to be pushed to both versions (e.g. security patch, bug fix).

Depending on the circumstances, it might not be worth the time, effort or money to continue supporting legacy browsers and OS.

From a technology standpoint, it is not that hard to infer all these shortcomings and also the values. but the fact remains the business world is not just a matter of technologies and it is not so much that high in the value chain of all businesses.

However when you are doing business with these clients whom have their software meant to be used by other corporates with such limitation, it is not a straight forward choice to just abandon the old. there is a customer base to cover and there are special cases too.

So legacy support is still a must in quite numerous use cases. On top of that, you have to also consider. even if you were to roll out the software on day one and you only support the latest browser version on that day, 5 years down the road, you will still be likely supporting that version depending on the maintenance contract.

so when it comes to legacy systems or clients support, this is not all that easy an equation to resolve. perhaps when you are really doing projects, you will better understand these operational issues

 

[Azzizz81]

I mean, why should developers have to account for legacy browsers anyway? You hired me to build an app. I built it on top of battle-tested technology with all the best practices to ensure the app's longevity in the next 3, 4, even 5 years. And you get clients who then tell you they're basically too lazy to click a few buttons and download the latest IE, so you have to change the app to make it lousier, so that they can indulge their own utter laziness. It's unbelievable. It's now at the point where I just tell them that this is the way it is and it isn't gonna change.

Cos a lot of your clients customers are doing their online shopping from company desktop and will just move on to a competitor's website if the layout looks weird

 

[natnai]

From a technology standpoint, it is not that hard to infer all these shortcomings and also the values. but the fact remains the business world is not just a matter of technologies and it is not so much that high in the value chain of all businesses.

However when you are doing business with these clients whom have their software meant to be used by other corporates with such limitation, it is not a straight forward choice to just abandon the old. there is a customer base to cover and there are special cases too.

So legacy support is still a must in quite numerous use cases. On top of that, you have to also consider. even if you were to roll out the software on day one and you only support the latest browser version on that day, 5 years down the road, you will still be likely supporting that version depending on the maintenance contract.

so when it comes to legacy systems or clients support, this is not all that easy an equation to resolve. perhaps when you are really doing projects, you will better understand these operational issues

You are right. It's a very very difficult problem. On one hand there is a great number of opportunities with new technology, but you have to account for legacy to some extent.

But having said that, one must draw a line somewhere. Unless you have an army of engineers it's not going to be realistic to support all legacy tech. If you ask me you've got to draw a line. I mean, I guess it's a matter of what type of reputation you'd like to develop for your business.

You're either going to lean more toward supporting the more cutting edge stuff or building for legacy. But I don't think doing both is an entirely sensible thing from a business pov.

Then again that's maybe just a personal thing. I'm not really a programmer looking for big money and there's always a market for modern apps especially in the Web space. So that's that for me; I might think about IE8 and 9 if **** really starts hitting the fan for me financially, but not at the moment.

Sent from Xiaomi MI NOTE LTE using GAGT