I'm trying to center a <v-btn> into a <v-flex>. Since <v-flex> is a flexbox div, I use justify-center that is transformed into
justify-content: center
Since my direction is horizontal, my button should be center aligned but it's not. Here is the codepen that reproduce my problem.
https://codepen.io/anon/pen/ZXLzex
I want to signup the button to be centered inside the div (v-flex).
Here is the full code:
<v-card>
<v-card-text >
<v-text-field label="Email"></v-text-field>
<v-text-field label="Password"></v-text-field>
</v-card-text>
<v-card-actions>
<v-layout row>
<v-flex justify-center>
<v-btn primary>
Signup
</v-btn>
</v-flex>
</v-layout>
</v-card-actions>
</v-card>
wrap button inside <div class="text-xs-center">
<div class="text-xs-center">
<v-btn primary>
Signup
</v-btn>
</div>
Dev uses it in his examples.
For centering buttons in v-card-actions we can add class="justify-center" (note in v2 class is text-center (so without xs):
<v-card-actions class="justify-center">
<v-btn>
Signup
</v-btn>
</v-card-actions>
Codepen
For more examples with regards to centering see here
<v-layout justify-center>
<v-card-actions>
<v-btn primary>
<span>SignUp</span>
</v-btn>
</v-card-actions>
</v-layout>
It works for me using the v-layout in the following way:
<v-layout justify-center>
<div class="text-center ma-5">
<v-card-actions>
<v-btn primary>
<span>LogIn</span>
</v-btn>
</v-card-actions>
</div>
</v-layout>
vuetify's v-layout allows you to modify all the elements inside the layout.
v-flex does not have a display flex!
Inspect v-flex in your browser and you will find out it is just a simple block div.
So, you should override it with display: flex in your HTML or CSS to make it work with justify-content.
Related
Good day. I have the following dialog that whenever i add anything inside it's component an horizontal scrollbar shows up and the right of my dialog suddenly has a space on it's right side. like in reference pic
This right here all the code i have:
My view:
<template>
<v-main>
<v-dialog
v-model="dialog"
>
<v-card background-color="white">
<div>
<myComponent/>
</div>
</v-card>
</v-dialog>
<v-container>
// rest of my code
</v-container>
</main>
</template>
My Component:
<template>
<v-main>
<v-row align='center' justify="center">
<v-col class="d-flex justify-center" cols="5">
hello
</v-col>
</v-row>
</v-main>
</template>
Why does this happen exactly. Every page i has scooped styles and most of them don't even have any css applied to it. When i remove the "hello" together with the v-col tags the dialog goes back to normal like so:
Add style="overflow-x: hidden;" to your div that is wrapped around <myComponent/>
In Bulma, how does one change text color for multiple items at once?
That is, being low-vision, I want to change all text on a navbar to be black rather than the fainter gray.
I'm new to Bulma and so far see I can use "has-text-black" helper but have to add them to every link.
<nav id="navbarMain" class="navbar is-spaced" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item is-size-4 has-text-black" href="/">
<span class="icon is-large is-circle">
<i class="fas fa-cube has-text-primary fa-lg"></i>
</span>
My Site
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item has-text-black" href="/about/">
<span class="icon has-text-link">
<i class="fas fa-info-circle"></i>
</span>
About
</a>
....
I was hoping to add the helper just in one place in the class on one div or container containing the navbar link items but that doesn't seem to work.
I looked in the customization docs and tried setting $text: black; but that didn't work either.
Is there a way to set all the grayish text color in a section or container to black?
And, how does one set/customize the global or site-wide text color from grayish to black (or something else?
(Otherwise, is there detailed directions for all the color variables and how to revise them in the correct order?)
Thanks in advance.
Ralph
The key is to pay attention to documentation. Bulma provides SASS variables for all its components or elements to play around with for making your own customization. The objective is to write the custom CSS AS LESS AS POSSIBLE. Here's the link
https://bulma.io/documentation/components/navbar/#colors
In your project's global SCSS file, you can add these SCSS variables and add the colors of your choice:
$navbar-burger-color: #f1f1f1;
$navbar-background-color: #273643;
$navbar-item-hover-background-color: #3f4f62;
$navbar-item-hover-color: $white;
$navbar-item-color: #f1f1f1;
$navbar-dropdown-arrow: #f1f1f1;
$navbar-tab-active-color: #f1f1f1;
$navbar-tab-active-background-color: #273643;
$navbar-dropdown-background-color: $primary;
If you are confused over the color combination, visit--> https://coolors.co
Cheers!! :)
I have this code in ionic and the problem is that the grid layout isn't showing and the side menu is working well, any help will be great.
<body>
<ion-side-menus>
<ion-side-menu-content>
<ion-header-bar class="bar-positive">
<div class="buttons">
<button class="button icon button-clear ion-round"</button>
</div>
</ion-header-bar>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-list>
<ion-item>About Us</ion-item>
</ion-list>
<ion-list>
<ion-item>Contact Us</ion-item>
</ion-list>
<ion-list>
<ion-item>Gallery</ion-item>
</ion-list>
<ion-list>
<ion-item>News</ion-item>
</ion-list>
</ion-side-menu>
</ion-side-menus>
<ion-content>
<div class="row">
<div class="col-50"> Gallery</div>
</div>
</ion-content>
</body>
Why are you opening a new ion-list to every item? Shouldn't you just use one list and inserting the items you want in it?
This way can cause problems in the scroll, any kind of distribution you want to apply to the elements should be done by css.
I have the following code:
<xp:section id="section1" type="box" header="Left Text Right Text">
Section content
</xp:section>
I'm using the Bootstrap3.2.0_flat theme so it displays the following: http://bit.ly/1kRu9QM
Is there a way to modify the xp:section header to have "Right Text" right aligned so that it displays the following?: http://bit.ly/1kRugMi
Thanks in advance for any tips.
I am not sure how you would do it with xpages sections, but with bootstrap you can use this.
<span class="pull-left">Left Text</span>
<span class="pull-right">Right Text</span>
Maybe you can drop the span in the section or maybe use bootstrap sections instead of xpages ones?
If you are looking to do something with bootstrap sections this is what I use.
Here is some css.
.panel-heading a:after {
font-family:'Glyphicons Halflings';
content:"\e114";
float: right;
color: grey;
}
.panel-heading a.collapsed:after {
content:"\e080";
}
And here is how I handled the div
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseOne"
href="#collapseOne">
Section Header
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
</div>
Not sure if this is going to get you exactly where you want to be.
[edit]
Thinking more about this. I think you can use these sections. I have mine initially closed, and then you click on a section to expand.
I'm trying to align four pictures with their captions in a square grid.
I'm using the following HTML code:
<div class="grid">
<div class="post-block">
<img src="img1.jpg" />
<div class="caption">caption1</div>
</div>
<div class="post-block">
<img src="img2.jpg" />
<div class="caption">caption2</div>
</div>
<div class="post-block">
<img src="img3.jpg" />
<div class="caption">caption3</div>
</div>
<div class="post-block">
<img src="img4.jpg" />
<div class="caption">caption4</div>
</div>
</div>
and the following CSS code:
.post-block {
display: inline-block;
position: relative;
text-align: center;
}
If images and captions are the same size everything is ok, but when they are different I get this (an example):
I've tried to align images and captions of different sizes using CSS with no success. I need something like this:
Any help would be appreciated.
Thanks in advance
You'll need to use separate block elements at the same DOM level for the image and the caption to achieve what you've shown in the "RIGHT" image. Right now your caption DIV is nested inside the image DIV, and that's gonna do what you've shown. The caption DIV needs to be outside the image DIV.
You will probably want two separate div wrappers around each 2 photos..
Then align images vertically to bottom.
Vertical align images to bottom
<div class="myWrapClass">
<img src="my image">
<img src="my image">
</div>
<div class="myWrapClass">
<img src="my image">
<img src="my image">
</div>
then set the styling via inline or your css file
<div style="vertical-align:bottom;">
or
.myWrapClass{
vertical-align:bottom;
}
check out this site... Use the css properties there to keep it responsive
Example