I want to develop an pricing table using flip animation exactly like this example and I also use Bootstrap 3.3.6 to develop the entire website.
So, when I used the flip animation inside the Bootstrap grid system, it doesn't work anymore because the animation is using absolute positioning in order to make the animation work properly. Then, each pricing table overlap on each other on smaller windows.
The guilty CSS is this one, it comes from the link given above:
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
Finally, using the grid system like this doesn't work:
<div class="row">
<div class="col-sm-2 col-md-2">
// pricing table #1
</div>
<div class="col-sm-2 col-md-2">
// pricing table #2
</div>
... until I reach 12 as total.
</div>
Does anyone know a way to avoid this?
Thank you,
David
EDIT
Here the fiddle as requested
You need to overwrite the width (and the height if you want)
body .flip-container, body .front, body .back {
width: 100%;
height: auto;
}
working example: https://jsfiddle.net/59wwkua3/
For IE you have to add extra classes like mentioned in https://davidwalsh.name/css-flip#ieflip
I tried to come far as possible with your example. I figured out you missed the flip-container class as well. Here is my last work on it. I filled out the back with navy-blue and hope you find out how to get the rest of the .back
https://jsfiddle.net/brr379Lp/
Related
I am learning HTML/ CSS and JS. I am making my first website and I have a problem. How can I change the background in the container under the pictures, to my color. On the internet I only find bg-secondary etc and I need for example #82b5cf.
I also have a question, I want to put the text in the middle of the picture, now it is under the photo and I can't do anything with it, for a test I changed the font and there is no reaction. Thank you very much for your help :)
main {
.aboutus-card-title {
font-size: 30px;
}
}
<main>
<section id="UAV" class="...."> //#82b5cf
<div class="container ">
<div class="row gx-4 ">
<div class="col-sm ">
<img class="uav-photo" src="img/introduction_1.jpg" alt="An orange four-engine drone hovers in the clear blue sky.">
<p class="aboutus-card-title">Introduction</p>
</div>
<div class="col-sm">
<img class="uav-photo" src="img/UAV_features_2.jpg" alt="An orange four-engine drone hovers in the clear blue sky.">
<p class="aboutus-card-title">Elements</p>
</div>
</div>
</div>
</section>
</main>
For your first question, it sounds like you're wanting a fallback color behind your image. Here's an example how to do this from: https://css-tricks.com/css-basics-using-fallback-colors/
header {
background-color: black;
background-image: url(plants.jpg);
color: white;
}
Basically you first create your fallback background-color, then overwrite it with your background-image. If the background-image doesn't load, the background-color will stay.
For your second question about the text with the .aboutus-card-title class, you have your CSS selectors messed up. This is a good source for learning about selectors: https://css-tricks.com/how-css-selectors-work/. If you want to select that class within main your selector should look like this:
main .aboutus-card-title{
font-size: 30px;
}
In this case, you can probably leave off main and just have this:
.aboutus-card-title{
font-size: 30px;
}
The only reason you would want to use the main selector here is if you wanted to style the .aboutus-card-title class differently if it's within main compared to somewhere else.
These are two questions. I'd split them into two separate posts, makes it a bit easier to search.
For changing the background you can use:
background-color: #82b5cf;
or
background: #82b5cf;
For the centering of text on an image, you could use a combination of position, top, left and transform:
.centered-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Im creating a grouped list with sticky header. Really would like to use virtualization with it. But the virtualization doesnt work when i set fixed height and overflow on the top level table-content-container. Virtualization only works when fixed height and overflow is set to group-body-container.
Here's the html i got what does not work:
<div class="table-container">
<div class="table-header grid-row-template">
<div class="header-item">Id</div>
<div class="header-item">Name</div>
</div>
<div class="table-content-container" style="height:50vh; overflow-y:scroll">
#foreach (DataGroup group in dataGroups)
{
<div class="group-header">
<MudToggleIconButton
#bind-Toggled="#group.IsExpanded"
Icon="#Icons.Filled.ExpandMore"
Color="Color.Secondary"
ToggledIcon="#Icons.Filled.ExpandLess"
Size="Size.Small"
ToggledSize="Size.Small"/>
<MudText Color="#Color.Primary">#group.GroupName</MudText>
</div>
#if (group.IsExpanded)
{
<div class="group-body-container">
<Virtualize Items="group.DataRow" Context="row" ItemSize="20">
<div class="grid-row-template data-row">
<div class="data-item">#row.Id</div>
<div class="data-item">#row.Name</div>
</div>
</Virtualize>
</div>
}
}
</div>
</div>
Here the virtualization works: https://try.mudblazor.com/snippet/GEcwagOjgXcmYqFL
Here its not working: https://try.mudblazor.com/snippet/GawcYUuNUXbCiTTY
The goal would be to have the virtualization working with the second example, when scrolled only the top header would be "sticky".
EDIT:
Here's recording of what i would like to achieve but with working virtualization (https://try.mudblazor.com/snippet/GawcYUuNUXbCiTTY):
Is this even possible with blazors virtualization component?
It is because the Virtualize component needs a limiting height - either explicit or implicit. As you have it now, each Virtualize can just grow to consume as much space as it needs.
You can make your container use flexbox and your group container have a min/max height of 100% to achieve this:
.table-content-container {
display: flex;
flex-direction: column;
gap:0;
}
.group-body-container {
min-height: 100%;
max-height: 100%;
overflow: auto;
}
Updated demo #2 where the expanded group matches the container height - but without more information about what you are trying to do this could go on forever....:
https://try.mudblazor.com/snippet/wOQwEKbUdhZHlbiE
To round things off - I do not recommend this design, but to show it is possible, you can also hide the scrollbars on the expanded/virtualised groups with CSS
.group-body-container {
min-height: 100%;
max-height: 100%;
overflow: auto;
}
.group-body-container {
scrollbar-width: none; /* Firefox */
}
.group-body-container::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
Here is a demo: https://try.mudblazor.com/snippet/cammugcNEmPoITgg - with a scrollbar only on the main container, so you can only scroll the virtualized groups contents with mousewheel/touch - which is why I don't like it.
I'm following a tutorial on youtube to create a replica of LinkedIn with CSS + ReactJS. I've been following the tutorial exactly (using it as more of a learning opportunity than anything) yet sometimes when the tutorial adds certain code, it doesn't appear on my environment when I try to add it. I found a work around for one case, but when I try to add a border-bottom to css it just won't show up.
CSS:
.header{
position: sticky;
top: 0;
display: flex;
justify-content: space-evenly;
border-bottom: thin solid lightgray; /*this is a vscode shortcut*/
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
z-index: 999;
}
JS:
function Header() {
return (
<div className ='Header'>
<div className="header__left">
<img src="https://www.flaticon.com/svg/static/icons/svg/174/174857.svg" alt=""/>
<div className="header__search">
<SearchIcon/>
<input type="text"/>
</div>
<div className="header__right">
<HeaderOption Icon= {HomeIcon} title="Home"/>
<HeaderOption Icon={SupervisorAccountIcon} title="My Network"/>
</div>
</div>
</div>
);
}
*HeaderOption is an imported JS function I created. It isn't conflicting with the CSS I believe because I have removed it and the border still won't appear.
Thank you in advance.
CSS is case insensitive.
But in HTML the class and ID are case sensitive
change
<div className ='Header'>
to
<div className ='header'>
First off, you might wanna check your classNames' spelling for case-sensitivity.
If that's not the issue, your divs are probably collapsing with each other, so it renders the pixels through approximation. This is usually the case if you try zooming in your page and the missing border magically appears.
I suggest setting a height for your header where the borders don't collapse with the other divs' borders. Also, I prefer setting a fixed measurement unit rather like px,rem,%, etc. rathen than using thin.
I am trying to make the entire testimonial tile clickable in WordPress theme. The theme is Orfeo, the site is storytwirl.com
The testimonial tiles have two divs - the outside div class card card-testimonial card-plain that is not linked to anything, and the inside div class card-avatar that is linked to the URL.
Linking in the _card-avatar is supported by the theme. But I want the entire div class card card-testimonial card-plain to be linked to the same URLs as their inside div class card-avatar. There are total three testimonial tiles, and I want for them to link to three different URLs.
I did not find the way to access the HTML via Wordpress and just move links to card card-testimonial card-plain divs. I also have not seen anything about this class in php files.
The only difference between the three tiles is the a href and title in the div class card-avatar.
I used "Additional CSS" in Wordpress Customizer to add CSS that makes the divs with class card card-testimonial card-plain look like clickable, but I was not able to actually add links into those divs. And I have no idea how to add three different links to each testimonial card using just CSS. Can you help?
Is it possible to take this CSS code, and add a link to each of the three card card-testimonial card-plain divs, different URL to each tile?
/* CSS that makes tiles look clickable but does not add actual links */
div.card.card-testimonial {
cursor: hand;
cursor: pointer;
opacity: .9;
}
a.divLink {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none;
/* Makes sure the link doesn't get underlined */
z-index: 10;
/* raises anchor tag above everything else in div */
background-color: white;
/*workaround to make clickable in IE */
opacity: 0;
/*workaround to make clickable in IE */
filter: alpha(opacity=0);
/*workaround to make clickable in IE */
}
Here is HTML:
<div class="card card-testimonial card-plain">
<div class="card-avatar">
<img class="img" src="http://storytwirl.com/wp-content/uploads/2018/10/legal-alien-round-icon-190x190.png" alt="Animation Ideas" title="Animation Ideas">
</div>
<div class="content">
<h4 class="card-title">Animation Ideas</h4>
<h6 class="category text-muted">Stories for Films, Series, Games & More</h6>
<p class="card-description">I have plenty of ideas for animated films, TV series, web series, games, and live action. Variety of styles, variety of audiences, and variety of genres. I would love to develop these ideas with you or jump onto your idea to help to develop it into full production.</p>
</div>
</div>
Thank you Andrei Gheorghiu for answering this question! =)
This will do it:
div.card.card-testimonial {
position: relative;
}
div.card.card-testimonial a:before {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
content: '';
}
It creates a before pseudo-element on your <a> and makes it fill up the nearest parent with position:relative (which is the card). It's also rendered above everything else in the card, if nothing inside the card has a set z-index.
It practically acts as a catch-all clicks for your card, giving them to its parent, the <a>.
Note: this technique breaks if any element child of card and ancestor of <a> has position:relative and it also creates pseudo-elements for every link in the card. The card will point to the last link in its DOM in this case, as it will be placed last.
I'm not able to click links inside a div the is position:absolute. It seems to not work on mobile android as it works fine on the desktop in Chrome and even ie8.
As soon as I remove the style it works. The class msg-inner is only for jQuery which has it scrollTop no styling on it. I've read many answers and to use z-index or position:relative on the inner div but none works. I even tried using position:fixed on msg_container and same problem. The inner div scrolls and everything looks right but just the links are broken, BTW sporadically some will work and some don't. I took away all styling and just put plain links inside to see if it was a format issue and still nothing.
<div id="msg_container" class="absolute" style="overflow-y:auto;width:100%;height:75%">
<div class="msg_inner">
.... stuff in here with links
</div><!--msg inner-->
</div><!--msg_container-->
CSS
.absolute {
position: absolute;
}
Your #msg_container shouldn't have a position of absolute, the .msg_inner should. Try this:
HTML
<div class="msg_container">
<div class="msg_inner">
.... stuff in here with links
</div><!--msg inner-->
</div><!--msg_container-->
CSS
.msg_container {
position: relative;
width: 400px;
height: 400px;
}
.msg_inner {
position: absolute;
top: 0px;
left: 0px;
}
Also note that I made msg_container a class, not an ID. It's considered bad practice to have multiple ID's of the same name. While I don't know your code of course, I assumed that you might have multiple msg_containers on a page... so I used a class instead.