My CSS Notes - Layout Part 1

> How to line up inline elements in one line without wrapping. Note: it will force the container expand and scroll bars may appear.

.container {
   white-space: nowrap;
   display: table-cell;
}

Here is an exmaple

> How to line up elements in one line without wrapping but truncate the "middle" element when the container doesn't have enough space.

Solution 1 using relative position.

.container {
 border: 2px solid black;
 margin: 2px;
 padding: 4px;
 position: relative;
}
.icon {
 float: left;
}
.icon2 {
 float: right;
}
.middle {
 background-color: aqua;
 position: absolute;
 left: 20px;
 right: 20px;
 overflow: hidden;
}
.text {
 white-space: nowrap;
}
<div class="container">
   <img alt="icon" src="add.gif" class="icon"/>
   <div class="middle">
      <span class="text">Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello</span>
   </div>
   <img alt="icon" src="add.gif" class="icon2"/>
   <div style="clear: both;"></div>
</div>

Here is an example

Solution 2 using margin.

.container {
 border: 2px solid black;
 margin: 2px;
 padding: 4px;
}
.icon {
 float: left;
}
.icon2 {
 float: right;
}
.middle {
 background-color: aqua;
 overflow: hidden;
}
.text {
 white-space: nowrap;
}
<div class="container">
   <img alt="icon" src="add.gif" class="icon"/>
   <img alt="icon" src="add.gif" class="icon2"/>
   <div class="middle">
      <span class="text">Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello</span>
   </div>
</div>

Here is an example


> How to line up elements but allow the "middle" element to wrap around and expand the container height.

.container {
 border: 2px solid black;
 margin: 2px;
 padding: 4px;
}
.icon {
 float: left;
}
.icon2 {
 float: right;
}
.middle {
 background-color: aqua;
 margin: 0 20px;
}
<div class="container">
   <img alt="icon" src="add.gif" class="icon"/>
   <img alt="icon" src="add.gif" class="icon2"/>
   <div class="middle">Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello</div>
</div>

Here is an example

Compiling kernel modules (tun.ko) for Android

If you want to use OpenVPN on your Android device, the first obstacle you have to face is trying to get the right network tunnel module for your phone's kernel. I always have a hard time to get the pre-compile version that matches the kernel I use. (Note: If you don't want to deal with this issue, you can always pick a kernel that comes with the tunnel module.) However, I always like to use the stock kernel which doesn't come with network tunnel module. So, after googling for awhile, I found out that compiling your own kernel module actually is not that difficult. First, I found this tutorial online http://sshrootat.blogspot.com/2011/06/compiling-tunko-for-android-openvpn.html by Sean Crosby. This is a very good tutorial; however, I encountered few issues when I tried to follow instruction. So, I want to share my steps here which are very close to Sean's tutorial but with extra details. Note: these steps are targeted for Tegra device like Motorola Xoom and assume you have basic Linux knowledge and a Linux machine around to compile the source.

1. First thing you need is to find which kernel version you have on your device. 
• "uname -a" will do the trick. Note: If you need a program like "Terminal Emulator" to run command on your Android device. The output of uname should look something like this "Linux localhost 2.6.36.3-g111d827...." The number "2.6.36.3" is the kernel version number you're looking for. And the "g111d827" is the build number which you will need later when you compile the module because the build number has to be identical between kernel and the module.
2. Once you know the version you need, than you have to download the right source code. By the time I wrote this post, http://android.git.kernel.org was hacked and was offline for more than a month. So,  I found another alternative repository https://www.codeaurora.org/gitweb/quic/la/?p=kernel/tegra.git;a=heads. The web page listed all source branches in this repository. In this case, I would pick the branch "aosp/android-tegra-2.6.36". 
• To clone the source, create a new directory "android-kernel" and than run this command "git clone git://codeaurora.org/kernel/tegra.git -b aosp/android-tegra-2.6.36". I will take awhile to download the source, you can let it run and continue to next step.
3. Download the ARM crosscompiler from https://sourcery.mentor.com/sgpp/lite/arm/portal/release1293
• create a directory "compiler" and extract the binary with this command "tar -jvxf arm-2010q1-202-arm-none-linux-gnueabi-i686-pc-linux-gnu.tar.bz2" 
• Since I'm not a Unix programmer and don't know much about cross compiler, if this compiler doesn't work with your Linux version (I'm using Ubuntu 10.4), than you may have to do some research finding the right one.
4. Add the compiler bin to your path.
• "export PATH=$PATH:~/android-kernel/compiler/arm-2010q1/bin"
5. Once the source is downloaded, you should have "tegra" directory inside "android-kernel". Now, it's time to get your existing kernel configuration from your device. The file is located under "/proc" and called "config.gz". Download it to your linux machine and unzip it using "gunzip config.gz". Now, copy "config" file to "tegra" directory and rename it to ".config". You also need to make some changes to .config file.
• update CONFIG_CROSS_COMPILE to match your cross compiler. In this case, "arm-none-linux-gnueabi-" is the value.
• update CONFIG_LOCAL_VERSION to match your build number. In this case, it is "-g111d827".
• if your .config file has CONFIG_LOCALVERSION_AUTO set to Y like mine, change it to #CONFIG_LOCALVERSION_AUTO is not set
• last but the most important one is to make sure CONFIG_TUN is un-commented and set to m
6. Modify the setlocationversion script so it won't display "+" symbol.
• go to tegra directory
• vi scripts/setlocalversion
• locate the following line
• if $short; then
•      echo "+"
• change echo "+" to echo ""
7. Set the environment properties for the compiler
• export ARCH=arm
8. Compile the modules
• go to "tegra" directory
• run "make modules"
9. If the compile succeed, you should find a tun.ko file under drivers/net.
• run "strings tun.ko" to make the version is matching your kernel version.
10. Now, copy the module file back to your Android device and enjoy OpenVPN.

