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%;
}
Related
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">
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;
}
I'm using angular 7. And I want a label with red required asteriks when label has required attribute. I wrote app.component.css like below Stackblitz. But it didn't worked. What can be the reason of not working? (Or another way of doing this job?)
app.component.css
label.required::after {
content: " *";
color: red;
}
app.component.html
<label required>Test Content</label>
STACKBLITZ
I want to show result as
Test Content *
label.required is a selector for a label with the class required.
<label class="required">
For a label with an attribute required, it would be label[required].
That is pure CSS, BTW, and has absolutely nothing to do with Angular and TypeScript.
I have a datatable with primefaces:
<p:dataTable var="wapsoplandtl" id="wapsoplandtlList" widgetVar="wapsoplandtlList" value="#{exportController.wapsoplandtls}"
paginator="true" rows="50" scrollable="true" scrollWidth="2500px;" styleClass="borderless"
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {CurrentPageReport}"
currentPageReportTemplate="{startRecord} - {endRecord} of {totalRecords}" paginatorPosition="bottom"
rowsPerPageTemplate="10,25,50" rowKey="#{wapsoplandtl.dtlsys}">
and produce something like this:
As you can see, it has scrollwidth attribute, but the header got scrolled to the far right. I want only scroll the content of datatable, not the header and footer (paging). Can anyone help me?
This can be done by CSS only, forget about the scrollable attribute of the <p:datatable> component, apparently it will always overflow the whole table, and not just the content.
In this case, do the following:
Remove the scrollable and scrollWidth attribute from your <p:datatable> component;
Include another CSS class (any name, but keep this name to be used later, in this case I will use the name 'overflow-content') in the styleClass attribute from <p:datatable>;
Include the following CSS rule in your page:
-
.overflow-content .ui-datatable-tablewrapper table {
overflow: auto;
width: 2500px;
}
The result will be something like this:
For this you need to first add the option scrollX: true and should add css to table width:100% inline.
$('#example').dataTable( {
"scrollX": true
} );
and you are done.
I have a ion-select with few options i gave a header using [selectOptions], is there a way to define a css so that i could able to set background-color to header, button alignment ,and add a icon to the header
<ion-select [selectOptions]="daysOptions" #selectDays="ngModel" required name="selectedDay" [(ngModel)]="selectDay" >
<ion-option *ngFor="let day of Days;" [value]="day.val">{{day.name}}</ion-option>
</ion-select>
could someone help me
You can fix this easily now
Add to ion-select element:
[interfaceOptions]="{cssClass: 'my-class'}"
Add to css:
.my-class .alert-wrapper {
max-width: 94% !important;
}
Yes, you can use cssClass in option like this:
// In your component
daysOptions = {
cssClass: 'my-class',
...,
}
Then in css you can do what you want eg:
.my-class .alert-wrapper {
max-width: 94% !important;
}
Thank's to ionic docs: https://ionicframework.com/docs/api/components/alert/AlertController/#advanced
I needed a color selector couple of months ago but I couldn’t find any.
The only way to do this was using custom CSS. I tried adding CSS classes to ion-select and ion-option but the classes doesn’t get reflected in the generated output. So the only way to apply the custom CSS to ion-select and ion-options is by using the parent element and some JS.
You can check the logic in:
HTML:
https://github.com/ketanyekale/ionic-color-and-image-selector/blob/master/src/pages/home/home.html
TS:
https://github.com/ketanyekale/ionic-color-and-image-selector/blob/master/src/pages/home/home.ts
SCSS:
https://github.com/ketanyekale/ionic-color-and-image-selector/blob/master/src/pages/home/home.scss