I am just getting into Material Components for the Web and I want to have a website sort of like this, although I tried the code from the docs (that is obviously not complete) and got this. How can I get something like the example?
MDC-Web provides a drawer component but not an app’s layout where this drawer can iterate with the content, so you should compose the required layout yourself. And, apart from that, you will need the sort of CSS reset to style some elements consistently across browsers. This is not an incompleteness of library, but its philosophy - to provide only Material Design components rather than “all-in-one” solution for developers. This quote is taken from one of their GitHub issues:
The goal isn't to be a framework and do a lot of little functions for
developers. It's simply to provide the Material Design Specification's
components to the web in a re-usable way. That's it. Anything that is
beyond that goes beyond the scope of what the project is trying to
achieve.
So, in the provided link from MDC-Web, you can see that there are CSS styles applied to elements like html, body and their layout. Namely, this:
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.demo-content {
display: flex;
flex: 1 1 auto;
height: 100%;
box-sizing: border-box;
}
.demo-main {
padding: 16px;
}
You can view the demo on Codepen and ask me if you need a further clarification.
Related
Is there any way to bypass Hcaptcha by using selenium python,
I tried 2captcha(https://2captcha.com/) API, but it doesn't work
bypassing is sadly not an option. What you want to do is to retrieve a solution from sites like 2captcha, while having the solution you need to find the element with the name "h-captcha-response" and edit it so it is visible, after that you need to write the solution of your captcha and submit the form.
driver.execute_script("document.getElementByName('h-recaptcha-response').style = 'width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px;';")
driver.find_element(By.XPATH,'//*[#id="h-recaptcha-response"]').send_keys(recaptcha_solution)
this is a code I had laying around from another site, but it should make the h-captcha-response show up in your case as well, you need to find the XPATH of the element afterwards and write your own response and click the submit button.
If the code doesn't work try to find the h-recaptcha-response in the HTML and see if it is on the name or the ID of the element, this example assumes it has this name but it is also possible that it is on the ID, in that case you should use
driver.execute_script("document.getElementById('h-recaptcha-response').style = 'width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px;';")
While automating Captcha is not the best practice, there are three efficient ways of handling Captcha in Selenium:
By disabling the Captcha in the testing environment
Adding a hook to click the Captcha checkbox
By adding a delay to the Webdriver and manually solve Captcha while
testing
What CSS3 Media Queries can we use to target Chromecast in the graphics view?
It doesn't seem to respond at all to something like:
#media tv and (device-width: 1280px){...}
The only query I have been able to get to work was:
#media(min-width: 1265px){...}
Which seems bonkers to me because the overscan is 32px anyway.
What are the best queries to use?
So far the best layout I have found is:
#media(min-width: 1265px) {
body {
position: absolute;
top: 18px;
right: 32px;
bottom: 18px;
left: 32px;
margin: 5px;
}
}
Which allows for the 18px * 32px overscan and an apparent additional 5px margin
Neil, I am not aware of a clean way to do this through Media Query at this point but you can potentially use the user agent fingerprint to discover that you are on the chromecast device; for example if strings "CrKey" and "TV" are in the user agent, then you are running on the chromecast.
I am just starting with AngularJS, which I know is meant to be an SPA. For the app we are building, all of the pages--except the index page--will have a two-column layout. We'd like the index page, however, to be a one-column, fullwidth page. Is this functionality possible with AngularJS?
I'd suggest posting a plunkr or jsfiddle, since I'm not sure I'm actually answering your question, or if there's more to your question I'm missing.
If you're doing all the pages via routing (ng-view), then just apply classes to differentiate the style for that one-column version. Something like:
.column_1, .column_2 { margin: 0; width: 50%; float: left; }
#firstpage .column_1, #firstpage .column_2 { margin: 0; width: 100%; float: none; }
and then in the html (on that firstpage only), wrap everything in div id="firstpage". Don't include that div in the routed pages, and the style will only apply for the first page. Or if you have some other set up, you can always use styles around the ng-view, too:
<div class="classname">
<div ng-view></div>
</div>
If you've got a side-column that's sitting outside your ng-view and that's what you want to turn off/on, then I'd suggest including the class on the first page (to make it go full-width), and at the same time use some kind of logic with ng-hide/ng-show on that first column.
I thought Safari had sorted this but it still seems to be an issue (unless I'm doing something obviously wrong).
I have a SVG placed inside an object tag. That is wrapped in a flexible containing DIV (e.g set to be width 50%). On resize, the container height resizes in Firefox, Chrome and Opera as I would expect but on Safari the container stays too high.
Here's an example on Codepen to demonstrate, switch to the full size result or 'editor on side' (button bottom right) to see the effect clearly in Safari: http://codepen.io/benfrain/full/fhyrD
Besides using JS to resize the SVG on load/resize, does anyone know if there is anything else I can do to make Safari behave correctly? Could of sworn I'd figured this out a few weeks back but now I seem to be hitting the issue again.
So, Sérgio Lopez had an answer for this. You can employ the intrinsic ratio for video technique that Thierry Koblentz described here: http://alistapart.com/article/creating-intrinsic-ratios-for-video. More info at this blog post: http://benfra.in/20l
Here is the cut and paste code you need in your CSS:
Surrounding object tag
object {
width: 100%;
display: block;
height: auto;
position: relative;
padding-top: 100%;
}
And this for the SVG inside:
svg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
I have a simple line of text I'm replacing with sIFR for a header on my site. The site is liquid so it scales when the browser window changes width. But when I shrink the browser window down, the alt text (when I turn it on for testing) wraps to another line, but the sIFR text doesn't.
I've seen written elsewhere on the web that people implement in the sifr.js code a preventWrap=false function, but being new to JavaScript I'm not sure where to put it to make it work.
Here's the relevant CSS:
.sIFR-hasFlash h2 {
visibility: hidden;
letter-spacing: 1px;
font-size: 18px;
text-align: center;
line-height: 1.5em;
}
And the relevant JavaScript:
sIFR.replaceElement(named({sSelector: "h2",
sFlashSrc: "flash/h2_font.swf", sBgColor: "#006633",
sColor: "#FFFFFF", sFlashVars: "textalign=center", sWmode: "transparent"}));
Not sure where I would put the preventWrap=false, or if that's even the way to go.
sIFR 3 should fix this.
I had a similar problem, adding position:relative to your CSS might fix it.