I have a few items inside a div that I can't seem to get to center horizontally using Tailwind - I think it's due to how I'm using flex?
<Row>
<div class={"flex items-center gap-6"}>
<div class="text-right">
<h1 class="text-4xl font-serif">
<em>Create</em> your account
</h1>
<p>We'll have you set up in a few short steps</p>
</div>
<div class="text-left">
<Form
data={{
name: {
label: "First Name",
type: "text",
required: true,
errorMessage: "Please enter your first name",
},
email: {
label: "Email",
type: "email",
required: true,
},
}}
/>
</div>
</div>
<div className="mt-4 text-center">
Already registered?{" "}
<Link
url="/signin"
className="text-pink-500 hover:text-pink-500 visited:text-pink-500"
text="Sign In"
/>
</div>
</Row>
Here's how it looks - the space on the right shouldn't be there
Related
I'm trying to create a slider with react. I've an array of slides. I'm using useState to store the active slide and then updating it every 3 seconds with useEffect.
const [activeSlide, setActiveSlide] = useState(slides[2]);
useEffect(() => {
setTimeout(() => {
setActiveSlide((prevState) => slides[prevState.next]);
}, 5000);
}, [activeSlide]);
using active slide in jsx like so:
<h4 className='font-medium text-gray-600 dark:text-gray-200'>{activeSlide.desc}</h4>
I'm not sure how can I add a fade effect when slide is updating. any suggestions ?
If you are improving your CSS skills, please don't regard my suggestion. Otherwise, you can use Crousel from react-slick.
There is an example, code took from material-kit-react:
Import the react-slick:
import Carousel from "react-slick";
Define settings with autoplay:true and fade:true:
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
fade: true
};
The return function in material-kit-react:
return (
<div className={classes.section}>
<div className={classes.container}>
<GridContainer>
<GridItem xs={12} sm={12} md={8} className={classes.marginAuto}>
<Card carousel>
<Carousel {...settings}>
<div>
<img src={image1} alt="First slide" className="slick-image" />
<div className="slick-caption">
<h4>
<LocationOn className="slick-icons" />
Yellowstone National Park, United States
</h4>
</div>
</div>
<div>
<img
src={image2}
alt="Second slide"
className="slick-image"
/>
<div className="slick-caption">
<h4>
<LocationOn className="slick-icons" />
Somewhere Beyond, United States
</h4>
</div>
</div>
<div>
<img src={image3} alt="Third slide" className="slick-image" />
<div className="slick-caption">
<h4>
<LocationOn className="slick-icons" />
Yellowstone National Park, United States
</h4>
</div>
</div>
</Carousel>
</Card>
</GridItem>
</GridContainer>
</div>
</div>
);
Just change it and ready to go. I wish that help you and save your time.
SwiperNoSwiping.mov
https://swiperjs.com/
I am having some trouble using Swiper. When I load in raw data to Swipe, the component swipes. However, if I were to pull data from an API, the component does not swipe until there is a change in the view: such as if I were to change the size of the window or click Inspect element. I cannot figure out has to do with the event loop and the view or if it is something to do with CSS.
I have provided a link to the video in order for you to see what I am saying.
My code:
event.component.html
<swiper fxFlex="auto" [config]="config">
<div *ngFor="let event of totalEvents" class="swiper-slide cursor-pointer">
<div fxLayout="column" fxLayoutAlign="center center" fxFlexFill class="mx-2">
<!-- Your content goes here -->
<mat-card class="example-card">
<mat-card-header>
<img src="{{event.image}}" style="max-width:30%;max-height:35%;">
<mat-card-title>{{event.eventName}}</mat-card-title>
<mat-card-subtitle>{{event.startDate}}</mat-card-subtitle>
<mat-card-subtitle>{{event.venue}} <br>
{{event.location}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>{{event.promoter}}</p>
<p>{{event.info}}</p>
<hr>
<p>$ {{event.price}}</p>
<button *ngIf="event.url"mat-raised-button color="basic">
Buy Ticket
</button>
</mat-card-content>
</mat-card>
</div>
</div>
</swiper>
<swiper fxFlex="auto" [config]="config">
<div *ngFor="let step of something" class="swiper-slide cursor-pointer">
<div fxLayout="column" fxLayoutAlign="center center" fxFlexFill class="mx-2">
<!-- Your content goes here -->
<mat-card class="example-card">
<mat-card-header>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-title>{{step.name}}</mat-card-title>
</mat-card-header>
<mat-card-content>
<p>
The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
bred for hunting.
</p>
</mat-card-content>
</mat-card>
</div>
</div>
</swiper>
event.component.ts
totalEvents: any = [];
something = [{
name: 'Test1'
},
{
name: 'Test2'
}
];
/* cardSwipe */
index;
config: SwiperConfigInterface = {
effect: 'slide',
a11y: true,
direction: 'horizontal',
slidesPerView: 3,
slideToClickedSlide: true,
mousewheel: true,
scrollbar: true,
watchSlidesProgress: true,
navigation: true,
keyboard: true,
pagination: false,
centeredSlides: true,
loop: true,
roundLengths: true,
slidesOffsetBefore: 100,
slidesOffsetAfter: 100,
spaceBetween: 50,
breakpoints: {
// when window width is >= 320px
320: {
slidesPerView: 1
}
}
};
ngOnInit() {
this.fetchEvents();
}
I am using Angular 7
I have used image thumbnail class of bootstrap it is aligning vertically, I want to align horizontally.
.thumbnail
{
text-align: center;
float: left;
}
.row
{
text-align: center;
}
Following is my code:
<div class= "row">
<div class = "col-xs-12">
<button class="btn btn-success">New Recipe</button>
</div>
<hr>
<div class = "col-md-12" >
<a href="#" class="thumbnail" *ngFor="let recipe of recipes">
<img src = "{{ recipe.imagePath }}" alt="{{ recipe.name }}" class =
"img-responsive" class="img-thumbnail">
<h4 class = "caption">{{ recipe.name }}</h4>
<p class = "caption">{{ recipe.description }}</p>
</a>
<app-recepie-item></app-recepie-item>
</div>
</div>
Have created 2 objects
recipes: Recipe [] = [ new Recipe('My Sample Recipe', 'This is my first
recipe', 'image url'),
new Recipe('Potato Recipe', 'This an actual Potato
Recipe', 'http://coastguard.dodlive.mil/files/2014/04/unnamed-2-
560x281.jpg')];
Output seems like this.
Thumbnails are displaying vertically.
I want to display horizontally.
I think you no need to write more css if you using grid property of bootstrap for alignment.
HTML:
<div class="container">
<div class="row">
<div class = "col-xs-12">
<button class="btn btn-success">New Recipe</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4 col-xs-4" *ngFor="let recipe of recipes">
<a href="#">
<img src={{recipe.url}} height="100" width="100">
<h4 class = "caption">{{ recipe.name }}</h4>
<p class = "caption">{{ recipe.desc }}</p>
</a>
</div>
</div>
</div>
TS:
recipes: any[] = [
{name:'product_name', desc: 'Description', url: 'http://www.movingimage.us/images/homepage/features/jhe_jim_kermit.jpg'},
{name:'product_name', desc: 'Description', url: 'http://www.movingimage.us/images/homepage/features/jhe_jim_kermit.jpg'},
{name:'product_name', desc: 'Description', url: 'http://wallpaper-gallery.net/images/image/image-8.jpg'}
];
I am using angularjs and bootstrap3. I have array of array of objects and I need to display it in the UI like below,
sample = [
{
"id": 12,
"title": "title2",
"description": "description2_for the second"
},
{
"id": 13,
"title": "title3",
"description": "description3"
},
{
"id": 17,
"title": "title4",
"description": "description4"
},
{
"id": 18,
"title": "title5",
"description": "description5"
},
{
"id": 19,
"title": "title6",
"description": "description6"
},
{
"id": 20,
"title": "title7",
"description": "description7"
},
{
"id": 21,
"title": "title8",
"description": "description8"
},
{
"id": 22,
"title": "title9",
"description": "description9"
}
]
my code ng-repeat look like,
<div class="editor-preview">
<div class="row" >
<div class="col-md-4 " ng-repeat-start="i in sample track by $index">
<div class="tooltip"><button type="button" class="btn btn-primary btn-round-lg btn-lg">{{i.title}}</button>
<span class="tooltiptext">{{i.description}}</span>
</div>
</div>
<div class="clearfix" ng-if="($index+1)%3==0"></div>
<div ng-repeat-end=""></div>
</div>
</div>
From the above code, UI is looking like below image.
But, I want to show the UI like the below image and 3 buttons per row
How to show the UI like above image in bootstrap css dynamically for alternative rows too
You can use list-inline for this layout:
http://jsfiddle.net/hstppbj8/804/
HTML:
<div ng-controller="sample">
<div class="editor-preview-testimonials">
<div class="row">
<div class="col-xs-10">
<ul class="list-inline text-center">
<li ng-repeat="i in sample track by $index"><button class="btn btn-sm btn-primary">
{{i.title}}<span class="tooltiptext"> {{i.description}}</span>
</button></li>
</ul>
</div>
<div class="clearfix" ng-if="($index+1)%3==0"></div>
<div ng-repeat-end=""></div>
</div>
</div>
</div>
CSS:
ul li {
margin: 4px 0; /*For spacing between li*/
}
Resize the jsfiddle window to see the layout properly.
try to have the text for the content to be different ( some are longer, some are much longer ) for each of the button. It should be prolonged as the class ".btn" css has {display: inline-block} in them. Then make sure there is a wrapper around these buttons and make them { text-align: center }
In angular 1 ng-repeat has been used. But in ng-5 this syntax has been changed with ng-for. I would suggest you to please use the ng-for to use the angular loop. in that case Your code will be like the following.
<div ng-controller="sample">
<div class="editor-preview-testimonials">
<div class="row">
<div class="col-xs-10">
<ul class="list-inline text-center">
<li *ngFor="let item of items; let i = index""><button class="btn btn-sm btn-primary">
<span class="tooltiptext"> {{i}} {{description}}</span>
</button></li>
</ul>
</div>
<div class="clearfix" ng-if="($index+1)%3==0"></div>
</div>
</div>
</div>
I am using ui-grid in angular which has 5 columns. on hover of grid options columns are getting expanded towards right side.
Here is my file.
HTML File
<div class="full-panle-body">
<div class="row user-view-grid" ng-show="gridOptions.data.length > 0 && userLoaded">
<div ui-grid="gridOptions" ui-grid-auto-resize ui-grid-cellNav ui-grid-edit ui-grid-resize-columns ui-grid-pinning ng-style="getTableHeight()"></div>
</div>
<div class="row loading-spinner" ng-hide="userLoaded">
<div class="col-xs-3"></div>
<div class="loading col-xs-6">
<span rel='spinner' class='data-spinner'></span>
<div class="loading-text">{{::'label.loading.user.list' | translate}}</div>
</div>
<div class="col-xs-3"></div>
</div>
<div class="no-records" ng-show="!numberRecordsFound && userLoaded">
{{:: 'text.search.no.records' | translate }}
</div>
</div>
<!-- html template for status -->
<script type="text/ng-template" id="statusCell-template.html">
<div ng-click="grid.appScope.onUserDetails(row.entity)" class="inner-data-cell-center">
<div style="text-align:center;">
<i class="fa fa-envelope-o" aria-hidden="true" style="color:grey;" ng-show="'added' == row.entity.registrationStatus.toLowerCase()"></i>
<i class="fa fa-envelope-o" aria-hidden="true" style="color:blue;" ng-show="'notified' == row.entity.registrationStatus.toLowerCase()"></i>
<i class="fa fa-check" aria-hidden="true" style="color:green;" ng-show="'complete' == row.entity.registrationStatus.toLowerCase()"></i>
</div>
<div style="text-align:center;" class="smaller-grey">{{row.entity.registrationStatus}}</div>
</div>
</script>
<script type="text/ng-template" id="name-template.html">
<div class="ui-grid-cell-contents" ng-click="grid.appScope.onUserDetails(row.entity)">
<div class="name-style">{{row.entity.lastName}}, {{row.entity.firstName}}</div>
<div class="email-style">{{row.entity.email}}</div>
</div>
</script>
<!-- html template for organization -->
<script type="text/ng-template" id="organization-template.html">
<div class="single-elm-style" ng-click="grid.appScope.onUserDetails(row.entity)">
<span class="dummy">{{row.entity.organization}}</span>
</div>
</script>
<!-- html template for username -->
<script type="text/ng-template" id="username-template.html">
<div class="single-elm-style" ng-click="grid.appScope.onUserDetails(row.entity)">
<span>{{row.entity.userName}}</span>
</div>
</script>
<!-- html template for Account Status -->
<script type="text/ng-template" id="accountstatus-template.html">
<div class="single-elm-style" ng-click="grid.appScope.onUserDetails(row.entity)">
<span ng-show="row.entity.isActive">Enabled</span>
<span ng-show="!row.entity.isActive">Disabled</span>
</div>
</script>
CSS File
.ui-grid-row:hover{
border-left: solid 6px #hoverBlue;
}
JS File
$scope.gridOptions = {
rowHeight: 60,
multiSelect: false,
enableColumnMenus: false,
enableEdit: false,
enableSoring: true,
columnDefs: [
{
name: 'registrationStatus',
width: "15%",
displayName: 'Status',
headerCellClass: 'grid-header-center',
cellClass: 'grid-data-cell',
cellTemplate: 'statusCell-template.html'
},
{
name: 'lastName',
width: "30%",
displayName: 'Name',
headerCellClass: 'grid-header-left',
cellTemplate: 'name-template.html'
},
{
name: 'organization',
width: "15%",
displayName: 'Organization',
headerCellClass: 'grid-header-left',
cellTemplate: 'organization-template.html'
},
{
name: 'userName',
width: "20%",
displayName: 'Username',
headerCellClass: 'grid-header-left',
cellTemplate: 'username-template.html'
},
{
name: 'isActive',
width: "20%",
displayName: 'Account Status',
headerCellClass: 'grid-header-left',
cellTemplate: 'accountstatus-template.html'
}
]
};
Hi.I am using ui-grid in angular which has 5 columns. on hover of grid options columns are getting expanded towards right side.