Sponsored Content
The Lounge What is on Your Mind? Phase III: CSS Flexbox Upgrades Post 303021311 by Neo on Wednesday 8th of August 2018 04:08:10 AM
Old 08-08-2018
Phase III: CSS Flexbox Upgrades

On my never ending quest to get rid of table tags and make the site responsive for all device sizes, I plan to use CSS Flexbox with jQuery.

I tried using Bootstrap Flex and CSS Grids, but none of these worked as easy and clean as CSS Flexbox.

For example, today I changed the top header area (forum name and member avatar area at the very top of the each page) to be responsive (see YT video below or go to YT link directly).

Code:
<style>
    .flex-container-header {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: space-between;
    }
</style>
<script>
    $(document).ready(function () {
        $(window).on('resize', neoAdjustFlex);
        neoAdjustFlex();
        function neoAdjustFlex() {
            if ($(window).width() < 500) {
                $(".flex-container-header").css({ "justify-content": "space-around" });
            }
            else {
                $(".flex-container-header").css({ "justify-content": "space-between" });
            }
        }
    });
</script>

I plan to do this with the menus and then on to other forum views like search results, thread and discussion views, member lists, etc.

Code:
https://www.youtube.com/watch?v=9nrue8l9oIo

Or watch the vid here:


 

9 More Discussions You Might Find Interesting

1. UNIX for Dummies Questions & Answers

Hardware Upgrades..

Quick question would it effect Linux if I upgraded my Ram from 128RD Ram to 256RDRAM (I'm going to simply pop in a second 128 RAM chip)...would I need to change any configuration options etc or would Linux detect all this with no problem? (4 Replies)
Discussion started by: PravusMentis
4 Replies

2. AIX

HMC upgrades

Hey!!! Has anyone done HMC patch installation remotely? I would love to know if that would be possible. I have been doing through CD/DVD but hate to do the additional work of finding someone in the DC and sending him the CD's. I have seen the option to supply remote site. can that be helpful?... (5 Replies)
Discussion started by: balaji_prk
5 Replies

3. AIX

How can I manage redundant HMC upgrades with firmware upgrades?

Lets says I have 2 HMC's A and B, connected to a p570 managed system. Right now the firmware level of the p570 is EM320_076 and that needs to be upgraded to EM340_095. Now the HMC's are at V7R3.3 and as per the code matrix the HMC's needs to be upgraded to V7R3.4 Servicepack 2. Now my... (5 Replies)
Discussion started by: balaji_prk
5 Replies

4. Solaris

init phase

Hello, Can somebody explain me the relationship between /sbin and /etc directories ? what is the relationship between them and what are the roles of files such as rcd.1 etc? (1 Reply)
Discussion started by: saudsos
1 Replies

5. AIX

Need to confirm something regarding TL upgrades

Hi everyone, My current AIX OS level is "7100-01-06-1241" and I am planning to upgrade it to " 7100-02-03 ". Can i directly upgrade it to "7100-02-03" from 7100-01-06" ? or first i need to upgrade the "7100-01-06" LPAR to TL 02 and then reboot and then upgrade it to TL 02 SP03 ? ... (4 Replies)
Discussion started by: System Admin 77
4 Replies

6. What is on Your Mind?

Prototyping New Responsive Mobile for UNIX.COM - Phase III

From Prototyping New Responsive Mobile for UNIX.COM - Phase II, we move to Phase III. Basically, the core prototype for every day browsing the forums, replying, posting and editing on mobile is nearly finished with the exception of a few formatting issues with regard to rare system messages or... (4 Replies)
Discussion started by: Neo
4 Replies

7. War Stories

Postbit Changes (Phase II Upgrade)

Next in the pipeline, thinking I will work on postbit (the core of the posts) and try to get Bootstrap and badges working in postbit and not break the quick editors in the post. Note, I had to turn off the scrollbars in postbit for now because when I turn them on, it breaks the quick editor in... (11 Replies)
Discussion started by: Neo
11 Replies

8. Shell Programming and Scripting

XML Phase with awk

Hi Guys, Input XML File :- <managedObject class="RMOD_R" distName="MRBTS-101/X/R-7"> <list name="activeCellsList"> <p>15</p> <p>201</p> </list> <p name="aldManagementProtocol">True</p> <p name="serialNumber">845</p> </managedObject> Output :- ... (5 Replies)
Discussion started by: pareshkp
5 Replies

9. Docker

Docker learning Phase-I

Hello All, I had recently learnt a bit of Docker(which provides containerization process). Here are some of my learning points from it. Let us start first with very basic question: What is Docker: Docker is a platform for sysadmins and developers to DEPLOY, DEVELOP and RUN applications ... (7 Replies)
Discussion started by: RavinderSingh13
7 Replies
FLEX(1) 							   User Commands							   FLEX(1)

NAME
flex - the fast lexical analyser generator SYNOPSIS
flex [OPTIONS] [FILE]... DESCRIPTION
Generates programs that perform pattern-matching on text. Table Compression: -Ca, --align trade off larger tables for better memory alignment -Ce, --ecs construct equivalence classes -Cf do not compress tables; use -f representation -CF do not compress tables; use -F representation -Cm, --meta-ecs construct meta-equivalence classes -Cr, --read use read() instead of stdio for scanner input -f, --full generate fast, large scanner. Same as -Cfr -F, --fast use alternate table representation. Same as -CFr -Cem default compression (same as --ecs --meta-ecs) Debugging: -d, --debug enable debug mode in scanner -b, --backup write backing-up information to lex.backup -p, --perf-report write performance report to stderr -s, --nodefault suppress default rule to ECHO unmatched text -T, --trace flex should run in trace mode -w, --nowarn do not generate warnings -v, --verbose write summary of scanner statistics to stdout Files: -o, --outfile=FILE specify output filename -S, --skel=FILE specify skeleton file -t, --stdout write scanner on stdout instead of lex.yy.c --yyclass=NAME name of C++ class --header-file=FILE create a C header file in addition to the scanner --tables-file[=FILE] write tables to FILE Scanner behavior: -7, --7bit generate 7-bit scanner -8, --8bit generate 8-bit scanner -B, --batch generate batch scanner (opposite of -I) -i, --case-insensitive ignore case in patterns -l, --lex-compat maximal compatibility with original lex -X, --posix-compat maximal compatibility with POSIX lex -I, --interactive generate interactive scanner (opposite of -B) --yylineno track line count in yylineno Generated code: -+, --c++ generate C++ scanner class -Dmacro[=defn] #define macro defn (default defn is '1') -L, --noline suppress #line directives in scanner -P, --prefix=STRING use STRING as prefix instead of "yy" -R, --reentrant generate a reentrant C scanner --bison-bridge scanner for bison pure parser. --bison-locations include yylloc support. --stdinit initialize yyin/yyout to stdin/stdout --noansi-definitions old-style function definitions --noansi-prototypes empty parameter list in prototypes --nounistd do not include <unistd.h> --noFUNCTION do not generate a particular FUNCTION Miscellaneous: -c do-nothing POSIX option -n do-nothing POSIX option -? -h, --help produce this help message -V, --version report flex version SEE ALSO
The full documentation for flex is maintained as a Texinfo manual. If the info and flex programs are properly installed at your site, the command info flex should give you access to the complete manual. flex 2.5.35 February 2008 FLEX(1)
All times are GMT -4. The time now is 12:52 AM.
Unix & Linux Forums Content Copyright 1993-2022. All Rights Reserved.
Privacy Policy