Highlighted

Is Flexbox supported on large screen TV format????

LEGEND ,
Apr 16, 2018

Copy link to clipboard

Copied

Shock horror, just returned from a meeting with a client where we where discussing the layout of their website viewed on a wide screen monitor, hooked up to a wall..........Flexbox failed to recognise some arttibutes, like flex: 1; - of course I guess they could have been using an older browser.

This has thrown me into confusion because I dont know if its their browser, something to do with the monitor or Flexbox.........humm. Every thing works as expected in Firefox, Chrome, and Safari on Mac.

Every other aspect of the layout which used Flexbox seemed in position apart from elements which had flex: 1; associated with them.?

Os

Would you like the long reply, (and I do mean long) or the short reply?

In the short reply, it depends on the age of the 'smart' tv, and the manufacturers OS of the tv. Are they going through a games console, (again which one, and how old).

I'll require the above for the long reply anyway, but if it is a smart tv, and it uses the Android OS it may be that they have not updated the OS since purchase, and if that was more than 6years ago you may have to remember the limitations of 6 years ago for Android devices. If the tv is less than 4 years old, and over 40 inch, then large screen tvs built a zoom into the browser, which required a seperate media query to be produced.

As for flex 1 never ever use shorthand for tv or game console browsers.

Views

409

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Is Flexbox supported on large screen TV format????

LEGEND ,
Apr 16, 2018

Copy link to clipboard

Copied

Shock horror, just returned from a meeting with a client where we where discussing the layout of their website viewed on a wide screen monitor, hooked up to a wall..........Flexbox failed to recognise some arttibutes, like flex: 1; - of course I guess they could have been using an older browser.

This has thrown me into confusion because I dont know if its their browser, something to do with the monitor or Flexbox.........humm. Every thing works as expected in Firefox, Chrome, and Safari on Mac.

Every other aspect of the layout which used Flexbox seemed in position apart from elements which had flex: 1; associated with them.?

Os

Would you like the long reply, (and I do mean long) or the short reply?

In the short reply, it depends on the age of the 'smart' tv, and the manufacturers OS of the tv. Are they going through a games console, (again which one, and how old).

I'll require the above for the long reply anyway, but if it is a smart tv, and it uses the Android OS it may be that they have not updated the OS since purchase, and if that was more than 6years ago you may have to remember the limitations of 6 years ago for Android devices. If the tv is less than 4 years old, and over 40 inch, then large screen tvs built a zoom into the browser, which required a seperate media query to be produced.

As for flex 1 never ever use shorthand for tv or game console browsers.

Views

410

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 16, 2018 0
LEGEND ,
Apr 16, 2018

Copy link to clipboard

Copied

Would you like the long reply, (and I do mean long) or the short reply?

In the short reply, it depends on the age of the 'smart' tv, and the manufacturers OS of the tv. Are they going through a games console, (again which one, and how old).

I'll require the above for the long reply anyway, but if it is a smart tv, and it uses the Android OS it may be that they have not updated the OS since purchase, and if that was more than 6years ago you may have to remember the limitations of 6 years ago for Android devices. If the tv is less than 4 years old, and over 40 inch, then large screen tvs built a zoom into the browser, which required a seperate media query to be produced.

As for flex 1 never ever use shorthand for tv or game console browsers.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 16, 2018 1
LEGEND ,
Apr 16, 2018

Copy link to clipboard

Copied

pziecina  wrote

Would you like the long reply, (and I do mean long) or the short reply?

In the short reply, it depends on the age of the 'smart' tv, and the manufacturers OS of the tv. Are they going through a games console, (again which one, and how old).

Unfortuantley dont know. They were somehow linking through a laptop computer, not a games console.

pziecina  wrote

I'll require the above for the long reply anyway, but if it is a smart tv, and it uses the Android OS it may be that they have not updated the OS since purchase, and if that was more than 6years ago you may have to remember the limitations of 6 years ago for Android devices. If the tv is less than 4 years old, and over 40 inch, then large screen tvs built a zoom into the browser, which required a seperate media query to be produced.

Could be I guess, not a clue but it does throw the cat amongst the pigeons because itf that's what they are using to view on and make comments Im likely in trouble using Flexbox. All other positioning seemed ok as ar as I could tell apart from the elements that used flex; 1; (I'm pushing a footer to the bottom of the column)

pziecina  wrote

As for flex 1 never ever use shorthand for tv or game console browsers.

Ok how about margin-top; auto; that has the same effect of pushing the footer down to the extreme bottom of the column?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 16, 2018 0
LEGEND ,
Apr 16, 2018

Copy link to clipboard

Copied

I use margins with flexbox child elements to produce layouts that are not in rows or columns, (often for stagering the content) so feel free to use margin it does work, (even with negative values).

If the are connecting their laptop to a large screen tv, then the browser used is the laptops, and almost impossible to  design satisfactorily for, especially if it is connected to a 4k tv.

Flexbox will work, but it may be that they are using IE, so check the bug list on git, especially item 4.

https://github.com/philipwalton/flexbugs

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 16, 2018 1
LEGEND ,
Apr 16, 2018

Copy link to clipboard

Copied

pziecina  wrote

I use margins with flexbox child elements to produce layouts that are not in rows or columns, (often for stagering the content) so feel free to use margin it does work, (even with negative values).

If the are connecting their laptop to a large screen tv, then the browser used is the laptops, and almost impossible to  design satisfactorily for, especially if it is connected to a 4k tv.

Flexbox will work, but it may be that they are using IE, so check the bug list on git, especially item 4.

https://github.com/philipwalton/flexbugs

It never rains it pours! I'm going to have to make sure margin-top: auto; does the job and the only way is to query what the client is seeing. Im sure they only use this wide screen for board meetings and dont actually use it for browsing the web normally. They actually didn't appear to even notice the text was laying over other text, maybe they thought it was a design feature.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 16, 2018 1
LEGEND ,
Apr 16, 2018

Copy link to clipboard

Copied

osgood_  wrote

They actually didn't appear to even notice the text was laying over other text, maybe they thought it was a design feature.

Clients and employers, "cannot live with them, or without them"

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 16, 2018 0
osgood_ LATEST
LEGEND ,
Apr 16, 2018

Copy link to clipboard

Copied

pziecina  wrote

osgood_   wrote

They actually didn't appear to even notice the text was laying over other text, maybe they thought it was a design feature.

Clients and employers, "cannot live with them, or without them"

Clients, after this mornings explosive meeting I definitely could live without them for sure. 5 people including me sitting around a table, not one ,apart from myself had done any homework as to what was being disucussed and what options were on the table. Then one of them tries to tell me about my job............humm well it didnt go well as you can guess................rammed it back down his throat as it became transparently apparent i was the only one in the room that wasnt clueless...........got to love these people that try to intimidate you when they know nothing about what they are suppposed to be discussing, doesnt work with me.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 16, 2018 0
LEGEND ,
Apr 16, 2018

Copy link to clipboard

Copied

One other thing Os, if you don't ask for the long answer.

The use of the @support rule is your best friend when creating sites for viewing on large screen tv's and game consoles.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 16, 2018 0