Responsive Segment Layout with React Semantic UI - responsive-design

I have a challenge adding CSS gutters to Semantic-UI grids.
I have one Grid column with a segment that's being rendered repeatedly.
Here's my code.
import React from 'react';
import ReactDOM from 'react-dom';
import { Segment, Grid, Image as ImageComponent, Item, Button } from 'semantic-ui-react'
export default class TeachersListSegment extends React.Component {
render() {
return (
<div>
<Grid.Column mobile={16} tablet={8} computer={8} largeScreen={8} widescreen={8}>
<Segment stacked padded color='blue'>
<Grid>
<Grid.Row>
<Grid.Column width={11}>
<Item.Group link>
<Item>
<Item.Image size='tiny' src='https://semantic-ui.com/images/avatar/large/steve.jpg' />
<Item.Content>
<Item.Header><a>{this.props.header}</a></Item.Header>
<Item.Description>{this.props.description}</Item.Description>
<Item.Description>Another Description</Item.Description>
</Item.Content>
</Item>
</Item.Group>
</Grid.Column>
<Grid.Column width={5}>
<Button positive className="mb-3 teachers-list-button">Book Lesson</Button>
<Button basic color="green" className="teachers-list-button">Send Message</Button>
</Grid.Column>
</Grid.Row>
</Grid>
</Segment>
</Grid.Column>
</div>
);
}
}
And here's the code that renders the segment
<div className="page-content">
<Grid stackable centered columns={2}>
<Grid.Row>
<TeachersListSegment header="Stevie Feliciano" description="Some Description" />
<TeachersListSegment header="Stevie Feliciano" description="Some Description" />
<TeachersListSegment header="Stevie Feliciano" description="Some Description" />
<TeachersListSegment header="Stevie Feliciano" description="Some Description" />
<TeachersListSegment header="Stevie Feliciano" description="Some Description" />
</Grid.Row>
</Grid>
</div>
The display currently looks like this. What's an efficient way to add column gaps and row gaps to the display? I applied the gutter styles as in the link above but did not work. This question also helped me apply the right code to make it mobile responsive.
Any suggestions for a solution to apply the column and row gaps? Thanks for your help.

You may add class column to all the <TeachersListSegment> and wrap it all in <div class="ui two column stackable grid"> </div>.
Please let me know if this helps.

Related

How can I make a master page for all of my pages like default page in Zebble for Xamarin?

I created a new blank page as I read on Zebble documentation website like below code, but I need to use this for all of my pages and I do not want to repeat that design on all of my pages. And when I try to build my project an error occurs like below:
<z-Component z-type="Page1" z-base="Page" z-namespace="UI.Pages"
z-partial="true" Title="Page 1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="./../.zebble-schema.xml">
<Stack Id="Header" Direction="Horizontal">
<Button Text="MyToogleMenuBtn" />
<TextView Text="MyPageTitle" />
<Button Text="AddBtn" />
</Stack>
<Stack Id="Body">
</Stack>
<Stack Id="Footer">
<Button Id="ConfirmBtn" />
</Stack>
/z-Component>
And the error is:
error screen shot
But I do not know where should I add the title property.
For using this page as template for your other pages you just need to specify it as the z-base:
<z-Component z-type="MyChildPage" z-base="MyTemplate" ...
As for the error you should remove the Title="Page 1" because there is no Title property in your current page

how to align items horizontally with Material 2?

I want to have an input, and on the other side of the same row, have some actions related to that intput, and I want input to extend to fill the gap. In general, it's not just limited to inputs and actions. I don't know how to align items horizontally in Material 2. Of course I can override stuff with floating and CSS, but I don't think that's the proper way to use a presentational/behavioral framework like Material 2.
Here's the link to the plunker.
#Component({
selector: 'my-app',
template: `
<md-input-container style="flex: 1 1 auto;">
<input mdInput type="text" placeholder="value" />
</md-input-container>
<span style="flex: 1 1 auto;"></span>
<button md-icon-button mdTooltip="action related to control" style="float: right;">
<md-icon>check</md-icon>
</button>
`,
})
https://plnkr.co/edit/ItWIVtA4rroxP7C5xijl?p=preview

