I am having problems modifying the template for the Android page provided as example(code can be found here). I want to make the navigation bar on top transparent. The problem is there is nothing behind it, so it does not really change. The fix would be to make the navigation bar part of the page. As you can see currently the scrolling bar starts after the navigation bar, while I would like to make the navigation bar be part of the scrollable part of the page. I tried removing all relevant mdl header classes from the HTML which resulted to no effect. I found out that material.min.js (provided as part of MDL) makes the navigation stick on top of scroll bar but I am not very good at JS and I am not sure which part I need to modify to achieve what I want. I am also open to a solution that does not modify material.min.js but uses a custom JS/CSS.
A little help to you.
Same matter happened to me. For a fixed navigation bar which will stick on the top you can do a little trick to the material.css file.
Change the .mdl-layout__header class from
.mdl-layout__header { display: -webkit-box;display: -webkit-flex;display:ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column; and goes on
to
.mdl-layout__header {position : fixed; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column;
The added property is position : fixed; to the mdl-layout__header class
Hope this helps :)
Related
I'm designing a product page on Wordpress, using the Elementor and Woocommerce plugins.
I got a product data tabs made of an unordered list items from Woocommerce that shows the Description, More info and Reviews horizontally, and I'd like to style it to appear vertically with the Description, More info and Reviews text in the right of the tabs/titles.
This is the page I'm working on: This is my product page.
And I'm trying to make the Product data tabs similar to those here: This is the model page I'm learning from.
I tried to add this code in Atom, the program I'm using to edit the CSS code of the website, but it didn't help much:
.woocommerce div.product.elementor ul.tabs {
display: inline-grid;
}
.tabs .wc-tabs {
display: inline-grid;
}
.woocommerce-Tabs-panel .woocommerce-Tabs-panel--description .panel .entry-content .wc-tab {
display: inline-grid;
}
.woocommerce .elementor-4060 .elementor-element.elementor-element-6b584e4 .woocommerce-tabs .woocommerce-Tabs-panel {
display: inline-grid;
}
Can I customize the unordered list to make it vertical like in the example I'm learning from with just CSS, and to have that black line under the title from the model page that grows bigger only on hover? Editing the HTML file is a bit harder since I'm working in Wordpress and I'm not customized to doing that but I could try, and I don't have any knowledge of Javascript yet (if it's required, though I can edit the Javascript file of the website).
If you inspect the code, you can see that this styling is causing elements to align like that. Try to change display to flex
Try this
ul{
display: flex;
flex-direction: column;
align-items: center;
}
I am using the tabs component of Version 4 of Blueprintjs, and would like to display the tabs on the bottom of the panel as is typically done in a spreadsheet. There is a setting for moving the tabs to the left side, but I don't see a way to put them on the bottom.
Is this possible?
You can try to add custom styles for .bp4-tabs like:
.bp4-tabs {
display: flex;
flex-direction: column-reverse;
}
so I want to implement 'Read more' on my friend site.
I achieve effect that I wanted but when I started changing the box alignment the 'Read more' effect got hit.
Before: https://codepen.io/szlvga/pen/poNOqpO
After: https://codepen.io/szlvga/details/yLVQQoY
I want it to affect only the box that I'm click 'Read more' button like on the first Codepen and not all the boxes in the row like on the second Codepen.
How to achieve that? Thanks in advance.
Everything is on codepen.
Your jQuery code is correct, the problem is your layouting and more specifically flexbox. Your .row class has align-items: stretch, so when one item expands, all others in the same row will expand to fill the stretched space.
This snippet will fix your problem:
.row {
display: flex;
width: 100%;
flex-direction: row;
align-items: flex-start; /* < Align items to top, don't stretch them! */
flex-wrap: wrap;
}
You can read more on flexbox and the align-items property here.
So I'd like to have a popup on my page. I would like to style it with flexbox. I'm using scss to style things and I have mixins for flexbox properties.
The issue I came across is that I want to have flexbox properties applied to my popup such as display: flex which has it's browser variants:
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
When I try to change css to display: none my browser overrides it with display: -webkit-flex; so I'm still not hiding my element. I thought about using visibility but since jquery uses .show and .hide with display and not visibility it kind of seemed like a wrong tool.
Should I somehow override the jQuery .hide() to change the other display properties as well or maybe create the element each time I want to display it and then delete the html of it after submit?
I have my scss with this overlay-content styling:
.overlay-content {
/* this may or may not be here */
/* visibility: hidden; */
#include flex();
#include flex-direction(column);
#include flex-justify-content(flex-start);
}
And I'd have a code which triggers when I want to display my popup:
$('.overlay-content').css('visibility: visible;');
$('.overlay-bg').css('visibility: visible;');
Is it okay to use the visibility css property or should I always use the display property to change the visibility of the element?
What bothers me is that this way I can't use the cool jquery.hide() options for cool user experience
I've run into the same issue and solution I came up with may not be the most elegant but it does the job.
I simply called .hide() in the initialization code of the component. jQuery adds inline display: none to the element, and subsequent call to .toggle() removes it, so specified in the stylesheet display: flex comes into play.
Jquery Scrollable is a tool by Jquery Tool that scrolls a list of images/videos
http://jquerytools.org/demos/scrollable/
But I am just wondering, has anyone of you tried to customize it with a scroll bar. What I mean is we want to use Jquery scrollable for the following page
http://www.space.ca/Face-Off.aspx
But we want to keep the scroll bar in the bottom, rather than using the left and right arrow to scroll through the video carousel.
Would that be possible? If you have done a customization of JQuery Scrollable and using the scroll bar , Please share some tips with me
Many thanks
You could archive this using plain css:
<div class="scrollMe">
<div>Do what ever you want</div>
</div>
And then just make sure you css is in order:
.scrollMe {
overflow-x: hidden;
overflow-y: scroll;
white-space: nowrap; /* this is important for you, this means that you will keep everything in a single line which will make this guy scroll on the y-axis. If you need multiline on the childs you need to set: white-space: nowrap; on the childs */
}
And all your block level childs needs display: inline-block;:
.scrollMe > div {
display: inline-block;
}