How to setup TomatoUSB with non-root ssh access

1. First, you need to have a working TomatoUSB instance. Following the instruction here if you have an ASUS RT-N16 router.
2. Now, assuming you have installed and setup the router already. Go to Administration > Admin Access to enable SSH Daemon. Depending on your needs, you may want to enable/disable different options. In my case, I had checked Enable at Startup and Remote Forwarding. I didn't need Remote Access because my instance is behind another router. I disabled Allow Password Login and use Authorized Keys for authentication. Test your setup by trying to ssh into the router. I also disabled the Telnet Daemon to tighten up the security.
3. Install optware and you can find a very good instruction here.
4. Install coreutils
• ipkg install coreutils.
5. Create a new user in tmp memory. The following instructions are based on the tutorial here.
• Edit the following files in /tmp/etc. They're standard unix files so google it to find out the syntax.
• passwd
• group
• shadow
• Create a user home directory in /tmp/home
• Create a ".ssh" folder under /tmp/home/.
• You can create a new authorized_keys file or simple copy it from root user.
6. Test the user creation.
• Try login  and enter the password to make sure the user is working correctly.
• Go to another box and try to ssh into the router using the new user.
7. If everything works, save the changes to NVRAM.
• The new entries you added to the passwd, group and shadow files. Move them into .custom files. For example, the entry in passwd file should be move to passwd.custom file.
• Execute the following commands to persist the changes
• nvram setfile2nvram /etc/passwd.custom
• nvram setfile2nvram /etc/group.custom
• nvram setfile2nvram /etc/shadow.custom
• nvram setfile2nvram /home//.ssh/authorized_keys
• nvram commit
8. Create a script to fix the owner and permission of the user home directory.
• Since chown doesn't come with the standard install but from optware. We need to add the script to /opt/.autorun file.
• Put the following command into /opt/.autorun file
• chown -R . /home/
• chmod -R 700 /home/
• Make sure .autorun is executable.
• chmod u+x .autorun
9. Reboot the router.
10. Now, you should be able to ssh to the router with a non-root user.
11. The final step is to disable ssh access for root user. Go back to web admin interface - Administration > Admin Access and clear the Authorized Keys field.
    
    

How to view full version web site on your Android device especially tablet.

The stock browser comes with Android OS allows user to change User Agent String. By changing the UAString, the web server thinks you are using a desktop browser instead of a phone browser. This means you can trick the web server to serve you the full version web site instead of the mobile version. To change the UAString, you need to turn on the browser debug mode:

1. Open the browser an type about:debug in the address bar and click Go
2. Once you click Go, there is no visible indication to show you whether the browser is in debug mode or not. You need to open the browser Settings and verify the debug options are available.
3. Where is the UAString option?
• If you have Android phone edition (pre-3.x), UAString option is under menu > more > Settings. The settings page is long and the option is near the bottom of the page.
• If you have Android tablet edition (3.x and up), the option is under menu > Settings > Debug. 
4. Click on UAString option and select Desktop. Now, you should be able to view any full version web sites on your device.

However, one important note: the selection will not stick which mean if the OS decides not to keep the browser app in memory. Next time, you open the browser, the selection will change back to mobile and you need to change the settings again.

Resolve the "failed to sync Contacts" issue.

If you're having trouble to push your Gmail contacts to your Android phone, try the following steps:

