I would like to 1) make sure radio buttons are aligned to left 2) decrease the amount of vertical space between label and radio button texts and vertical space between each text
In the example below you can see radio button texts are centered, and also there is about half text height space between them which I would like to decrease
https://codesandbox.io/s/1l3yc9?file=/index.js
Adding to the previous answer to fully answer your question, the label of the radio button can be left aligned using bootstrap's flex class names:
<b-form-radio
v-model="orderType"
:aria-describedby="ariaDescribedby"
name="radios-stacked"
value="L"
class="d-flex justify-content-start"
>Limit</b-form-radio
>
link to completely working CodeSandbox
Here you go...
I don't understand what you're trying to achieve. Can you explain please?
Add the following CSS:
Reduce the vertical space between the label and the first radio button:
legend#__BVID__6__BV_label_,
legend#__BVID__12__BV_label_ {
padding-bottom: 0;
}
Reduce the vertical space between the two radio buttons:
.custom-control {
min-height: initial;
}
.custom-control-label {
line-height: 1.1;
}
.custom-control-label::before,
.custom-control-label::after {
top: 1px;
}
See the forked CodeSandbox here.
To prevent the radio buttons from getting centered, remove the class class="form-inline" from your <b-form-group></b-form-group>.
It will adjust the texts accordingly.
So you should have something like this:
<b-form-group
label="Order type"
v-slot="{ ariaDescribedby }"
label-align="left"
>
...
</b-form-group>
Related
I am using Bootstrap-Vue's accordion component and I am struggling with trying to figure out how I can show the correct collapse state for the + and - icons on the right hand side of the accordion buttons.
Does anyone know how to start the icon in the + state and when the user clicks the accordion button and shows the content, I want the icon to be -.
I hope this makes sense. I have JSFiddle here: https://jsfiddle.net/26gvdxqo/
Adding this to the code will fix your issue:
...
<div class="when-open"> + </div>
<div class="when-closed"> - <div>
...
<style>
.collapsed > .when-open,
:not(.collapsed) > .when-closed {
display: none;
}
</style>
Basically I took this, https://vuetifyjs.com/en/examples/layouts/googleContacts.
I don't like float containers, I want everything to fit into usual fixed-width centered v-container on a large screen. That's what I'm trying to achieve:
But I met a number of obstacles with toolbar: it's float but it's content is centered and has fixed width. I pasted v-container inside v-toolbar, but it was not centered since v-toolbar__content > *:first-child and last-child have margin:0. Then added v-flex before v-container and that caused height collapse so the v-toolbar buttons were not occupy full toolbar height anymore. Then added v-layout to expand height and some v-flex inside but still haven't got any success. The question is how to properly work with v-toolbar and v-container to make the toolbar's content fixed width and centered.
Apply to v-toolbar this style:
<v-toolbar :class="{ 'my-toolbar': $vuetify.breakpoint.smAndDown }"> </v-toolbar>
<style>
.my-toolbar { width: 80%; left: 10%; }
</style>
You will have to play a bit with the % to keep it inline with v-container elements. You can also look into a computed property to check different breakpoints.
I need to insert a clickable button inside v-text-field under label slot. Meaning that there will be label : " Start typing or Select Search Panel" where "Select Search Panel" will be a link or button.
I'm able to make it visible using the v-slot:label but the button is not clickable and onSearchPanelClicked in not triggered..
<v-text-field class="input-field" clearable prepend-inner-icon="search" solo >
<template v-slot:label class="linkLabel" v-on:click="onSearchPanelClicked">
Start typing or <v-btn v-on:click="onSearchPanelClicked" class="link" flat > Select Search Panel</v-btn>
</template>
</v-text-field>
Is there any way to transfer click event to the element ? If I start typing the label must disappear like it used to work on v-text-field.
Regards
Jan
You have to overwrite your input .v-label CSS rule pointer-events.
Vuetify sets the label inside a v-text-field like this:
.v-text-field .v-label {
pointer-events: none; // unclickable element
}
So changing it to auto will enable your button inside v-text-field label to become the target of pointer events, just be aware of deep selectors when working with scoped styles at your component.
.v-input.input-field .v-label {
pointer-events: auto;
}
/* or for scoped styles */
::v-deep .v-input.input-field .v-label {
pointer-events: auto;
}
In this example the rule is applied only to fields with your custom class .input-field, if you'd like to overwrite for all the v-text-fields just remove it from the CSS code.
I am using bootbox.js to display some confirmation and error messages to my user.To do this I provide the className attribute to bootbox however I noticed that the top left and right radius of .modal-header dissapear when I apply a class that changes it background.Here is a jsfiddle
I know that I can solve it by adding a border-radius:5px 5px 0px 0px to .errorAlert .modal-header but I want to understand why this is happening in the first place.
In case you have problems with the link here is the minimum code to reproduce the issue:
HTML
<div class='btn btn-info' id = "simpleModal">
Show just a simple modal
</div>
<div class='btn btn-info' id="customClass">
Show a modal with a custom class
</div>
CSS:
.errorAlert .modal-header{
background:red;
}
JavaScript:
$(function(){
$("#simpleModal").on("click",function(){
bootbox.alert({title:"Just a modal",message:"With no custom class"})
})
$("#customClass").on("click",function(){
bootbox.alert({title:"Just a modal",message:"With .errorAlert class applied",className:"errorAlert"})
})
})
That's because border radius in Bootstrap is applied to the .modal-content and by default .modal-header doesn't have a background. When you apply background to the modal header border radius disappears because you cover them by that red background of modal header which doesn't have border radius.
I have a loadMask. This sets a gray background and on top of that the loading image that says Loading. From the documentation:
// Basic mask:
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();
The problem is I only want the small square with the loading image and the "loading..." label, I need to get rid of the gray background.
This gray background get dawn in .x-mask x-mask-gray div. I have tried setting the CSS of this div to different values for width and height but I can't make it work.
here is the HTML:
<div class="x-mask x-mask-gray" id="ext-gen1099" style="width: 1124px; height: 575px; ">
<div class="x-mask-loading">
<div class="x-loading-spinner">
<span class="x-loading-top"></span>
<span class="x-loading-right"></span>
<span class="x-loading-bottom"></span>
<span class="x-loading-left"></span>
</div>
<div class="x-loading-msg">Loading...</div>
</div>
</div>
If you see, width is set to 1124px and height to 575px, I need that to disappear, make it 0px or remove the whole x-mask-gray but without removing the child nodes. And hopefully view the "Loading..." label centered.
I hope you can help me, any suggestions are greatly appreciated.
Your best option is to override those styles but just make the background transparent instead of trying to remove the DIV completely.
If you add the following CSS it will leave the mask's background transparent.
.x-mask, .x-mask.x-mask-gray
{
background-color: transparent;
}
Alternatively, you could override the Ext.LoadMask's onBeforeLoad method and pass in true as the last parameter of the mask() method (which is the 'transparent' parameter) which will remove the x-mask-gray class from the masking DIV, as below:
var myMask = new Ext.LoadMask(Ext.getBody(), {
msg: "Please wait...",
onBeforeLoad: function(){
if (!this.disabled) {
this.el.mask(Ext.LoadingSpinner + '<div class="x-loading-msg">' + this.msg + '</div>', this.msgCls, false);
this.fireEvent('show', this, this.el, this.store);
}
}
});
myMask.show();
Unfortunately, you will still need the CSS override for the .x-mask class with this solution because it still adds a 30% opacity background.
Hope this helps
Stuart