Not to be dense, but why would you do that? The username is what is visible without clicking into the profile, so I would think username would be more user friendly than full name. Just my opinion though…
For the forum, that is true (and he’d only have access to the username in the forum)
What do you mean? The only way you see an author’s username is in the URL of their profile page. Note that this searches SitePoint, not SitePoint forums. On forums, I’d search by username, on SitePoint, searching by username makes no sense.
1 Like
FYI in case anyone was working on that CSS issue. It’s actually a bug where the flexed item with flex-direction:column needs a height to go off of. https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview
The html,body{height:100%;} worked because it technically gave a hard value for the body element and allows the min-height to work. Here is a JS solution that allows it to work. We could get this working without JS probably but we’d need to avoid this situation altogether (and I’m trying to keep flexbox here and not redo a lot of code.)
$(window).on("load", function() {
var elHeight=$(window).height();
$("body").css("height", elHeight);
});
Won’t work. Putting this on the backburner, focusing on more pressing issues like adding more fields and those open issues in the repo. Thanks for trying! We’ll revisit this later!
This was a matter of pride. I spent the past…1 1/2 hours working on this. Managed to get a FULLY working solution in Chrome/FF/IE11 (dunno about 10). You were running into ANOTHER bug due to align-items:center on the results page. I managed to get rid of the Javascript that I thought was required. Whew…Here is the full changes (you already have hte prefixes I messaged you about so that isn’t here.)
body{height:1px;}
body{
flex-direction:row;
flex-wrap:wrap;
}
div.content, header
{
-webkit-box-flex: 1 1 100%;
-moz-box-flex: 1 1 100%;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
}
footer
{
-webkit-box-flex: 1 0 100%;
-moz-box-flex: 1 0 100%;
-webkit-flex: 1 0 100%;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
align-self:flex-end;
padding:1.5rem 0;
}
We also don’t need that one-liner CSS for the results page like we talked about. This can go into the universal CSS and be done with it 
I can explain any questions about this CSS…
Flexbox can be so damn annoying sometimes.
Note that some of my CSS actually reverts your changes back to default. In those cases, yo ucan simply remove what you have there. I just took a copy of your page and these changes were the ones that fixed everything, everywhere.
No dice, results break and go right of main content if I apply everything above in addition to what I already have.
Not for me.
Are you sure you did it right?
Full code
<!doctype html>
<html lang="en">
<head>
<base href="http://search.sitepoint.tools/?q=ryan+reese&authors=&keywords_any=&keywords_all=&search=Search" />
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>SitePoint Search</title>
<meta name="description" content="Diffbot-powered SitePoint Search Engine">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="/bower_components/normalize.css/normalize.css">
<link rel="stylesheet"
href="/bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.min.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.ie.min.css"/>
<![endif]-->
<link rel="stylesheet" href="/assets/css/main.css">
<style type="text/css">
body{height:1px;}
body{
flex-direction:row;
flex-wrap:wrap;
}
div.content, header
{
-webkit-box-flex: 1 1 100%;
-moz-box-flex: 1 1 100%;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
}
footer
{
-webkit-box-flex: 1 0 100%;
-moz-box-flex: 1 0 100%;
-webkit-flex: 1 0 100%;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
align-self:flex-end;
padding:1.5rem 0;
}
</style>
</head>
<body>
<div class="github-fork-ribbon-wrapper right">
<div class="github-fork-ribbon">
<a href="https://github.com/swader/diffbot-sp-search">Beta! Improve me!</a>
</div>
</div>
<img src="/assets/img/sp_square.png" alt="" class="bg"/>
<header>
<h3>SitePoint
<small>search</small>
</h3>
</header>
<div class="content">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong>
browser.
Please <a href="http://browsehappy.com/">upgrade your browser</a> to
improve
your experience.</p>
<![endif]-->
<div class="search-form">
<form id="main-form" class="submit-once">
<div class="main-search form-group">
<div class="input-group">
<input class="form-control" type="text" name="q" id="q"
placeholder="Full search query"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button"
data-toggle="modal"
data-target="#examples-table">?
</button>
</span>
</div>
<a href="#" class="small detailed-search">>> Toggle Detailed
searching</a>
</div>
<div class="detailed-search-group" style="display: none;">
<div class="form-group">
<label for="authorinput">Author(s): </label><input
class="form-control"
id="authorinput"
name="authors"
type="text"
placeholder="Bruno Skvorc"/>
</div>
<div class="form-group">
<label for="kanyinput">Keywords (any): </label><input
class="form-control"
id="kanyinput"
name="keywords_any"
type="text"
placeholder="sitepoint, diffbot, whatever"/>
</div>
<div class="form-group">
<label for="kallinput">Keywords (all): </label><input
class="form-control"
id="kallinput"
name="keywords_all"
type="text"
placeholder="sitepoint, diffbot, whatever"/>
<a href="#" class="small detailed-search">>> Toggle Detailed
searching</a>
</div>
</div>
<div class="form-group">
<input id="submit" class="btn btn-default" type="submit"
value="Search" name="search"/>
</div>
</form>
<hr>
<div class="results">
<div class="Media post">
<img class="Media-figure"
src="http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2015/03/1426540250ryanreese-300x300.jpg" alt="">
<div class="Media-body">
<h3><a target="_blank"
href="http://www.sitepoint.com/?attachment_id=101474">ryanreese</a></h3>
<p class="author">Written by Louis Lazaris, published on 15th March, 2015</p>
<p class="description"></p>
</div>
</div>
<div class="Media post">
<img class="Media-figure"
src="http://blogs.sitepointstatic.com/images/tech/212-ie6-missing-ap-elements.png" alt="IE6 and IE7 disappearing elements">
<div class="Media-body">
<h3><a target="_blank"
href="http://www.sitepoint.com/fix-disappearing-absolute-position-element-ie/">How to Fix Randomly Disappearing Absolutely-Positioned Elements in IE</a></h3>
<p class="author">Written by Craig Buckler, published on 20th January, 2010</p>
<p class="description"></p>
</div>
</div>
<div class="Media post">
<img class="Media-figure"
src="http://www.sitepoint.com/wp-content/themes/sitepoint/assets/images/icon.web.png" alt="">
<div class="Media-body">
<h3><a target="_blank"
href="http://www.sitepoint.com/life-sole-web-developer/">Life as a Sole Web Developer</a></h3>
<p class="author">Written by Nick Coad, published on 30th November, 2014</p>
<p class="description"></p>
</div>
</div>
<div class="Media post">
<img class="Media-figure"
src="http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2009/06/iecrsaf1.png" alt="IE Safari Chrome Usage">
<div class="Media-body">
<h3><a target="_blank"
href="http://www.sitepoint.com/internet-explorer-extinct-by-2013-2009-update/">Internet Explorer Extinct by 2013? 2009 Update</a></h3>
<p class="author">Written by Shayne Tilley, published on 22nd June, 2009</p>
<p class="description"></p>
</div>
</div>
<div class="Media post">
<img class="Media-figure"
src="http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2015/02/1423356070google-image.jpg" alt="Google Images search example">
<div class="Media-body">
<h3><a target="_blank"
href="http://www.sitepoint.com/recreating-google-images-search-layout-css/">Recreating the Google Images Search Layout with CSS</a></h3>
<p class="author">Written by Dan Rose, published on 9th February, 2015</p>
<p class="description"></p>
</div>
</div>
<div class="Media post">
<img class="Media-figure"
src="http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2015/01/1420578750node-js-installation-graphical-interface.png" alt="Node installation through a GUI">
<div class="Media-body">
<h3><a target="_blank"
href="http://www.sitepoint.com/getting-started-myth-preprocessor-future/">Getting Started with Myth: the Preprocessor of the Future</a></h3>
<p class="author">Written by Jacob Gube, published on 13th January, 2015</p>
<p class="description"></p>
</div>
</div>
<div class="Media post">
<img class="Media-figure"
src="http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2015/03/1425566558jslint-logo-300x93.gif" alt="JSLint Logo">
<div class="Media-body">
<h3><a target="_blank"
href="http://www.sitepoint.com/comparison-javascript-linting-tools/">A Comparison of JavaScript Linting Tools</a></h3>
<p class="author">Written by Jani Hartikainen, published on 4th March, 2015</p>
<p class="description"></p>
</div>
</div>
<div class="Media post">
<img class="Media-figure"
src="http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2015/03/1426483085without-meta.jpg" alt="Without viewport meta tag">
<div class="Media-body">
<h3><a target="_blank"
href="http://www.sitepoint.com/media-queries-width-vs-device-width/">Media Queries: Width vs. Device Width</a></h3>
<p class="author">Written by Ryan Reese, published on 16th March, 2015</p>
<p class="description">Ryan Reese introduces the basics of the viewport meta tag and explains why RWD layouts should not be based on device-specific media queries.</p>
</div>
</div>
<div class="Media post">
<img class="Media-figure"
src="http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2015/03/1426540250ryanreese-300x300.jpg" alt="">
<div class="Media-body">
<h3><a target="_blank"
href="http://www.sitepoint.com/users/ryanreese/">ryanreese</a></h3>
<p class="author">Written by Louis Lazaris, published on 15th March, 2015</p>
<p class="description"></p>
</div>
</div>
<div class="Media post">
<img class="Media-figure"
src="http://www.sitepoint.com/wp-content/themes/sitepoint/assets/images/icon.web.png" alt="">
<div class="Media-body">
<h3><a target="_blank"
href="http://www.sitepoint.com/podcast-31-sitepoint-cofounders-matt-mark/">SitePoint Podcast #31: SitePoint Cofounders Mark & Matt</a></h3>
<p class="author">Written by Kevin Yank, published on 15th October, 2009</p>
<p class="description"></p>
</div>
</div>
<div class="Media post">
<img class="Media-figure"
src="http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2015/04/1428647322windows9811017072_2405840429471194_9102776882934162361_n-300x221.jpg" alt="">
<div class="Media-body">
<h3><a target="_blank"
href="http://www.sitepoint.com/radar-highlight-js-linux-pranks/">On Our Radar: highlight.js, linux and pranks</a></h3>
<p class="author">Written by Jasmine Elias, published on 9th April, 2015</p>
<p class="description">Community Manager Jasmine Elias covers the latest on SitePoint Forums in "On Our Radar". The week with highlight.js, linux, form functions and PHP7.</p>
</div>
</div>
<div class="Media post">
<img class="Media-figure"
src="http://www.sitepoint.com/wp-content/themes/sitepoint/assets/images/icon.web.png" alt="">
<div class="Media-body">
<h3><a target="_blank"
href="http://www.sitepoint.com/radar-teaching-learning-web-devs/">On Our Radar: Teaching and Learning from Web Devs</a></h3>
<p class="author">Written by Jasmine Elias, published on 16th April, 2015</p>
<p class="description">Jasmine Elias talks about e-learning and learning code for the first time. Something for every web dev, from HTML, CSS, JavaScript and more.</p>
</div>
</div>
</div>
</div>
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function (b, o, i, l, e, r) {
b.GoogleAnalyticsObject = l;
b[l] || (b[l] =
function () {
(b[l].q = b[l].q || []).push(arguments)
});
b[l].l = +new Date;
e = o.createElement(i);
r = o.getElementsByTagName(i)[0];
e.src = 'https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e, r)
}(window, document, 'script', 'ga'));
ga('create', 'UA-64109085-1', 'auto');
ga('send', 'pageview');
</script>
</div>
<footer>
<a href="what.html">What's this all about?</a>
<br>-<br>
Built by <a href="https://twitter.com/bitfalls">@bitfalls</a> for <a
href="http://sitepoint.com">SitePoint</a>. Hosted on <a
href="http://bit.ly/do-ref">DigitalOcean</a>.
</footer>
<div class="modal fade" id="examples-table" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="examples-table-label">Query element
examples</h4>
<p>Note that using the main search will override anything defined in the detailed search fields. The two modes cannot be used simultaneously.</p>
</div>
<div class="modal-body">
<table class="controls table vanilla" border="0"
cellpadding="5">
<thead>
<tr>
<th>query=</th>
<th>Returns...</th>
</tr>
</thead>
<tbody>
<tr>
<td>computer vision</td>
<td>All objects containing "computer" and "vision"
anywhere
in
all Diffbot-extracted fields.
</td>
</tr>
<tr>
<td>"web page analysis"</td>
<td>All objects containing the phrase "web page
analysis"
anywhere in all Diffbot-extracted fields.
</td>
</tr>
<tr>
<td><span>author:<span
style="color:#888">"John Henry"</span></span>
</td>
<td>
<span>All objects containing "John Henry" in the <code>author</code> field. All Diffbot fields within a collection can be queried against.</span><br><br>
<strong>Other examples:</strong> tags:"Barack
Obama",
offerPrice:10.00
</td>
</tr>
<tr>
<td><span>images.caption:<span
style="color:#888">flower</span></span>
</td>
<td>
<span>All objects containing "flower" in the <code>caption</code> field within a nested <code>images</code> array.</span><br><br>
<strong>Other example:</strong>
images.url:amazon.com
</td>
</tr>
<tr>
<td><span>type:<span
style="color:#888">article</span></span>
</td>
<td><span>All objects identified as articles / processed by the Article API.</span><br><br><strong>Other
examples:</strong> type:product, type:image
</td>
</tr>
<tr>
<td><span style="color:#888">football</span> -49ers</td>
<td>All objects containing "football" but not containing
"49ers," in all Diffbot-extracted
fields.<br><br><strong>Other
examples:</strong> title:pantene
-title:conditioner,
text:diffbot -author:"farhad manjoo"
</td>
</tr>
<tr>
<td><span style="color:#888">john</span> OR <span
style="color:#888">paul</span></td>
<td>Objects containing either "john" or "paul" in
Diffbot-extracted fields. <code>OR</code> must be
capitalized.<br><br><strong>Other examples:</strong>
title:ukraine OR title:putin, "bill clinton" OR
"george
bush", title:"puppy chow" OR text:"dog food"
</td>
</tr>
<tr>
<td><span style="color:#888">george</span> AND <span
style="color:#888">ringo</span></td>
<td>Objects containing both "george" and "ringo" in
Diffbot-extracted fields. <code>AND</code> must be
capitalized.<br><br><strong>Other examples:</strong>
title:lakers AND text:basketball, "red sox" AND
author:"bill
simmons"
</td>
</tr>
<!--<tr><td><span style="color:#888">"beach boys"</span> AND NOT <span style="color:#888">beatles</span></td><td>Objects containing "beach boys" but not containing "beatles" in any Diffbot-extracted fields. <code>AND NOT</code> must be capitalized.<br><br><strong>Other examples:</strong> title:pantene AND NOT title:conditioner, text:diffbot AND NOT author:"farhad manjoo"</td></tr>-->
<tr>
<td>(<span style="color:#888">obama</span> OR <span
style="color:#888">clinton</span>) AND <span
style="color:#888">president</span></td>
<td>Objects either "obama" or "clinton," and also
"president."
Parentheses can be used to nest Boolean
queries.<br><br><strong>Other examples:</strong>
(title:diffbot AND title:robots) OR title:startup
</td>
</tr>
<tr>
<td><span>site:<span
style="color:#888">diffbot.com</span></span>
</td>
<td><span>All objects extracted from diffbot.com. The site operator queries against values in the <code>pageUrl</code> and <code>resolvedPageUrl</code> fields.</span>
</td>
</tr>
<tr>
<td><span>sortby:<span
style="color:#888">timestamp</span></span></td>
<td>Objects sorted (descending) by the specified Diffbot
field.
Must be a numeric (e.g. "offerPrice") or date field.
For
date formatting, see Date Queries below.
</td>
</tr>
<tr>
<td><span>revsortby:<span
style="color:#888">date</span></span>
</td>
<td>Objects sorted (ascending) by the specified Diffbot
field.
Must be a numeric or date field. For date
formatting,
see Date Queries below.
</td>
</tr>
<tr>
<td><span>min:<span
style="color:#888">timestamp:1426784899</span></span>
</td>
<td>All objects indexed (processed) after March 19, 2015
(in
Unix epoch time). The <code>min</code> or
<code>max</code>
operators work only with numeric or date fields. For
date
formatting options, see Date Queries below.
</td>
</tr>
</tbody>
</table>
<div><h4 id="date">Date Queries</h4>
<p>You can query against Diffbot API <code>date</code>
fields (the extracted article or discussion post date,
for instance), or against the <code>timestamp</code>
field, which represents the time of an object's indexing
into the collection.</p>
<p>The <code>timestamp</code> field can be used to <a
href="http://support.diffbot.com/crawlbot/in-a-recurring-crawl-how-do-i-download-only-the-latest-rounds-content/">return
the latest content</a> from a crawl or bulk job (e.g.
<code>min:timestamp:2015-03-01</code>, for instance only
the objects found in the last crawl round, or since the
last search was run.</p>
<p>When querying dates, your date values should be in one
the following formats:</p>
<ul>
<li><a href="http://en.wikipedia.org/wiki/ISO_8601"
target="_blank">ISO 8601</a>, e.g. <code>2014-05-09</code>
or <code>2014-05-10T17:40:25+00:00</code></li>
<li><a href="http://en.wikipedia.org/wiki/Unix_time"
target="_blank">Unix timestamp</a>, e.g. <code>1399669321</code>
</li>
<li>
<a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec3.html#sec3.3"
target="_blank">RFC 1123 (HTTP/1.1) </a>, e.g.
<code>"Fri, 09 May 2014 23:41:22 GMT"</code></li>
<!--<li>Any human-readable date-string in YMD order, which Diffbot will attempt to normalize, e.g. <code>20140501</code>.</li>-->
</ul>
<p>Be sure to wrap any space-containing date strings in
quotation marks.</p></div>
</div>
</div>
</div>
</div>
</body>
</html>
Note that I only took your results page code, added <base> and then <style>.
(how cool would it be to put jarvis animate me michael jackson eating popcorn in your post?)
2 Likes
Could be I messed up, I don’t know. I just added what you wrote above into my own CSS.
Full CSS: https://gist.github.com/Swader/5022bc18d41502c64630
Screenshot
Not sure what changed, but on div.content, change the flex values to “1 1 100%” . Perhaps I was viewing a cached version…? I dunno. I changed it to 100% and both search page / results also work properly. My local copy with my code worked fine, but hwne I comment out my custom code + your live main.css, and use your gist CSS…it breaks. However, your main.css + my personal code works perfect. So something is different. I don’t really care enough to find out what’s different. Updating the div.content works for me (in that gist CSS.)
Yup, changing to 100% worked fine, thanks! Woohoo!
Now, this is all too cryptic for me to understand and I will take the time to learn flexbox properly eventually, but in the meanwhile, would you consider writing a post about what had to be changed and why for this to start working in IE? I think it’d be a great case study. @louislazaris something you can help with, perhaps?
Are you thinking more along the lines of grabbing your original CSS, and going through step by step (post by post) going through my thought process; the bugs I encountered and how I decided to side-step them? Because you have two bugs that are in full force at the moment, but I am using flexbox in your code, in probably a different mannor than most should.
I’m not going to get into too much detail, but you had it set for the flex children to be mainly columns, and due to other circumstances, you were getting many bugs. So essentially, I set this to be a row flex layout, with wrap, and set the children to 100% width. That FORCES columns, while not actually being columns (and avoiding bugs).
There’s much more to this whole debacle, and I’ll gladly write it up if it’s something you think I should do. I encountered many issues and thought processes while I was debugging this. Do you want a 1st person sorta thing?
I haven’t tackled CSS like that since 2009 (IE6/7 days ).
It would be up to @louislazaris to guide you since it would go on his channel, but strictly from a developer’s perspective, especially one as rusty in CSS as I am, I think it’d be interesting to read a post in which the layout would be something like:
[Intro] - I like fighting CSS problems. In this post, we’ll look at making SitePoint Search work in IE, something that wasn’t originally planned, but isn’t that hard to accomplish… etc
[Bug 1] - The first thing I noticed was this…
[Solution 1] - This was solved by doing x, y and then z. x because… y because… and z does…
[Bug 2] - Then I noticed fix 1 undid some previous fixes, and I tried this approach…
[Solution 2] - Approach x because … and then y because…
Basically, yeah, a first person narrative through the fixing process, so people see how it works, what workflow you take to get there, and of course, explanations of the various values you put in. What does each CSS property do, etc.
I could definitely see myself reading that.
I guess given that I started all this on post 2 up there, I should confirm that it all looks good for me on IE11 now - good job guys.
Dropping it into IE10 compatibility mode looks good too. Looks like a job well done.
That sounds like a decent post.
I’ll wait for Louis to chime in. If he doesn’t want to, then I could write it up anyway. I have a mini series on my website that goes over difficult CSS problems, and my mindset when I tackle them / fix them. At the very least, this could be an addition to that series .
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.