I'm new to Angular Material Here i have mention Image of What Actually i Need?
I don't how to split row in card
Check out this,
Here i tried angular material card, Click Here to see.
<mat-card class="example-card">
<mat-card-content>
<img mat-card-image src="https://image4.geekbuying.com/ggo_pic/2016-08-30/2016083001543551umb5a0d.jpg" alt="Photo of a Shiba Inu" style="width:100px; float:left; height:100px">
<mat-card-header>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-subtitle>Headphones</mat-card-subtitle>
<mat-card-title>Xiaomi Redmi Note 4</mat-card-title>
</mat-card-header>
<br>
<mat-card-header>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-title>$225</mat-card-title>
</mat-card-header>
</mat-card-content>
</mat-card>
Related
In this example the the custom control is placed below the actual leaflet-control-container element.
<div class="leaflet-control-container">
<div class="leaflet-top leaflet-left"></div>
<div class="leaflet-top leaflet-right"></div> <----- Where I want it
<div class="leaflet-bottom leaflet-left"></div>
<div class="leaflet-bottom leaflet-right"></div>
</div>
<div class="leaflet-top leaflet-right"></div> <----- Where it is actually placed
This causes that anything in leaflet-control-container leaflet-top.leaflet-right div is covered with the custom element.
Is there a way to place this custom element inside leaflet-control-container?
That example looks buggy and unnecessarily complex. Try wrapping the minimap component in a LayerControl and using that to set the position:
<LayersControl position="topright">
<MinimapControl />
</LayersControl>
I'm trying to make a text input area like this.
I tried this way
<v-text-field
label="Outlined"
placeholder="Placeholder"
background-color="white"
append-icon="mdi-arrow-right x-large primary"
outlined
></v-text-field>
And it give me this result.
Issues are
Icon doesn't get large enough to fill the entire text-area
Can't change the color of arrow stroke
What should I do to make this text area also receives file drag and drop?(user might want to type or sometimes drop a file to the text area
Thank you so much.
Hope someone who are well knowledgeable about vuetify could help me.
for part of your question about input design and look you should use provided slot from the v-text-field component, this way you can achieve more and here is the vuetify documentation about this: text field icon slots
and to check what other slots is available for this component check this list: all text field slots
even though using slot would achieve a lot more than prop, to fully achieve the desired result you might need to overwrite some css styles that you can find by inspecting the element in the browser dev tool to find them out.
I made the look you wanted with the approach described above in the code below:
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
.v-text-field.v-text-field--enclosed .v-text-field__details,
.v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)>.v-input__control>.v-input__slot {
padding-right: 0 !important;
}
.v-text-field--enclosed .v-input__append-inner,
.v-text-field--enclosed .v-input__append-outer,
.v-text-field--enclosed .v-input__prepend-inner,
.v-text-field--enclosed .v-input__prepend-outer,
.v-text-field--full-width .v-input__append-inner,
.v-text-field--full-width .v-input__append-outer,
.v-text-field--full-width .v-input__prepend-inner,
.v-text-field--full-width .v-input__prepend-outer {
margin-top: 0 !important;
}
.pointer {
cursor: pointer;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-main>
<v-container>
<v-text-field label="Outlined" placeholder="Placeholder" outlined>
<template v-slot:append>
<v-sheet color="red" class="d-flex justify-center align-center rounded-r pointer" width="50" height="56">
<v-icon dark>
mdi-arrow-right
</v-icon>
</v-sheet>
</template>
</v-text-field>
</v-container>
</v-main>
</v-app>
</div>
about the drag and drop issue vuetify's v-file-input component does not natively support this behavior (for now at least) but you can read the article below to find out how to write this feature in vuetify:
Step by Step: Custom drag & drop upload component in Vuetify (Vue 2)
I have a Material UI phone number and when my website is displayed RTL, the phone number aligns itself to the right, but the number also gets messed up. How can I make sure that the number stays as is?
<div open={this.props.open} onClose={this.props.onClose} dir="rtl">
<DialogTitle title="New User" />
This text will be RTL led !
<div>
<Typography component="label">'Phone Number'</Typography>
<MuiPhoneNumber
name="phone"
data-cy="user-phone"
defaultCountry={"us"}
value={this.state.phone}
value="1(937)-123-4567"
onChange={this.handlePhoneChange}
/>
<p>614-764-6300</p>{" "}
{/* number is right aligned but number stays the same which is how it should be*/}
</div>
</div>
Here is the codesandbox link https://codesandbox.io/s/mui-phone-number-forked-cczzj?file=/src/CreateUserDialog.js
I get the same behavior on any HTML input element with type="tel", and that has dir="rtl".
If you want to keep that field left to right you can give it a prop inputProps={{dir: "ltr"}} and make the text aligned to the right with some CSS like text-align: right;
Bootstrap newbie here.
I'm trying to bootstrapify an old page but I can't seem to figure out how to stop my image from overflowing to the next column. I have a row with two columns- with the left side containing a picture. As soon as I reduce the window width, my image will start overflowing to the right column and will eventually collapse on top of the right column. I would like for the left column width to remain static or collapse to the top of the right column until the image can no longer fit in the left column.
I've tried adding the image-responsive class to the image but that will only change my image dimensions and I would prefer the image to keep its dimensions. Any help would be greatly appreciated!
Here is my code: https://www.codeply.com/go/fb14u8fsSc
Is it something like the one below you are looking for?
A couple of notes though:
It might be because of your simplified codeply example, but you use <div class="row"><div class="col-md-12">…X…</div></div>, which is the equivalent of …X…. That simplifies things.
We are talking about Bootstrap 4 here (you also use that in your codeply), but the .img-responsive class is from Bootstrap 3. That class is called .img-fluid in Bootstrap 4.
Regarding inline-style margins, I would suggest to use the spacing utility classes instead.
<div class="container-fluid" style="position: fixed">
<div class="row">
<div class="col">
<div class="card my-3">
<div class="card-header"></div>
<div class="card-body">
Insert name here<br/>
<img src="https://dummyimage.com/188x225/000/fff" class="XXXimg-fluid" alt=""/>
</div>
<div class="card-footer"></div>
</div>
</div>
<div class="col-md-9">
<div class="card text-xs-center mt-3">
<div class="card-header"></div>
<div class="card-body"></div>
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
Wordpress wraps images with captions in a div with a class of .wp-caption.
I'm looking for a way to select images that don't have this div so I can wrap them in different div. (to keep a consistent border around all the images)
<div class="blog-post-content">
<div id="attachment_220" class="wp-caption alignleft" style="width: 310px">
<img class="size-medium wp-image-220" src="/path/to/image" alt="" width="300" height="280" />
<p class="wp-caption-text">Caption Text</p>
</div>
<p>This is the body of the post</p>
</div>
To test my selector, I'm just trying to add a green border. I can handle the .wrap() once the selector is working.
The most promising of my attempts is:
$('.blog-post-content img').parent('div:not(".wp-caption")').css('border', '2px solid green');
... but no luck.
How about this: (untested)
$('.blog-post-content img').filter(function(){
return !$(this).parents('div').hasClass('wp-caption');
}).css('border', '2px solid green');
try:
$('.blog-post-content img').parent(':not("div.wp-caption")')
Not if what Matti says abotu the a element in the hierarchy then the above wont work.
I know this question was asked a long time ago, but I would like to suggest the following:
$('.blog-post-content img').closest('div:not(".wp-caption")')
Untested, but I think that should work, and is shorter than the answer above that works. Using closest means the a is ignored.