want to display information with link to marker on map using gmaps4jsf

I am using gmaps4jsf jar file and getting dynamic marker on google map. marker having some information and once i click on marker then get the popup and i wrote there "Click me!" i want to provide link on marker data
jsf code:
<m:map id="map" width="650px" height="450px" latitude="#{map.latitude}" longitude="#{map.longitude}" enableScrollWheelZoom="true" zoom="9">
<m:marker latitude="#{point2.latitude}" longitude="#{point2.longitude}" >
<m:htmlInformationWindow htmlText="Click me!" />
</m:marker>
</m:map>
<p:column>
<p:commandButton value="Display" action="#{map.display}" update="form"/>
</p:column>
you want to write somthing like this,
<m:htmlInformationWindow htmlText="Click <a href='info.xhtml' target='_blank'>me!</a>" />
target='_blank' means you link will be open in new tab if you want to open same tab then you can remove the target.
but in jsf you can't acheive symbol without & operater so you need to like this where < means "<" and &gt means ">"
<m:htmlInformationWindow htmlText="Click <a href='info.xhtml' target='_blank'>me!</a>" />

RadEditor ExportToDocx Changing Font Size

I'm using the Telerik RadEditor to do a docx export of the contents, but the DefaultFontSizeInPoints does not appear to be overriding the size of the font on export like I would expect based on their documentation. Regardless of what I use as a value, it always comes out the same size.
<telerik:RadEditor runat="server" ID="txtLogText" Width="100%" Height="100%" ContentAreaMode="iFrame" Enabled="true"
ExternalDialogsPath="~/UserControls/" StripFormattingOptions="NoneSupressCleanMessage"
ContentFilters="DefaultFilters, PdfExportFilter" EditModes="Design" OnClientLoad="OnClientLoad" Skin="Default">
<CssFiles>
<telerik:EditorCssFile Value="" />
</CssFiles>
<ExportSettings>
<Docx DefaultFontName="Arial" DefaultFontSizeInPoints="8" HeaderFontSizeInPoints="8" PageHeader="System Log, Confidential" />
</ExportSettings>
<Tools>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="Copy" />
<telerik:EditorTool Name="SelectAll" />
<telerik:EditorTool Name="FindAndReplace" />
<telerik:EditorSeparator />
<telerik:EditorTool Name="Print" />
</telerik:EditorToolGroup>
</Tools>
Thank you for any help or suggestions on correcting this problem.

map is not refreshing using gmaps4jsf

I am using gmaps4jsf jar file for getting dynamic marker on google map but once i click on submit button then getting whole data on web page, evem map also with dynamic marker but map marker is coming after refresh the page.
jsf code:
<m:map id="map" width="650px" height="450px" latitude="#{map.latitude}" longitude="#{map.longitude}" enableScrollWheelZoom="true" zoom="9">
<m:marker latitude="#{point.latitude}" longitude="#{point.longitude}" >
<m:htmlInformationWindow htmlText="Click me!" />
</m:marker>
</m:map>
<p:column>
<p:commandButton value="Display" action="#{map.display}" update="form"/>
</p:column>
jsf component is refreshing fine only problem with google map..
You should use partiallyTriggered="true" for refresh the google map. as you said you are using gmaps4jsf jar so it will help and i'm updating your code so you can find here
<m:map id="map" partiallyTriggered="true" width="650px" height="450px" latitude="#{map.latitude}" longitude="#{map.longitude}" enableScrollWheelZoom="true" zoom="9">
<m:marker latitude="#{point.latitude}" longitude="#{point.longitude}" >
<m:htmlInformationWindow htmlText="Click me!" />
</m:marker>
</m:map>

Resources