android,html,css,flex , mobile friendly CSS multi column layout that doesn't suck like flex


mobile friendly CSS multi column layout that doesn't suck like flex

Question:

Tag: android,html,css,flex

I implemented a flex multi column layout, got it to look great on my desktop, then looked at it on a mobile device and it was complete trash (all scruntched together, ignoring width parameters completely). Played with it for hours and everywhere I went on the internet said flex sucked for mobile devices. Can't be hacked correct.

I tried playing with columns, but text spans it's self to a next column on it's own, which will not work for me JSFiddle column code (note: the position of the "DEBUG" string, it throws it's self into the 3rd column where very clearly in the HTML, I have it defined in the first column, within the closing

</div>

)

What is a decent CSS multi-column layout for mobile devices that restricts content to a specific column?


Answer:

You can have more control of your content by placing your content in three divs and then use CSS to define the width and margins of your divs (columns).

For Example this could be your CSS:

.oneThird {
    float: left;
    margin-right: 2%;
    width: 32%;
}
.gridLast {
    margin-right: 0;
}

And this your HTML:

<div class="oneThird">
    <p>Column Content 1</p>
</div>
<div class="oneThird">
    <p>Column Content 2</p>
</div>
<div class="oneThird gridLast">
    <p>Column Content 3</p>
</div>

Here is a JSFiddle: http://jsfiddle.net/wsqLagfu/

I hope this is what you need.


Related:


CSS :hover that shows more than one image


