I would like to style the inner class which is inside the custom angular component
<div class="outer">
<custom-component>
<div class="inner">
</div>
</custom-component>
<div>
css:
Following style is not working.
.outer {
custom-component > .inner {
border: solid 1px orange;
}
}
Related
I dont want to style border for the last item inside container. how to do this?
I tried
::ng-deep custom-comp .custom-container: last-child {
border-bottom: none; //this is not working
}
<div class="container">
<custom-comp></custom-comp>
<custom-comp></custom-comp>
</div>
custom comp:
<div class="custom-container" style="border-bottom: solid 1px red;">
</div>
Can anyone help me how to style so the last custom-comp doesn't have the border bottom?
thanks
I tried following and it worked.
div.container {
::ng-deep custom-comp:last-child > div {
border-bottom: none;
}
}
I am working on scoping all the styles of our Vue2 frontend codebase to prepare for the transition into Vue3. I have read on Vue docs that the ::v-deep directive enables the child component to receive the scoped styles from their parent components.
We use Sass. Some child component classes don't get the style applied even though I have implemented ::v-deep on their parent component.
Here's the code of the style section:
<style lang="scss" scoped>
.support-category::v-deep {
.icon-back {
font-size: 14px;
color: color(text4);
}
.border-bottom {
border-bottom: 1px solid color(bg3);
}
&__subject {
font-size: 18px;
font-weight: 700;
}
&__accordion {
font-size: 15px;
ul,
ol {
margin-bottom: 0.75rem;
margin-left: 14px;
margin-top: 3px;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
}
}
</style>
Here's the portion of code of the template section:
<div v-if="hasSupportCategories">
<div
v-for="category in mainSupportCategory.support_categories"
:key="category.id"
class="mb-8"
>
<v-row>
<v-col :size="12">
<v-accordion
class="support-category__accordion"
:initial-active="mainSupportCategory.support_categories.length === 1"
>
<template v-slot:title>
<div class="support-category__subject pb-3 border-bottom">
{{ category.title }}
</div>
</template>
<div
v-for="item in category.support_items"
:key="item.id"
>
<v-accordion class="support-category__accordion border-bottom py-3">
<template v-slot:title>
<div class="font-bold">
{{ item.title }}
</div>
</template>
<v-markdown
:source="item.text"
class="pt-3 pb-2"
/>
</v-accordion>
</div>
</v-accordion>
</v-col>
</v-row>
</div>
</div>
The v-accordion component has ::v-deep implemented as well:
<style lang="scss" scoped>
.accordion::v-deep {
.icon-left {
margin-right: 0.75rem;
font-size: 12px;
color: color(text4);
}
}
</style>
<div class="accordion flex flex-col w-full">
<div
class="cursor-pointer"
#click="toggle"
>
<slot name="title" />
</div>
<div v-show="active">
<slot />
</div>
</div>
I have tried many techniques but nothing worked out:
&::v-deep(__subject) {
font-size: 18px;
font-weight: 700;
}
or
&::v-deep(&__subject) {
font-size: 18px;
font-weight: 700;
}
The only solution that worked is to make this suffixe selector an independent child selector.
.subject {
font-size: 18px;
font-weight: 700;
}
That works for this case but since we use suffixes a lot in the codebase I would like to find a solid solution.
Thanks!
Answer:
Use a postcss.config.js file and add a 'postcss-prefix-selector' like so to give each class a prefix.
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
'postcss-prefix-selector': {
prefix: '#single-spa-application',
},
},
};
I am trying to implement a horizontal scroll bar to display images , but the width of the wrapper (scroll-container) container is overflowing. I also need to use FlexBox grid to make it responsive for different screen sizes.
Structure for HTML & SCSS is as given below. The container must be inside a mat-tab-group (Angular Material).
div 'item' will contain multiple items.
I am running it on chrome and have checked the inspector, apparently the mat-tab-body-wrapper display: flex property is causing this issue.
Is there any work around for this issue?
HTML
<mat-tab-group>
<mat-tab label="First">
<div class='row scroll-container'>
<div class='col-xs-5 col-sm-8 col-md-9 col-lg-12'>
<div class='horizontal-slider'>
<div class='slider-container'>
<div class='item'>
<img src='' alt=''>
</div>
</div>
</div>
</div>
</div>
</mat-tab>
</mat-tab-group>
SCSS
.scroll-container {
margin: 8px 0 0 0;
.horizontal-slider {
display: flex;
overflow-y: hidden;
max-width: inherit;
overflow-x: scroll;
box-sizing: border-box;
.slider-container {
.item {
display: flex;
margin-right: 8px;
img {
width: 124px;
height: 124px;
}
}
}
}
}
The most effective solution would be as shown below. Alongside the flex-nowrap you need to set the overflow attribute to prevent the whole page expanding.
With overflow property:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<h6>Bootstrap 4 horizontally scrollable card groups</h6>
<div class="d-flex flex-row flex-nowrap overflow-auto">
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
<div class="card card-block mx-2" style="min-width: 300px;">Card</div>
</div>
Is it possible to add kendo uploader inside kendo ListView?
<script type="text/x-kendo-tmpl" id="templateMessage">
<div class="Row" style="padding: 2px 2px 2px 2px !important;">
<div style="width: 15%; float: #_Layout.Align; padding-left: 2px;" class="gridText">
#:CheckList#
</div>
<div style="width: 50%; float: #_Layout.Align; padding-left: 2px;" class="gridText">
#(Html.Kendo().Upload()
.Name("file")
.Async(a => a
.Save("SavePic", "Home")
.Remove("RemovePic", "Home")
.AutoUpload(true))
.Multiple(false)
)
</div>
</div>
</script>
Few points that you need to cover:
all the ToClientTemplate extensions when you position widget inside
a client template.
escape the sharp symbols if you have used any inside your widget declaration:
function(e) {
e.data = { id: $("\#Id").val() };
}
I think it's possible. Just have to always remember calling the ToClientTemplate() method when using kendo widgets in a client template.
In this case:
#(Html.Kendo().Upload()
.Name("file")
.Async(a => a
.Save("SavePic", "Home")
.Remove("RemovePic", "Home")
.AutoUpload(true))
.Multiple(false)
.toClientTemplate()
)
UPDATED:
You may escape use "#" in JavaScript strings using "\\#" and in HTML script templates using "\#".
Ran across an odd issue today. I've been working with a floated menu that works on everything I've tested thus far (not gotten to old IE versions yet...), except firefox. The page renders correctly when first loaded, but if the window is resized, elements with deterministic layouts (i.e. inline elements, divs with overflow:hidden, etc) affected by the floated element fail to update.
Anyone have a (preferably javascript free) workaround?
HTML:
<div id="leftBar">
<a>test1</a>
<a>test2</a>
</div>
<div id="bodyContent">
<div>
<div id="contenta">
Hello world!
</div>
</div>
<div>
<p>Paragraph test</p>
</div>
<div style="clear:both">
Enclosing div.
</div>
</div>
CSS:
#leftBar {
float:left;
width:50px;
background:red;
height:75px;
}
#bodyContent {
margin:0 auto;
width:500px;
background:green;
}
#bodyContent > div {
overflow: hidden;
}
#contenta {
width:100%;
height:50px;
background:blue;
}
jsfiddle here.
I'm not sure if this is what you're trying to achieve or not, but I would personally use a container for the elements.
#container {
width: 550px;
}
#leftBar {
float:left;
width:50px;
background:red;
height:75px;
}
#bodyContent {
margin:0 auto;
width:500px;
background:green;
overflow: hidden;
}
#contenta {
width:100%;
height:50px;
background:blue;
}
Then wrap your content in the container.