We Keep Coding

Is it possible to align react Fragement?

I am having a react fragment which shows loader on user clicking button.The loader is shown until response comes.Everything works fine ,except that the fragment which has loader, should be aligned to a little right.As of now my fragment code to show loader(Using Wait from spectrum).
<Fragment >
<Wait size="M" />
Please wait....
</Fragment>
How can I move fragment to right by some distance? I cannot use div as it disturbs the layout.I can though align Wait to center by using align property but it does not support any text on that.

Fragments are not rendered in the final HTML so they cannot be selected by CSS. Therefore, you should use something which can be aligned, e.g. a div or other HTML element, and use CSS to create your desired layout.
If using a div disturbs your layout, I'd recommend revising the CSS of the containing object, if at all possible.

Semantic UI React - Adding Reveal Effect to Images in Cards

The title says it all.
Is it possible to add the Semantic UI Reveal effect to Images in Cards?
This would be a very nice feature when designing ecommerce websites with Semantic UI + React, for example for having two images for each product, when hovering.
Moreover, when using Semantic UI without React, it is totally possible.

It seems like the React component has a bug where its not specifying the width of the "visible" element in the Reveal. The "hidden" element does have a width of "100%" specified.
See that offset?
So, when we add that in, the positioning of the "visible" component correctly overlays the "hidden" as demo'd in this codesandbox:
https://codesandbox.io/s/v8mylv1p3
Alternatively, if you had the images formatted to take up full-width to begin with, then it probably works fine.

I answer myself because I have found a (not very smart, I admit it) workaround for this problem. Currently, it is working with the following versions of Semantic UI + Semantic UI React.
Last update in March 2018:
"semantic-ui": "^2.3.1",
"semantic-ui-react": "^0.79.0"
In my component, I simply get rid of the direct <Image> or <Reveal> components and use a plain <div> JSX component (containing two Images to emulate the Reveal behaviour):
...
<Card>
<div className={'ui slide masked reveal image'}>
<Image src='/img/products/1.jpg' className={'visible content'} />
<Image src='/img/products/2.jpg' className={'hidden content'} />
</div>
<Card.Content>
<Card.Header textAlign={'center'}>
Product name
</Card.Header>
...
This results in a minimum impact with the desired funcionality :)

Polymer - Creating an equally spaced, dynamic horizontal layout

I am using the core-scaffold component to make a list of objects a shown below. My goal is to put 2 items on each row which share the space 50% -50% . However Horizontal layout fails to allocate space with this ratio. How can I achieve equal spacing.
Secondly, when the screen size gets small, I want the horizontal layout to change into a vertical layout so that, as again shown in the picture, items are not compressed. What is a good way to achieve dynamic layout ?

Use the core-media-query element to capture responsive changes:
<core-media-query query="max-width: 600px" queryMatches="{{phoneScreen}}">
</core-media-query>
Use the flex attribute on your columns to get the 50-50 width. Also use the {{phoneScreen}} (set by the core-media-query) to determine if we should use the horizontal layout or not
<div class="row" horizontal?="{{!phoneScreen}}" layout>
<div class="panel" flex>50%</div>
<div class="panel" flex>50%</div>
</div>
Example: http://plnkr.co/edit/WxUFCWFQVMeBgXSLI32M?p=preview

Polymer offers now the app-layout > app-grid helper class.
1.Import the app-grid-style.html which can be found in the app-layout in the bower_components folder.
2.Include include="app-grid-style" in the style section of your custom element.
3.And add the class app-grid to the container which will hold the layout.
A basic example can be found on this Polymer link.
Polymer app-grid documentation

Responsive columns and the columnizer plugin - How can I stop the text from wrapping/stopping at the certain point?

I'm working on a little project to learn html/CSS and use the Columnizer plugin.
The problem:
The project is a responsive table. If I resize the window the layout changes and adapts to the new window size. I want to prevent the "category titles" from being at the end of a column. For example like this.
Ideally I'd set manual rules. For example make the title stick to the first two rows of the table (and let it only break/split anywhere after that) and make it impossible that the last two lines are alone at the top of a column.
What I've tried:
Columnizer includes two CSS classes called "dontsplit" & "dontend" (both apply javascript) that I'm trying to use. According to the documentation it does that:
Any node that has the CSS class “dontsplit” won’t be split into multiple columns. This is handy to make sure that tables, etc, aren’t chopped in half if they land at the bottom of a column.
&
Any node that has the CSS class “dontend” will never be put at the end of a column.
The problem is that I can't seem to make it work. For example adding the "dontend" to the Category Title will not change anything. And the dontsplit (I use it in a ) always automatically applies "dontsplit" to everything as if the wouldn't have a closing tag.
Didn't work:
<div class="dontsplit">
<h2>Category Title</h2>
<table class="table table-hover" >
<tr><td WIDTH="67%"><a href="http://www.google.com" class="title" >Title Here</a></td><td class="vert-align">Description</td></tr>
<tr><td><a href="http://www.google.com" class="title" >Title Here</a></td><td class="vert-align">Description</td></tr>
<tr><td><a href="http://www.google.com" class="title" >Title Here</a></td><td class="vert-align">Description</td></tr>
</div>
How can I use them correctly? Or is there another simple way to do this?
Thanks
http://jsfiddle.net/vqsd8x16/

var defaults = {
// default width of columns
width:400px,
change in your code to have pixels will fix your problem.

how to changed font size that table to fit div

I have html
<div style="width: 1000px;">
<table >
...
</table>
</div>
Table is very large and not all fields fit into div. How to automatically reduce the text to the entire table is placed in a div?

If I understand your question right, you're trying to fit text into a table and change font size according to the table size. Wich would require working with em or %.
There's a great article on A List Apart. You should check that out.
Also; add a Stylesheet Reset to ensure everything looks the same in different browsers.