html,css,css3
I have an icon on my website. I want to change the icon to 4 different images when ever I hover over the first one. So I know how to switch between the regilar image to yellow0.png, but how do I continue to the next one (after half a second...

why is Android app publishing taking several days [on hold]


android,google-play,publishing
I have uploaded my app on the store 3 days ago and it status still : PENDING PUBLICATION I have uploaded all the app listing needed : description, screen shots ... and google didn't contact me on E-mail. does anyone had the same case before ???...

Get elements containing text from array


javascript,jquery,html,arrays,contains
I want to search all the elements containing any string in the array. For example I have following list of items <ul> <li>cricket bat</li> <li>tennis ball</li> <li>golf ball</li> <li>hockey stick</li> </ul> and this array var arr = ['bat', 'ball']; It should select all the elements having text bat and ball....

Android String if-statement


java,android,string
I have a if-statement in the start of my app if (ready.equals("yes")){ ... } and later on my code I have ready="yes"; but the if statement is never called, why? The ready="yes"; is called from a background thread, is that why? public void DownloadFromUrl(final String fileName) { //this is the...

Twitter4j - cannot resolve method - setUsessl(boolean)


android,android-studio,twitter4j
I'm using twitter4j 4.0.3 core I have this code: public final class TwitterUtil { private RequestToken requestToken = null; private TwitterFactory twitterFactory = null; private Twitter twitter; private TwitterUtil() { ConfigurationBuilder configurationBuilder = new ConfigurationBuilder(); configurationBuilder.setOAuthConsumerKey(ConstantValues.TWITTER_CONSUMER_KEY); configurationBuilder.setOAuthConsumerSecret(ConstantValues.TWITTER_CONSUMER_SECRET); configurationBuilder.setUseSSL(true); Configuration configuration =...

show div only when printing


javascript,html,css
Let's say that I have <div id="printOnly"> <b>Title</b> <p> Printing content </p> </div> Is it possible to hide this div when page rendering and to show only when printing this div?...

Set value for Spinner with custom Adapter in Android


android,dynamic,android-arrayadapter,android-spinner
I am developing a android application with spinner in a form. The spinner items and spinner values are different. I want to collect all the value from the from including spinner and set a rest api service to web back end. here is the response array. {"Status":true,"errorType":null,"countryList":[{"Code":"US","Name":"United States"},{"Code":"CA","Name":"Canada"},{"Code":"AU","Name":"Australia"},{"Code":"GB","Name":"United Kingdom"}]} I...

Can I install 2 or more Android SDK when using Eclipse


java,android,eclipse,sdk,versions
I am new to android developments. I am setting up my android development environment using Eclipse. I have a test smart phone with Android version 4.2.2. The automatic installation installed the latest Android SDK version, which is 5.1.1. My questions are: 1. Do I have to install the SDK version...

how to add menu items to action bar in more than 30 activities


android,android-activity,android-studio,menu,menuitem
I have created an app in android studio that has more than 30 activities .I created menu items in some activities by adding them in individual menu files and they worked fine . But the problem is that it is a real headache to add all the menu items in...

Detect when the jQuery UI slider is being moved?


jquery,html,css,jquery-ui
I have this custom video time UI slider to change the time of the YouTube video when scrubbed. My problem is that when the video is trying to load when the user is moving the slider, it causes the handle to jerk around and flip around. What I'm trying to...

Android custom calendar view disable specific dates


android,calendarview
i'm new to android developing and started to develop an booking app. There is a calendar view and i want to disable booked dates in that calendar. I found out that disabling feature is not there in android default calendar. so could you please help me to find a good...

custom arraylist get distinct


java,android
is there any way to get the distinct values of a custom arraylist? public class mystatistic extends BaseActivity { public String objectid; public String playerid; public String playername; public String enemyid; public String enemyname; public String question; public mystatistik(String objectid, String playerid, String playername, String enemyid, String enemyname, String question)...

How to set speaker phone off when the app is killed by the “Recent App drawer”


android,android-audiomanager,ondestroy
I implemented an app which has a button speaker, which is manually set "on" by myAudioManager.setSpeakerphoneOn(true) and "off" vice-versa. But the bug is when you close the application while the speaker is on, it forgets the speaker was on. The next time, the speaker remains on and the call is...

How to remove all the borders of a selectbox?


jquery,html,css,drop-down-menu
How can I remove the all the borders of the selectbox using css or Jquery ? My code, <select id="doctor_ch"> <option value="1" selected>One</option> <option value="2">Two</option> </select> CSS #doctor_ch{ background-color: #88AFF2; color:#fff; margin-top: 15px; } When I use this code it only changes the arrow style. I want to remove the...

Unfortunately, (My app) has stopped. Eclipse Android [duplicate]


java,android,eclipse,adt
This question already has an answer here: What is a Null Pointer Exception, and how do I fix it? 12 answers I'm a beginner in android developing and I'm trying to build a simple app but I'm getting this error in the emulator.(Unfortunately,(App) has unexpectedly stopped). LogCat http://i.stack.imgur.com/VZhuL.png package...

Floating Action Button in Xamarin.Forms


android,xamarin,monodroid,xamarin.forms,floating-action-button
I had completed my App's home page in Xamarin.Forms Portable. Now i want to add a Flotation Action Button In my Android Project ! Is there any way to add FAB for Android in my existing home page, which was coded in Xamarin.Forms Portable. OR I want to create a...

tag in HAML


html,css,haml
How do I create a I-tag in haml? Example: <i class="fa fa-search"></i> ...

Get current latitude and longitude android


java,android,gps,geolocation,location
Requirement: 1.Sometimes(not everytime) I am getting latitude and longitude 0.0. 2.I want to know how to get the location update after user has enabled the gps from the settings. Here is my code public class GPSTracker extends Service implements LocationListener { private final Context mContext; // flag for GPS status...

Top header 100% of screen, but body only 70%?


html,css
Pretty new to CSS and just having quite a bit of trouble, I've tried everything, searched here, but can't seem to make it work. Right now my header/body are both 70% of the screen. However I want my top header (.mainheader) to be 100% of the screen, but have the...

Notification whenever a new topic is created on mosquitto


android,mqtt,mosquitto,libmosquitto
I am trying to implement Push notifications on Android, using Mosquitto broker. So, different android application create topics based on tehir id on which they will receive notifications. To send notifications to those android applications we need the name of the topic. I am wondering if there is a way...

Dagger 2 Custom Scope for each Fragment


android,android-fragments,dagger-2
I'm a little confused about how to best use the custom scoping in Dagger 2. I've looked at a couple different articles which seem to suggest two different ways of doing it: MVP Presenters that Survive Configuration Changes Part-2 (Github repo): Uses unique custom scopes for each fragment, e.g. @Hello1Scope...

Target next instance of an element/div


javascript,jquery,html
I have the following HTML structure and JavaScript file: .html <li> <button class="show-more"></button> some more elements <div class="hidden"></div> </li> JavaScript $( ".show-more" ).click(function() { event.preventDefault(); $( this ).next().slideToggle( "fast", function() { }); }); I need the click event to toggle the next first instance of .hidden, however the click event...

Is there any sdk to log exceptions, events and errors in production app?


android,logging,error-handling,sdk,production
I want to catch all the un expected/undesirable events in my app during production. I want something which can send a error log file to server and I can easily read it through a web application. Do you know anything of this sort ?

Android Implicit Intent for Viewing a Video File


java,android,android-intent,uri,avd
In my Android app, I have a button that when clicked, launches the external application of my choice to play a video (I gather that this is called an "implicit intent"). Here is the relevant Java code from my onCreate method. Button button = (Button) findViewById(R.id.button); button.setOnClickListener ( new Button.OnClickListener()...

Fixed element in android?


android,xml,android-fragments
I am using a FAB(Floating action button) and a ViewPager that has a list inside a fragment. The ViewPager stops due to the FAB block and each are blocks the ViewPager being on top of the FAB activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:fab="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:fitsSystemWindows="true">...

why i don't get return value javascript


javascript,jquery,html,json,html5
When i debug my code i can see i have value but i don't get value to createCheckBoxPlatform FN function createCheckBoxPlatform(data) { var platform = ""; $.each(data, function (i, item) { platform += '<label><input type="checkbox" name="' + item.PlatformName + ' value="' + item.PlatformSK + '">' + item.PlatformName + '</label>' +...

Dynamically resize side-by-side images with different dimensions to the same height


javascript,html,css,image
I have two images side-by-side within a block-level container with arbitrarily different dimensions (as in, they could be any two images) that I want to dynamically adjust the width of so that the overall height of the two images is the same. I don't think this can be done in...

submitting form then showing loading image by javascript


javascript,html
I am submitting a form and loading loading gif in the same div by replacing html of form by html of loading image. I am first submitting the form then loading gif, because I have to replace the content of div(in which form exist) with loading image. Logs 1,2,3 are...

Centering navbar pills vertically within the navbar using flexbox


html,css,twitter-bootstrap,flexbox
I am terrible at CSS so I am having trouble centering my <li> (navbar pills) vertically for my navbar. This navbar is from twitter bootstrap Here is the HTML for my navbar: <div class="container"> <nav class="navbar navbar-default navbar-fixed-top"> <ul id="nav_pills" class="nav nav-pills" role="tablist"> <li role="presentation"> <a href="/">About</a> </li> <li role="presentation">...

Why i get can not resolve method error in class android?


android,json
I use this tutorial: JSON and part of code to this: protected String doInBackground(String... urls) { TextView lbl=(TextView) findViewById(R.id.provCODE); person = new Person(); person.setName(lbl.getText().toString()); //person.setCountry("1853"); //person.setTwitter("1892"); return POST(urls[0],person); } but in the this line: person.setName(lbl.getText().toString()); i get this error: Can not resolve method. How can i solve that?what happen? my...

Website showing differently in windows xp and mobile


html,css
I made a website for one of my clients, and I change the background and font color. Now on windows xp and smartphones the background changed color to the default color and the fonts remained the same. The website is simfest.ro I don't know what to do to make it...

Click on link next link should be display on same page


javascript,php,jquery,html,css3
I have a single page website and need to link the navigation to IDs in the page. I have three links: "About us", "Our Project", "contact". So if user clicks on "About ", the About section will be displayed, same with other links. Inside Our project there is Two buttons...

How to make background body overlay when use twitter-bootstrap popover?


html,css,twitter-bootstrap
Currently I used this twitter-bootstrap popover: <button type="button" class="btn btn-default" style="margin-top:11px; padding-bottom:4px; padding-top:4px;" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Upgrade The output: How I can make the background overlay like bootstrap modal? My expected output I use this jquery to popover $(function(){ $('[data-toggle="popover"]').popover({ placement...

Android Espresso: Test running failed. No test results Empty test suite. Why?


android,android-espresso
Can't make my Espresso UI test work. Where's the problem? What result should I get for this simple app to consider that it's working? I have "android.support.test.runner.AndroidJUnitRunner" for Instrumentation runner in Edit Confirurations. From AndroidManifest.xml: <instrumentation android:name="android.support.test.runner.AndroidJUnitRunner" android:targetPackage="my.package"/> From build.gradle: defaultConfig { applicationId "my.package" minSdkVersion 18 targetSdkVersion 22 versionCode 1...

How to resolve Out of Memory Error on Bitmap in Android?


android,android-intent,android-activity,bitmap
I want to set an image in image view,I am retrieving the image path in my first activity and I am passing it via intent as a String to second activity.In the second activity I set the path to an image view,It is working properly , and I need to...

Is there any way to use a pre-existing database from Xamarin without copying it from Assets?


android,xamarin,xamarin.forms
I have a rather large SQLite database (~20 mb) I need to access from my Android Xamarin-Forms app. Everything online I've read says you can read the database by copying it to the filesystem first. For example, this question. However, won't that mean the large database is duplicated, wasting users'...

CSS - Linear Gradient Background Color no-repeat is not working for if it has multiple tds


html,css,css3
I want to apply css3 gradient (left and right transparent) background color for a TR element like below. Below code is working fine if it has only one TD element, where as more than one td, background gradient started repeating for each td... Am I missing something? Online Demo CSS...

Div with the form of a pencil [duplicate]


html,css,css-shapes
This question already has an answer here: CSS triangle custom border color 2 answers How can i create a div with the form of a pencil, just like this: It seems a basic thing but im trying to do it since some time ago and still couldnt do it....

Keep HashMap with object data while app is idle - Android


android,android-activity
I have a HashMap that contains data relevant to a specific Activity. The problem is that when the app is opened after being idle for some time, the HashMap is empty. I am fetching all the data in the main activity and storing the corresponding objects in a HashMap in...

Dynamically select from a dynamically generated dropdown


php,html,select,drop-down-menu
I have a dynamically generated dropdown list - list of course identifiers and names. On the basis of a variable, “assigned_course_id”, I would like to preselect the appropriate value from the dropdown list. My best attempt is as follows. Thanks in advance for your assistance. <select name="course_id" id="course_id"> <?php $assigned_course_id...

Problems implementing ViewHolder pattern


android,design-patterns
I'm working on an android app from a book. I'm getting errors : "crimeHolder cannot be resolved" and I can't understand why.. public View getView(int poisition, View convertView , ViewGroup parent) { //If we weren't given a view, inflate one if (convertView == null) { convertView = getActivity().getLayoutInflater().inflate(R.layout.list_item_crime, null); ViewHolder...

How to remove unmatched row in html table using jquery


jquery,html
I have two tables. I want to delete unmatching rows. Compare with first column in Table1 and compare with first column in Table2. Table1 111 aaa 222 bbb 333 ccc Table2 333 xxx 444 zzz 111 vvv result of Table2 333 xxx 111 vvv I tried some thing here Please...

Android programming, draw a rectangle with specific coordinates


android
I am new to android programming. I am trying to draw a rectangle as in the image below. I have no idea how to do it with Rect(int left, int top, int right, int bottom). Can someone help me with this thanks. ...

Automatically calling server side class without


javascript,html,ajax
I have an anchor which calls a server side class when clicked, but I want to modify it so that the class is called as soon as the page loads, without having to click an anchor. <a href="#" class="_repLikeMore" data-id="1234" data-type="pid" data-app="forums"> ...

BitmapFont class does not have getBound(String) method


java,android,libgdx
Previously I used getBound method for BitmapFont class in libgdx, but now, I am unable to use it. I cannot find the changes in latest version. Any help is appreciated. Thank you...

Getting particular view from expandable listview


java,android,listview,android-fragments,expandablelistview
In my list view I have an textview in expandable group and I want to open the dialog when textview is clicked to fill the information through edittext and update textview. Problem: how could I get the groupview textview item in my fragment oncreateview() method....

How do I display my mysql table column headers in my php/html output?


php,html,mysql,table,data
2 Questions... Scenario: I would like to query my database table via a form and then display the results that occur(if there are results) and my current situation is that it does work but it clears the form completely and leaves my to an empty page with just the results...

how does android ImageView resize my image?


android
I have some 100*100 icons and I cannot find better resolution icons so I put them inside drawable folder. The width and height of the image view are set to wrap_content. When the image is shown on a xhdpi screen will the image be scaled to 200*200 automatically? or should...

change css dynamically by selecting dropdown list item


jquery,html,css,drop-down-menu
I have the following Dropdownlist with yes or no options-:` <asp:DropDownList ID="ddlchangecss" runat="server"> <asp:ListItem Text="yes">yes</asp:ListItem> <asp:ListItem Text="no"></asp:ListItem> </asp:DropDownList> i want to add a css dynamically like that-: .imgFullWidth { width: 100%; height: auto; float: left; margin: 0px 0px 20px 0px; } when I select yes option in Dropdownlist. How can...

Android set clickable text to go one fragment to another fragment


java,android,android-fragments,spannablestring
I need to do something like this. Suppose I have 2 fragments A and B.There is a text which can be clickable in fragment A and when user click this text , he can go to fragment B. This example helped me to do it but I think it does...