How do I set full width on input elements inside a radio group?
I'm using the following setup to create two options (user can either upload a file or specify a URL):
<v-radio-group v-model="photo_mode">
<v-layout row align-baseline>
<v-radio value="file" />
<v-file-input v-model="eitem.photo" class="mr-4 mt-0" :disabled="photo_mode=='url'" />
</v-layout>
<v-layout row align-baseline>
<v-radio value="url" />
<v-text-field v-model="eitem.photo_url" class="mr-4 mt-0" :disabled="photo_mode=='file'" />
</v-layout>
</v-radio-group>
The looks fine except that both v-file-input and v-text-field are not as wide as the container. Here is a snapshot:
As you see, the v-text-field above the radio group (Details field) is correctly showing full-width, but the two inputs inside the radio group are not. What can I do to fix this?
Found the solution. This is a bug in Vue. Already reported here. The solution is to simply add the following CSS in your App.vue:
<style>
.v-input--selection-controls .v-input__control{
width: 100%;
}
</style>
Make sure the style section is not marked with scoped keyword.
I found that I also needed to set the style of v-label too, in order for this workaround to function properly. Also I used scoped css locally in the component:
.radio-group-full-width >>> .v-input__control {
width: 100%
}
.radio-group-full-width >>> .v-label {
width: 100%
}
So in the template:
<v-radio-group class="radio-group-full-width">
Related
The same problem as this post except it is Vuetify.
Is there any solution that use provided API? CSS would be the last option I choose.
codepen demo
<template>
<v-app-bar app dark absolute class="navbar-bg" >
<v-app-bar-nav-icon #click="toggleSidebar" />
<v-toolbar-title>Homepage</v-toolbar-title>
</v-app-bar>
</template>
Currently, there's no a single prop in API.
But you may help yourself a lot with a built-in vuetify classes and directives.
First of all, you (sadly) need to write some CSS to manually disable initial page scrolling:
html {
overflow-y: hidden;
}
.scrollable {
overflow-y: scroll;
}
Then you need to add <v-main> component to your application with scrollable pt-0 mt-16 classes and wrap all of your future app components into it. This classes will adjust the padding from the default <v-app-bar> and enable scrolling directly in <v-main>.
Finally, you should add v-resize directive to <v-main> to automatically recalculate your page size when user will resize a page:
<v-main class="scrollable pt-0 mt-16" v-resize="onResize">
...your application data...
</v-main>
...
methods: {
onResize() {
//64px is v-app-bar height in your case
document.querySelector(".scrollable").style.height = (window.innerHeight - 64) + 'px';
}
},
That's it. You may then create your custom component to wrap <v-main> and forget about such manipulations.
Codepen link with an example
I want to dynamically change the background-image on a ccs class in an imported component
How can I do that?
I have installed 'vue-range-slider' and have imported RangeSlider
The range-slider is set up the following way.
<template>
<div id="slider_div" >
<range-slider
class="slider"
min="0"
max="100">
</range-slider>
</div>
</template>
<script>
import RangeSlider from 'vue-range-slider'
import 'vue-range-slider/dist/vue-range-slider.css';
export default {
name: 'susScore',
data: function() {
return {
emoji: "../assets/emoji_small.jpg",
}
},
components: {
RangeSlider
}
</script>
<style >
#slider_div{
margin-top: 95px;
margin-left: 4%;
}
.slider{
width:200px;
}
.range-slider-knob {
background-image: url("../assets/emoji_small.jpg")
}
</style>
In this case I am sending a specific image but I want to send an image dynamically using the data option, emoji, in the component.
Question
How can I dynamically update the background-image in the imported .range-slider-knob class?
I tried using CSS variables in a previous question here on SO (Dynamically add image with css variable in vue) but got the reply that that wasn't possible
You can't use vm properties in <style> tag, but you can update emoji in data to:
emoji: require("../assets/emoji_small.jpg")
... and then pass it to any template element using:
<whatever :style={backgroundImage: `url(${emoji})`} />
A fully working example: codesanbox.
I combined require() with a computed changing loaded image based on slider value.
In the RangeSlider.vue file, line 13 shows that the component includes a named slot 'knob'. Vue Slots let you pass html/vue content into the component.
You could pass in a simple div on which you can dynamically change it's background using a method like #tao suggested. Note that a name attribute is given to match the name of the slot you are trying to replace; however, the name shouldn't be required because it is the only slot within component you are using.
<range-slider
class="slider"
min="0"
max="100">
<div
name="knob"
:style={backgroundImage: url(emoji)}
/>
</range-slider>
This method also gives you more freedom in how the knob is presented and/or manipulated with JS.
I have Vuetify code which look like this
<v-radio-group v-model="gender" column class="radio-group-full-width">
<v-radio value="Boy">
<template v-slot:label>
<v-textarea
v-model="answer"
v-validate="'required'"
required
:error-messages="
errors.collect('form-create.answer')
"
label="Answer 1"
data-vv-name="answer"
type="text"
></v-textarea>
</template>
</v-radio>
</v-radio-group>
The Problem is that i want to have the text-area in full width, but the label tag which is generated by vuetify template slot blocks this. Do you have any ideas how i could fix this?
What it looks now
What i want
answer worked for me with a slight modification to the braces:
.radio-full-width >>> label {
width: 100%;
}
I'm building my first React modal. The basic structure is now done but I want to have more padding in between the border and the contents. I thought this would be simple but I've tried several things and none work.
return (
<div className={classes.backDrop}>
<Modal
backdrop={'static'}
size='lg'
show={true}
centered={true}
style={classes.modalContainer}
data-testid='addFleetCustomerModal'
>
<div className='modalContainer'>
<ModalHeader>
</ModalHeader>
<Modal.Body>
<Modal.Title>
Add Customer
</Modal.Title>
<Form.Group>
<Form.Label className={classes.highlight}>Company Name*</Form.Label>
<Form.Control id='companyName' data-testid='companyName' type='text' placeholder='For example: ABC Corp.'
/>
</Form.Group>
<Form.Group>
<Form.Label>
<strong>NOTES</strong><br/>
Notes added here can only be viewed and edited by other team members.
</Form.Label>
<textarea className="form-control" id="companyNotes" rows="3"></textarea>
</Form.Group>
</Modal.Body>
<Modal.Footer>
<Row>
<a href='/#'>Cancel</a>
<Button variant='secondary' size='sm'> Next </Button>
</Row>
</Modal.Footer>
</div>
</Modal>
</div>
);
Any ideas on what CSS I should add (and where) to move the content of the modal inward a bit more?
add this to your css:
.modal-header,
.modal-body,
.modal-footer {
padding: 2rem; //change the padding as you want
}
this will change the padding but the with full width lines between sections.
See Working demo 1
you can also add the padding around the whole modal but this this won't make the lines full width:
.modal-content {
padding: 2rem;
}
See Working demo 2
My apologies, everyone. I must have been really tired yesterday afternoon when I posted this. Let me explain the solution:
The code I posted above is inside a functional component that is defined like this:
const AddCustomer = ({ classes }) => {
classes comes from the parent component, which is defined like this:
class UserMgmtPage extends React.Component {
In this parent component, the CSS styleSheet is injected into via react-jss code. I then pass does these same CSS classes into functional child component.
You'll notice this 2nd line, which was always working:
<div className={classes.backDrop}>
My failure was to use the same syntax. Thus the solution is this:
<div className={classes.modalContainer}>
Sorry for the trouble but I do appreciate everyone who tried to help!
I am trying to implement typeahead functionality in Angular. I am using ngbTypeahead from ng-bootstrap for this as shown below.
<input id="typeahead-template" type="text" class="form-control form-rounded" [ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter" />
<ng-template #rt let-r="result" let-t="term">
<img [src]="'https://upload.wikimedia.org/wikipedia/commons/thumb/'+r['flag']" class="mr-1" style="width: 16px">
<ngb-highlight [result]="r.name" [term]="t"></ngb-highlight>
</ng-template>
This is displaying result like
result1
result2
result3
but I want a header to be added and the result should be in the format
The results are
result1
result2
result3
Can someone please help with this?
This isn't supported by ng-bootstrap's Typeahead component, however you can use CSS to insert text before the results. The only problem with this solution is that you need to use ::ng-deep which is deprecated and likely to be dropped by Angular soon.
Add this to your component's CSS:
::ng-deep ngb-typeahead-window:before {
content: "The results are:";
}
and you should see the following when results are displayed:
This will prepend the typeahead results with the text specified as the value of the content property.
Please see this StackBlitz for a demo
There is a hack I have been using:
Use the first row as a dummy row with a specific attribute
Track the existence of that attribute to render the header at the template
Use CSS to make the first row unselectable.
.popup-custom-class .dropdown-item:first-of-type {
pointer-events: none;
}