1. Backup your Gmail contacts. Go to your Gmail contacts page, click More actions and then select Export... to download a copy of your current contacts.
2. If you update some contacts information on your phone after it failed to sync, you need to manually update the changes to your Gmail contacts online.
3. Make sure you Gmail contacts have all updated contact information.
4. Erase all contacts on your Android phone. Go to your phone Settings > Applications > Manage Application. Go to All tab and search for Contacts Storage. (Tips: you can search the list by pressing the search button on your phone.) Open Contacts Storage and click Clear data.
5. Once it's done, you can wait for next update or go to Settings > Account & Sync and click Sync all to force immediate update.

Now, the contacts on your phone should be identical to the one on your Gmail.

HTC EVO 4G Gingerbread upgrade

ROM:
Fresh EVO (http://forum.xda-developers.com/showthread.php?t=1046622)
Download version 4.0 beta 3 and then use "Fresh Updater" to upgrade to beta 4.


Radios:
EVO_Radio_2.15.00.04.08 (http://forum.xda-developers.com/showthread.php?t=715485)


Steps:

1. Make sure all apps are up-to-date. Go to Android Market, update all.
2. Backup your system and user data files using Titanium Backup.
3. Full NAND backup. Reboot, run recovery tool and backup.
4. Make a copy of the NAND backup to a computer. In case something happen to the SDCard! While in recovery mode, you can turn on USB-MS mode which will make your phone acts like an external hard drive.
5. Copy the ROM and Radio files to SDCard while you're in USB-MS mode.
6. Wipe your phone, clear caches.
7. Flash the ROM file.
8. Boot into the new ROM, Skip all setups.
9. Run "Fresh Updater" to upgrade to beta 4.
10. Complete the upgrade and back to Android OS.
11. Download Titanium Backup from Market.
12. Run TB and restore backup. *I ran into an issue while restoring the backup. I have too many apps and the system ran out of internal storage. I have to manually move some apps out of the internal storage using "move to SD" option.
13. Verified the backup is complete.
14. Reboot to finish the install.
15. If the restore is good, make a NAND backup again and than flash the Radios.
16. Optional:
1. Go back to recovery tool, run fix app UID script.
2. Personally, I don't have the Fresh EVO Rom boot animation. So, I replace it with the standard HTC boot animation.

Fixing Sprint MMS problem

I was unable to send or receive MMS messages since I got my EVO 4G last year. I didn't spend too much time resolving this issue because I didn't use MMS that often. I only sent picture via email. Anyway, today, I came across an old thread at Android Forms and member Packdog posted a simple solution to fix the MMS problem. I gave it a quick try and it worked! Thanks Packdog.


Steps to fix the MMS issue by updating the APN settings:

1. Download APN Backup & Restore app from Market.
2. Open the app and click Backup APNs button.
3. Your APN settings should be exported to a xml file in /sdcard/ApnBackupRestore folder.
4. Make a backup of the xml file.
5. Modify the xml file to match the following settings
6. Open the APN Backup & Restore app again but this time click Restore APNs. Pick the xml file that you just modified.
7. Reboot your phone.
8. DONE!

<?xml version='1.0' encoding='UTF-8' standalone='yes' ?>
<apns count="1">
  <apn name="Production" numeric="00000" mcc="000" mnc="00" apn="1" user="null" server="null" password="null" proxy="null" port="null" mmsproxy="null" mmsport="null" mmsprotocol="2.0" mmsc="http://mms.sprintpcs.com" type="mms" />
</apns>


Fixing streaming issue after build 3.70.651.1 upgrade

After I upgraded my EVO to build 3.70.651.1, Google Listen failed to stream any podcasts over 3G network. I can only do it over wifi. Since then I had to switch to Stitcher to listen to my podcasts. Until today, I saw this thread in xda developers forum by accident. Apparently, people in Sprint didn't want user to stream data over 3G network. So, in the update they set the HTTP PD Proxy to one of their proxy server. This allows them to control over what kind of data can go through the 3G network Anyway, here is fix I copied from the thread. You need to know your MSL number which you should be able to get by download the MSL Reader from the market.


Here is the steps to unset the proxy setting:

1. Dial ##3282#. This will bring up an app named EPST
2. Pick Edit Mode when you receive a prompt.
3. It should ask for a passcode. Enter your MSL number as the passcode.
4. Now, you're in EPST - Edit Mode.
5. Select Advanced to go the advanced settings.
6. Scroll down to the bottom and you should see the properties for HTTP PD Proxy
7. Unset the HTTP PD Proxy Port to 0
8. Unset the HTTP PD Proxy Address to 0.0.0.0
9. Press Menu button and select Commit Modifications

Now, you should be able to stream data over 3G network again.