I would like to have scrollable content within a bootstrap accordion, but can't get it to work.
Closest I have got was using flex-column and overflow-hidden on parents and overflow-auto on the content elements like this:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header></header>
<main>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.11.0/mdb.min.js"
></script>
<!-- Font Awesome -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
rel="stylesheet"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
rel="stylesheet"
/>
<!-- MDB -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.11.0/mdb.min.css"
rel="stylesheet"
/>
<div class="accordion vh-100 d-flex flex-column" id="accordionExample">
<div class="accordion-item overflow-hidden d-flex flex-column">
<h2 class="accordion-header" id="headingOne">
<button
class="accordion-button"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne"
>
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show overflow-auto" aria-labelledby="headingOne" data-mdb-parent="#accordionExample">
<div class="accordion-body overflow-auto">
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
</div>
</div>
</div>
<div class="accordion-item overflow-hidden d-flex flex-column">
<h2 class="accordion-header" id="headingTwo">
<button
class="accordion-button collapsed"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse overflow-auto" aria-labelledby="headingTwo" data-mdb-parent="#accordionExample">
<div class="accordion-body overflow-auto">
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the first item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <strong>.accordion-body</strong>, though the transition does
limit overflow.
<strong>This is the second item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we use to
style each element. These classes control the overall appearance, as well as the
showing and hiding via CSS transitions. You can modify any of this with custom CSS
or overriding our default variables. It's also worth noting that just about any
HTML can go within the <strong>.accordion-body</strong>, though the transition
does limit overflow.
</div>
</div>
</div>
</div>
</div>
</main>
<footer></footer>
</body>
</html>
But there because of the overflow-hidden on the accordion-item element, when you open a page on it, the other elements get shrunk.
Related
This question already has answers here:
Why does clip-path (and other properties) affect the stacking order (z-index) of elements later in DOM?
(1 answer)
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 4 months ago.
The hover state of the card component somehow interferes with the z-index ordering. See the following GIF for context:
Here are the classes of the two components:
(I had to simplify the structure in order not to overcomplicate this question. I'm happy to provide more details if needed.)
// Dropdown
<div className='relative h-full w-full' ref={node} onClick={handleMenuClick}>
{/* Menu button */}
{children} // here I render different elements based on where the Dropdown is placed
{/* Dropdown Content */}
// I removed some classes to show only the relevant ones
<div className=`right top ${isMenuOpen ? 'block' : 'hidden'} absolute z-30 rounded`}
onClick={(e) => e.stopPropagation()}>
... // Dropdown content
</div>
</div>
// Card element
<a className='bg-gray-darkest rounded-xl p-8 hover:brightness-75' // note: this is where I'm having issues
href={props.url}>
<img src='...' alt='...'/>
<div className='mt-6'>
<h4 className='font-display text-lg'>{props.name}</h4>
</div>
</a>
I tried to work around it by animating opacity vs brightness or using Tailwind's Groups to animate only some child components inside the card, but the effect is the same. Also removing the hover state and setting a static opacity or brightness value, breaks as well the order of the components.
Thanks for your support!
Thanks for the info provided, I was able to identify the issue. Although the Dropdown had a z-index of 30, the Sidebar (the dropdown parent component) had an implicit z-index of 0 that placed the whole sidebar on the same level as the rest of the page.
Not sure how the opacity impacts how the browser interprets the various layers when they have the same z-index, but the right approach was to increase the z-index of the Sidebar compared to the page.
when I create a component ng g c my-component, the content is rendering fine in ie11 once I turn on the polyfills. However, that component breaks the CSS, refusing to be styled -- in particular, it refuses to take any height, regardless of contents. Debugging, at first I thought that it refuses a background color (which I use to identify blocks in ie since there is no highlight-on-hover), but when I add an explicit height suddenly the background color renders.
example (inside of app-my-component):
<article class="my routable component">
<app-child-component></app-child-component>
<footer>should be under the inner component content</footer>
</article>
inside app-child-component:
<!-- this section will never have a height -->
<section class="child component">
<app-inner-component></app-inner-component>
</section>
inside app-inner-component:
<!-- this section naturally will have height after the async returns results -->
<section class="inner component">
<div *ngFor="const item in asyncResultItems">hi mom!</div>
</section>
The footer text will render on top of the app-inner component's content.
I would prefer the footer text to follow -- basically, IE11 should treat app-* elements like divs, but it seems to refuse to count them when giving a height at all (styles inside work just fine, though).
What can be done about that (simply wrapping the component in a containing div also does not work, by itself)?
full example: https://stackblitz.com/edit/angular-fhmded
Note, thanks to amazing help, I have diagnosed the problem (I added more and more of the differences between the minimum example and my actual code til I reproduced it). Flex column is breaking on the child component.
IE11 does not properly support flexbox. As you can see on https://caniuse.com/#feat=flexbox there are a number of known issues. It is also very sensitive to syntax. If I change your flex: 1 rules to flex: 1 1 auto then it seems to work correctly for me at least.
I'm using bootstrap for most of the page, but I'd like to use custom css in a div.col to get a nicer looking table, but the bootstrap css is affecting some of the styles.
I'd like to reset all the styles for a specific div and it's children.
Are there any ways of dealing with this other than explicitly overloading every style bootstrap uses?
To reset all the styles for a specific div, you can add the 'all: unset;' CSS property.
<div style="all: unset;">...</div>
This will undo ("unset") all the styles currently applied to that div (but not it's children), leaving you to add which ever ones you desire.
See it in action here (including how to apply to all child elements):
http://codepen.io/esr360/pen/kkogwm?editors=1100#0
This is a bootstrap accordion that has been "unstyled".
View browser support here: http://caniuse.com/#feat=css-unset-value
Unsurprisingly this doesn't work in IE.
I'd like to be able to move the Global Navigation Bar above or below the "suite bar" in SP 2013.
Here is an example of what it would look like:
I know I could add a div in the master page, however, I would like to just use CSS. Would I use #DeltaTopNavigation or ms-breadcrumb-top? What CSS properties would I use?
#DeltaTopNavigation
{
// you can move with "margin-top:**px;"
}
I pulled this form --> http://sharepoint.rackspace.com/branding-top-navigation-in-sharepoint-2013
<div class="ms-breadcrumb-top"> - this div is the outer wrapping div that spans the width of the navigation area in the OOTB seattle.master. In a custom branding scenario, you probably will use your own wrapping div instead of this one.
<div class="ms-core-navigation"> - This tag is the wrapping div of the top navigation link area. Not much going on here for styling purposes.
<div class= "ms-core-listMenu-horizontalBox" > - Second wrapping div sets the display of the nav to render inline-block.
<ul class="root ms-core-listMenu-root static"> - top level of the list. The "root" class provides an easy way to identify the root of your navigation and apply any nedessary styles, while the "static" class is applied to any element of the navigation that doesn't dynamically appear (e.g., dropdown navigation). The .ms-core-listMenu-root class sets the margin to zero.
<li class="static"> - an item in the navigation list. Again the "static" tag is applied to the top level navigation items because they are static and don't dynamically appear/disappear based on interaction.
<a class="static menu-item"> - the "menu-item" class denotes that this is one of the actual links in the navigation. Styles that affect the actual link are generally applied at this level of the navigation structure.
<span class="additional-background"> - this span gives you an extra layer to apply additional styling if necessary.
<span class="menu-item-text"> - the span that holds the actual text. Generally, you probably won't need to do much with this, as most styles for the navigation links actually take place on the "menu-item" class applied at the <a> tag level.
I did this to move the designer bar down to give room for the nav
#ms-designer-ribbon{
margin-top:20px;
}
Be sure to un-hide s4-titlerow. If you don't, the nav will disappear when you use the ribbon.
#s4-titlerow {
display: inline!important;
}
I am looking at different CSS modularising methodologies and trying to implement some of their ideas into a new project. Some I am looking at are SMACSS, BEM and MVCSS.
I understand that in SMACSS layout rules should be in my _layout.sass file which is fine so my styles are as follows:
.container
+container
+margin-leader
+margin-trailer
+container sets this element as a grid container from Compass Susy and then adds top and bottom margin.
I now want to add a border radius and box shadow to this element.
Where do I place these styles as they don't fit within the layout stylesheet?
2nd issue is:
I have created a media block which basically allows an image to be floated left and some text to be floated right. It has a flipped variation that flips the two around.
I need to be able to specify the width of the image but where does this go? I have for now placed it as part of the media block module code but surely that means that ALL images inside future media blocks will be that width. It seems like the width of the image needs to be elsewhere but I am just not sure where. I know I could add classes to the image in the markup like "small", "large" etc but to be that sounds like adding presentational stuff to the markup which I thought was what were were trying to get away from.
3rd issue:
I have created a title-box module that is marked up as follows:
<div class="title-box">
<h3 class="title-box__header">Upcoming Events</h3>
<div class="title-box__content">
</div>
</div>
I want 3 of these boxes side by side. I know how to do it but unsure of the correct modular way to do this. Any thoughts?
1) According to BEM methodology you can use mixes to solve your first issue:
<div class="container widget"></div>
This means that there are 2 different blocks on the same DOM-node: container (knows about layout) and widget (styles the block with border radius and shadow).
2) You can add class to these images making them elements of media block and then specify types of images with modifiers:
<div class="media-block">
<img class="media-block__image"/>
<div class="media-block__description">Some text</div>
</div>
<div class="media-block media-block_float_left">
<img class="media-block__image media-block__image_type_important"/>
<div class="media-block__description">Some text</div>
</div>
So image elements of media block which are important can be styled with bigger size.
Also you can use modifiers to set float direction.
3) I'm not sure if I got your question right but I think you have two options:
Style title-box itself (e.g. as float with some margins).
Add styles to title-box in it's parent file with cascade if it's possible to use title-box somewhere outside with different layout.