How can I put my navbar component in the centre? This is my first time doing this I got most of it ok but I just can't seem to fix this problem so it doesn't look weird
<template>
<div class="container">
<header>
<h1>GIF'S APP</h1>
<form>
<span class="font-semibold mr-2 text-left flex-auto text-white">Search for the coolest gifs</span>
<div>
<b-nav-form>
<b-input-group>
<b-form-input id="input-small" size="sm" type="text" v-model="search" />
<b-button class="btn-success" type="button" v-on:click="searchNewGifs()">Search</b-button>
<div class="gifs--container">
<Gif v-for="gif in gifs" v-bind:key="gif.id" v-bind:data="gif"></Gif>
</div>
<b-button
class="btn-success"
type="button"
v-if="!stopNextPage"
v-on:click="getNextPage()"
>Next Page</b-button>
</b-input-group>
</b-nav-form>
</div>
</form>
</header>
</div>
</template>
use class mx-auto horizontal centre and class my-auto for vertical centre and if you you want to make horizontal and vertical centre use m-auto and NOTE: very important is that the parent have the style dispaly: flex and the class available for that is d-flex.
Related
Here is my code:
<template>
<div class="main-column d-flex flex-column h-100">
<div class="pl-3 pr-3">
<filter-panel ref="filterComp" :controls="filterControls" :urlParams="$route.query" #filterResults="onSearchClicked" />
</div>
<div class="flex-grow-1 d-flex flex-column px-1 py-2 bg-container">
<div class="position-relative h-100">
<div class="absoluteFill">
<div class="collapse-panel nested-background mb-2 w-100">
<div class="collapse-bar full-length">
<b-button class="buttonRow w-100 py-0 d-flex justify-content-between" size="sm" variant="link" #click="hideGraphs = !hideGraphs" v-b-toggle.count-collapse>
<span class="title">Chart</span>
<icon :class="{'down': hideGraphs}" class="icon rotate mt-1" icon="chevron-up" size="lg" />
</b-button>
</div>
<b-collapse id="count-collapse" visible>
<transition name="fade" mode="out-in">
<div>
<DxChart :data-source="graphData"
palette="Material"
class="p-3">
<DxCommonSeriesSettings type="bar" argument-field="date">
<DxLabel>
<DxFormat :precision="0" type="fixedPoint" />
</DxLabel>
</DxCommonSeriesSettings>
<DxSize :height="350" />
<DxSeries name="Mapping Client"
value-field="mappingClient"
color="#a4de02" />
<DxSeries name="Mapping ISCI"
value-field="mappingIsci"
color="#add8e6" />
<DxSeries name="Mapping Product"
value-field="mappingProduct"
color="#ff0000" />
<DxLegend :visible="true" />
<DxTooltip :enabled="true" />
</DxChart>
</div>
</transition>
</b-collapse>
</div>
<!--Grid card-->
<div class="collapse-panel nested-background mb-2 d-flex flex-column w-100 ">
<div class="collapse-bar full-length">
<b-button class="buttonRow w-100 py-0 d-flex justify-content-between" size="sm" variant="link" #click="hideGrids = !hideGrids" v-b-toggle.counts-collapse>
<span class="title">Grids</span>
<icon :class="{'down': hideGrids}" class="icon rotate mt-1" icon="chevron-up" size="lg" />
</b-button>
</div>
<b-collapse id="counts-collapse" visible>
<transition name="fade" mode="out-in">
<dx-tab-panel ref="tabPanel" :items="tabs">
<div slot="title" class="wordwrap" slot-scope="tab">{{tab.data.title}}</div>
<div slot="item" slot-scope="tab">
<span v-if="isTab(tab, 0)">
<data-summary :graphData="graphData"></data-summary>
</span>
<span v-if="isTab(tab, 1)"><user-data :rawData="rawData"></user-data></span>
</div>
</dx-tab-panel>
</transition>
</b-collapse>
</div>
</div>
</div>
</div>
</div>
I need the last table to have an overflow inside the div and not scroll the page. I also need that div to expand if the chart is minimized. I have been trying to solve this all day I'm out of answers, I feel like this should be a super simple fix but I just can't get it.
Thanks for any help!
I want to hide one section when the other section is true, but I'm not sure if I'm using v-if and v-else in the right way. I tried rearranging the divs with the v-if but no combination I tried works for hiding the div in the way I want.
<template>
<section id="whiteClawVideo" class="videoWrapper d-block w-100">
<div class="video-container fluid">
<iframe width="100%" height="600" src="https://www.youtube.com/embed/JORN2hkXLyM?autoplay=1&loop=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</section>
<form #submit.prevent="SearchMovies()" class="search-box">
<input type="text" placeholder="What are you looking for? " v-model="search" />
<input type="submit" value="Search">
</form>
<div class="movies-list" v-if="search.value !=''" >
<div class="movie" v-for="movie in movies" :key="movie.imdbID">
<router-link :to="'/movie/'+movie.imdbID" class="movie-link">
<img :src="movie.Poster" alt="Movie Poster" />
<div class="type">{{ movie.Type }}</div>
<div class="detail">
<p class="year">{{movie.Year}}</p>
<h3>{{ movie.Title }}</h3>
<p>{{movie.imdbID}}</p>
</div>
</router-link>
</div>
</div>
<div class="container" v-else>
<MovieSection />
<SecondMovieSection />
</div>
Change your v-if to just search !== '' since that's your model
I tried to put the 'search' button below the 'branch' label, here's my snippet
<template>
<base-header class="pb-4 pb-5 pt-6 pt-md-6 bg-gradient-success">
<template>
<div>
<b-form inline>
<label for="status">Status⠀⠀⠀ :</label>
<div class="col-sm-2">
<b-form-input v-model="text"></b-form-input>
</div>
<div class="branch">
<div class="col-8 text-right">
<b-form inline label-align-sm="right">
<label for="branch">⠀⠀⠀⠀⠀⠀⠀⠀Branch:</label>
<div class="col-sm-2">
<b-form-input v-model="text"></b-form-input>
</div>
<div>
<b-button variant="outline-primary">Search</b-button>
</div>
</b-form>
</div>
</div>
</b-form>
</div>
<div>
<b-form inline>
<label for="storecode">Store Code:</label>
<div class="col-sm-2">
<b-form-input v-model="text"></b-form-input>
</div>
</b-form>
</div>
And here's the result after all current view
Thanks in advance☺
The reason this is happening if because you're placing it inside <b-form> with the inline prop.
If you place it outside the form it should be placed below.
If you want the button to submit the form, you can target it using the form attribute which targets the id of your <b-form>.
<b-form inline id="my-form" label-align-sm="right">
<label for="branch">⠀⠀⠀⠀⠀⠀⠀⠀Branch:</label>
<div class="col-sm-2">
<b-form-input></b-form-input>
</div>
</b-form>
<b-button type="submit" form="my-form" variant="outline-primary">Search</b-button>
An alternativ is to use the Bootstrap grid system, and apply the class col-12 to the div wrapping your <b-button>.
<b-form inline id="my-form" label-align-sm="right">
<label for="branch">⠀⠀⠀⠀⠀⠀⠀⠀Branch:</label>
<div class="col-sm-2">
<b-form-input></b-form-input>
</div>
<div class="col-12">
<b-button variant="outline-primary">Search</b-button>
</div>
</b-form>
I have a Buefy template which looks a little like this but I cannot work out how to centre the input box text so everything looks pretty.
I've tried adding 'has-text-centered' to basically everything and it still doesn't centre it!
<template>
<section class="hero is-info is-fullheight">
<div class="hero-body">
<div class="container">
<div class="columns is-centered">
<div class="column is-5-tablet is-4-desktop is-3-widescreen">
<div class="box">
<div class="login">
<b-field label="">
<b-input type="email"
placeholder="john#doe.com"
v-model="email">
</b-input>
</b-field>
<b-field label=""
:message="error_message">
<b-input type="password"
placeholder="****************"
v-model="password">
</b-input>
</b-field>
<div class="buttons">
<b-button #click="login" :loading="loading" type="is-info" expanded>Log In</b-button>
</div>
<p>Create an account <router-link to="/sign-up">here</router-link>!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
What am I missing here?
You could add a custom class to your input:
<b-input type="email"
placeholder="john#doe.com"
v-model="email"
class="input-text-center"
>
</b-input>
And then write a CSS for that:
.input-text-center input {
text-align: center;
}
Please note since you are writing a CSS for a Buefy module you can't do it with scoped CSS as you would normally do in a Vue single file component. Instead you should add this CSS at a more global level.
I have a card with form/ I want to place in the center of the page.
Here my layout 'empty':
<template>
<nuxt />
</template>
<script>
export default {
name: 'Empty'
}
</script>
<style></style>
I have next page with form:
<template>
<b-card>
<b-form #submit.stop.prevent="onSubmit">
...
</b-form>
</b-card>
</template>
I get next result:
<body data-gr-c-s-loaded="true">
<div id="__nuxt">
<!---->
<!---->
<div id="__layout">
<div class="card">
<!---->
<!---->
<div class="card-body">
<!---->
<!---->
<form class="">
...
</form>
</div>
<!---->
<!---->
</div>
</div>
</div>
...
</body>
On the screen, it looks like:
But I want to it looks like:
I can't find how to do it. Can you help me?
You can use a combination of bootstrap v4.3 flex utility classes and position utility classes with a sprinkling of custom styling:
<div
class="fixed-top d-flex align-items-center justify-content-center"
style="bottom: 0; overflow-y: auto"
>
<b-card style="max-width: 400px;">
<form>
<b-form-input class="mb-2"></b-form-input>
<b-form-input class="mb-2"></b-form-input>
<b-form-input class="mb-2"></b-form-input>
<b-form-input class="mb-2"></b-form-input>
</form>
</b-card>
</div>
You may need to tweak the above styles a bit.