I have been evaluating purecss and would like to know whether in its grid system there is an equivalent to Bootstrap's offset class.
The grids doco does not mention such a thing.
Thanks
No, PureCSS doesn't have explicit support for Grid offsets; they seem to believe this is easy enough to tackle within the code of your own application.
See also:
GitHub Issues on PureCSS's repo (#318,#382)
The documentation on adding padding and borders to grid units
Snip2code example by emirpprime of purecss offset add-on
A discussion started by Daniel Genser on app.net
You can, however, fake it:
<div class="pure-g">
<div class="pure-u-1-3"> </div>
<p class="pure-u-1-3">This would be displayed in the middle third.</p>
</div>
This isn't as "pure" (pun intended) as an offset, but it works, so I've used it.
It might not hurt to chime in on one of the issue reports if you'd like offsets in purecss, although so far it sounds like something they've chosen not to include.
Related
I'm doing an angular project using angular material, while im using mat-icons it keeps coming before the interpolation even though i coded it after the interpolation enter image description here
i tried typing anything before of after the icon and the icon comes first no matter what
Sort by {{sort}}
expand_more
I couldn't find it documented anywhere in the official docs for some reason (in neither mat-button or mat-icon parts at least).
Lukcily, it's at least documented in the migration guide here.
What you need to do since v15 is to add iconPositionEnd directive to the mat-icon inside the mat-button, e.g.
<button mat-button>
Icon after text
<mat-icon iconPositionEnd>favorite</mat-icon>
</button>
EDIT: There already is a git issue about this feature not being documented here.
I am writing documentation in Markdown which I will need to convert into a PDF. However, when converting to a PDF using this Visual Studio Code plugin it adds pages and occasionally the pages will break at awkward moments.
Is there a way to view how these pages will break before converting to a PDF?
I don't see anything about previewing breaks in the docs, but you can manually insert page breaks:
Please use the following to insert a page break.
<div class="page"/>
Breaking before headings, for example, might be a good way to partly mitigate this issue.
There is also an alternative. You can use this css style directly as well:
<div style="page-break-before: always;" />
What can be useful, to fit more stuff in one page, is to change the font and figure scale by changing the scale in settings:
"markdown-pdf.scale": 1
I am trying to find out if anyone has an approach to automated UI testing on Material UI components.
Material UI elements are rendered as nested divs with very little unique id information, for example:
<div data-reactroot style="...">
<div style="...">
<div style="...">
</div>
</div>
</div>
The nested div structure makes using traditional location methods difficult if not impossible - (Selenium and Watir), id, name, class, etc.
Using react devtools, one can see a much clearer picture of how the page is structured, but I am not yet able to access the React "DOM" to locate elements.
Any ideas or help would be appreciated.
Added example:
Sliders
I can't come up with an example that is more descriptive than the one above, could literally be 10 layers of nested divs without any text.
There is no general method I'm aware of, unfortunately.
Some of the components already have ids, which allows you to use a css selector like #my-component input (which is usually enough to get an exact field), others have custom class names to be added (like AutoComplete - popoverProps) which allows you to use a similar selector.
Good news is that every MaterialUI component provides className, which can be used to locate elements (at least partially) - details can be found at http://www.material-ui.com/#/customization/styles
Also id field works quite often, even when not documented.
At the last resort (if detection by class + other css selector parts is not sufficient) you can fall back to XPath expression using element text - for example, I use //span[#class="menu-item"][.//div[contains(text(),"${itemName}")]] for matching menu items. It matches things declared as <MenuItem primaryText={itemName} className="menu-item">
See this minimal demo at GitHub: https://github.com/ErikVerheul/PaletteBugDemo.git
I expected that the code line palette.add(new DefaultTheme()); would do the trick. However, it did not.
When changing the Wicket version to 6.20.0 all works fine.
Did I miss something?
help appreciated,
Erik
Short answer: Remove your paragraph <p> and use a <div> instead of the <span> for the palette.
Long answer
The p paragraph cannot contain other block elements. In Wicket 6.x the palette uses a table to layout the "Available" und "Selected" options. In Wicket 7.x divs are used for that, since tables only should be used for tabular data and not for layouting. Neither tables nor divs are allowed in a paragraph though. I guess browsers are just a bit more forgiving when using tables at wrong places, hence you are seeing a somewhat correct result with version 6.x.
Another problem is that you are using a span tag for your palette. Again, the palette is inserting either a table or several div tags, but neither of these are valid in between the span tag.
So something like this should do it:
<form>
<div class="mystyle">
<div wicket:id="palette"></div>
</div>
...
</form>
Problem SOLVED. Thank you Martin! As a Wicket novice I used a version 6 example not knowing the changes in version 7. The working version is now on GitHub.
It does work fine here: http://examples7-apachewicket.rhcloud.com/compref/wicket/bookmarkable/org.apache.wicket.examples.compref.PalettePage
Please check what is different in your app.
<div class="result">
<div class="thumbnail">
<img src="80x80.png">
</div>
<div class="name">
Alex Hong
</div>
</div>
The page will have 400 of these! A list of people and their thumbnails, all different. I will use JQuery LazyLoad, so that not all images are downloaded immediately. (The images are only downloaded when the user scrolls to that portion of the site).
Will the browser be able to handle it? Please give your expert advice. thanks.
By the way, I don't know if LazyLoad will work or not:
Due to webkit bug #6656 Lazy Loading
wont give you any improvements in
Safari. It will load all images you
wanted it or not.
I don't doubt they'll be able to handle it but I would definitely do some sort of pagination 400 images is a lot for what I'm assuming will be a pretty small screen.
It will be very slow (at least on iPhone < 3GS).
In the sproutcore framework, there are long lists with lazy loading performing very well. You can check the UI demo.
But you can also use iScroll, because the default scrolling speed in webkit is very slow, and not adapted to long list like yours.
And finally avoid complex CSS in your list (like gradient etc..), because it is very slow for long list.