I have a layout with an image to the left and a text on the right for medium and large views. I want to the text to be BEFORE the image on "small-12" though.
The pull/push mechanism does not seem to work with "xxx-12" columns.
These are my divs:
<div class="large-4 medium-6 small-12">Image</div>
<div class="large-8 medium-6 small-12">Text</div>
Here you go. You are missing columns. You want to order the small content first. Then push pull http://cdpn.io/xfJph
Related
Basic question please, I have an IG.
Trying to format a column using the following:
SELECT
CASE
WHEN my_number <= 3 THEN 'u-color-7-bg'
WHEN my_number > 3 THEN 'u-color-8-bg'
END some_color
FROM my_table
I'm modifying the resulting column 'some_color' to be an HTML Expression type.
On its HTML Expression part I have:
< span style="color: &SOME_COLOR.">&MY_NUMBER.< /span>
But it doesn't work, no format is getting applied whatsoever.
Can anybody give me a hand please?
u-color-xx are CSS classes not actual colors. It should work if you try <span class="&SOME_COLOR.">&MY_NUMBER.</span> instead.
Alternatively you can use CSS-Variables defined by APEX in newer versions like this: <span style="background: var(--u-color-35)">&MY_NUMBER.</span>
https://codesandbox.io/s/m3ljr4zl8p
example.js
I wasn't expecting column1 data to start overlapping into column2's instead of going down as it is now exceeding the grid column width.
What is the solution for this?
Columns are not overlapping. It's your <p> element takes more space than columns.
Add this style to it:
word-break: break-word;
Before word-break:
After word-break:
I created a gmail account and then when to Google+. On landing page, it first asked me to complete profile like Gender / Month / Date
I observed that there is no Select Tag. It is a dynamic div and it uses active-
<div class="mxa MC">
<div aria-activedescendant=":1x" aria-haspopup="true" tabindex="0" aria-expanded="false" style="-moz-user-select: none;" role="listbox" class="d-k-l d-y-r-c b-Qb hl">
<div aria-posinset="0" aria-setsize="4" role="option" id=":1x" class="d-k-l d-y-r-c-ha">Select</div>
<div aria-hidden="true" class="d-k-l d-y-r-c-Qa"> </div>
</div>
</div>
Am not able to understand how to click Male / Female once the dropdown list opens. The html doesn't change only the class expands further and aria-activedescendant value changes to :1q in case Male, :1r in case mouse hovers or Female
And on choosing this attribute value is set and next line "Select" text is changed to Male or Female, whichever chosen.
So how do select Gender or list items in such a situation
Flow was:
I created new Google Play Account through BlueStack, where it didn't ask for Gender / Month / Date
Then I opened browser on Desktop and opened this link
https://plus.google.com/up/accounts/upgrade/?continue=https://plus.google.com/
And there you get the option of Gender / Month / Date
I have a page that shows a schedule of events over a period of time. Thanks to Leigh on this site, I was able to get it working the way I wanted, except for one small issue. One of the events is placed at the bottom of one of the lists that is sorted by the datetime column "eventtime". I'm baffled.
Here's my code:
<cfquery datasource="fairscheduledb" name="getfairevents">
SELECT fd.FairDayDate, fd.daycolor, fd.description, ev.eventname, ev.eventday, t.eventtype, ev.eventtime
FROM fairdays fd
LEFT OUTER JOIN events ev ON ev.eventday = fd.fairdaydate
LEFT OUTER JOIN eventtypes t ON t.eventtype = ev.eventtype
ORDER BY fd.fairDaydate, t.id, ev.eventtime
</cfquery>
<cfoutput query="getfairevents" group="eventday">
<div class="schedulebox">
<!--- display event dates --->
<div class="schedulehead" style="clear: both; color: ###daycolor#;">#dateformat(fairdaydate,"dddd, mmmm dd")#</div>
<div class="schedulesubhead" style="clear: both; color: ##ffffff; background: ###daycolor#;">#description#</div>
<!--- event types for current date --->
<cfoutput group="eventtype">
<div class="scheduleitemtitle" style="clear: both; width: 700px; color: ###daycolor#;">#eventtype#</div>
<!--- individual events --->
<cfoutput>
<div class="scheduleitem" style="float: left; width: 75px; text-align: right;"><strong>#LCase(TimeFormat(eventtime,"h:mmtt"))#</strong></div>
<div class="scheduleitem" style="float: left; width: 550px;"> #eventname#</div><br/>
</cfoutput>
</cfoutput>
</div>
</cfoutput>
You're grouping your output on eventday and eventtype. You need to add those two columns to your ORDER BY, otherwise you can get unpredictably-ordered results.
ORDER BY fd.fairDaydate, t.id, ev.eventday, ev.eventtime, ev.eventtype
Ok. I found the problem, and it was a stupid one for me to miss. When I changed that specific entry yesterday, and typed in the correct time, it "auto inserted" the current date. In other words, I typed "8:45pm", and hit enter, and MSSQL automatically converts it to "2014-01-31 19:45:00.000", because yesterday was 01-31-2014. When the data was originally entered, it was 01-23-2014, so all of the entries reflected that date. Because the data type I used for that column was datetime.
I solved the problem by changing the data type to time(7), and viola, all is well. I feel stupid, now.
Thanks to everyone that tried to help with this.
I am very new to Foundation and am working on my first project.
What i'm not sure that i'm doing well is how i'm using the row class.
Currently i have the following setup:
The point is that i'm using the classes "two", "eight", "ten", etc to always add every row up to 12, is this the correct thinking about how i'm using the grid system?
Any help would be greatly appreciated.
Thanks.
The code from Charles' answer is a correct use, my description is here for the reason behind using a 'row'.
An element with a class of 'row' will create a horizontal block to contain one or more vertical columns. Then add divs with a 'column' or 'columns' class within that row. Specify the widths of each column with the small-#, medium-#, and large-# classes. The use of a 'row' is needed to contain all of your elements which have a size class associated with them.
The correct way to use this would be:
<div class="row">
<div class="large-2 columns">
This text spans 2 columns.
</div>
<div class="large-8 columns">
This text spans 8 columns.
</div>
<div class="large-2 columns">
This text spans 2 columns.
</div>
</div>