I'd like to have my website including v-app-bar and everything limited to max-width 1440px on larger screen, and add a thin bolder to both left and right edges. For the rest of the area outside of the edge, I'd like to add a nice background color or image.
What's the better way to accomplish this idea? I am using Vuetify v2.1.5. Thanks.
You can do this with plain 'ol CSS
#page {
background: url(niceimage.jpg);
width: 100vw;
min-height: 100vh;
}
#app {
max-width:1440px;
margin: 0 auto;
}
where #app is your application div, and #page is an element that wraps it;
The Pinterest Widget Builder allows for flexibility in creating a widget to place on your site. I added one on this page, but there appears to be a limit to the width you can set for the widget. For example I set the width to 1170, but it is only displaying at 1111px.
Here is the code:
<a data-pin-do="embedUser" href="http://www.pinterest.com/rouvieremedia/" data-pin-scale-width="180" data-pin-board-width="1170">Follow Pinterest's board Pin pets on Pinterest.</a>
This is a Bootstrap site and I would really like to be able to make this widget responsive as well. I tried applying css styling to the widget just to see if I could impact it using this. Alas, no luck.
div.container > span.PIN_1407891215996_embed_grid.PIN_1407891215996_fancy {
border: 5px solid red;
}
Any suggestions for interacting with this element would be appreciated. Then I can apply some additional styling.
Wrap your widget in a container, e.g. #pinterest-container, and add the following styles:
#pinterest-container > span {
width: 100% !important;
overflow: hidden;
}
#pinterest-container > span > span > span > span {
min-width: 0;
}
The first one overrides width which is otherwise fixed, making it responsive. The second one deals with an issue where the last column is not displayed if the widget is very narrow.
The width of the widget depends on a number of factors:
The width of the enclosing element: you can't exceed that width
A multiple of the data-pin-scale-width + padding: the width of the widget won't pad right. It'll be exactly the size of the multiple of the items inside + small padding left and right, and the padding between the items
And given the above, the data-pin-scale-width obviously
So if you want an exact width of 1200, try the data-pin-scale-width="195". That should do it, assuming the enclosing element is larger.
Here's a solution I came up with: http://pastebin.com/kXVDWUu8
I suggest including the following style:
#pin-container > span {
box-shadow: none !important;
width: 100%;
overflow: hidden;
}
To make the Pinterest widget responsive, this is the solution that worked for me. Taken from here.
CSS
#pinterest-container {
display: flex;
}
#pinterest-container a {
flex: 1;
}
I have a little menu that should expand to reveal the HTML below, which is hidden at present.
Following jQuery:
$('.mobileMenu').click(function(e) {
$(this).toggleClass('arrowDown').next().slideToggle('slow');
});
This piece of code works great on this page (click the "hide" feature on the left col)
However I need to utilise the same feature with my menu for "mobile width".
If you resize your browser down to 320 or so and go here you'll see the menu is just +menu (bit smashy at the mo but working). Click it, and the menu does expand to show the links, but they are hanging over the main content area.
All divs in the navigation div are display:block but they still don't push the main div down. I want the entire green navigation div to expand with it's content.
You have a fixed height on the navigation div of 60px and menuWrapper at 30px. You need to make this relative.
change your css from
#rightCol {
width: 72.5%;
float:right;
}
#leftCol
{
width: 25%;
float:left;
}
to
#rightCol {
width: 72.5%;
display:inline-block;
}
#leftCol
{
width: 25%;
display:inline-block;
}
it should work. I have tested this on chrome
I'm using twitter bootstrap dropdown menu in a fixed navbar at the top of my page.
It all works fine but am having issues with the drop down menu items showing behind other page elements rather than in front of them.
If I have anything on the page with position: relative (like jquery ui accordion, or a google chart) then the drop down menu shows behind it. Tried changing the z-index of the dd menu and of the nav-bar, but doesn't make any difference.
The only way I can get the menu to sit above the other content is to change the content to position: fixed; OR z-index: -1; -but both of these solutions cause other problems.
Appreciate any help you can give me.
I think this is probably some standard issue with CSS positioning that I've misunderstood, so haven't posted any code, but can do if needed.
Thanks.
Just realized what's going on.
I had the navbar inside a header which was position: fixed;
Changed the z-index on the header and it's working now - guess I didn't look high enough up the containers to set the z-index initially !##!?
Thanks.
IE 7 on windows8 with bootstrap 3.0.0.
.navbar {
position: static;
}
.navbar .nav > li {
z-index: 1001;
}
fixed
Ran into the same bug here. This worked for me.
.navbar {
position: static;
}
By setting the position to static, it means the navbar will fall into the flow of the document as it normally would.
This will fix it
.navbar .nav > li {
z-index: 10000;
}
In my case in addition to z-index I had to set overflow: visible in parents elements
I had the same problem and after reading this topic, I've solved adding this to my CSS:
.navbar-fixed-top {
z-index: 10000;
}
because in my case, I'm using the fixed top menu.
Still the issue with Bootstrap v3, navbar and dropdown have same z-index ;-( I just increased .dropdown-menu z-index to 1001.
Solved by removing the -webkit-transform from the navbar:
-webkit-transform: translate3d(0, 0, 0);
pillaged from https://stackoverflow.com/a/12653766/391925
Just give
position: relative;
z-index: 999;
to the navbar
This fixed it for me:
.navbar-wrapper {
z-index: 11;
}
Solved this issue by removing transform: translateY(50%); property.
This worked for me:
.dropdown, .dropdown-menu {
z-index:2;
}
.navbar {
position: static;
z-index: 1;
}
I had the same problem, in my case because i forgot this in my NavBar style:
overflow: hidden;
I ran into a situation where a button with a Bootstrap drop down was embedded in a DataTables row. In that instance, I had to remove fixedColumns: true in the settings because that was injecting a position: sticky into the element style.
Did not work:
$(document).ready(function () {
var table = $('#order').DataTable({
fixedColumns: true,
fixedHeader: true, ...
Did work:
$(document).ready(function () {
var table = $('#order').DataTable({
fixedHeader: true, ...
I'm late to the party here but for anyone using the bootstrap sticky-top class beware that it's z-index is higher than what is defined for the dropdown so anything within it will bleed through the dropdown's menu.
https://github.com/twbs/bootstrap/issues/31747
This was my scenario and the other answers here that referenced position: sticky put me onto it.
In my case, this was caused because I had a CSS animation with transform operations applied to a parent <div>. I worked around the problem by moving the animation to a different element.
i have an element with the following css attributes:
.myElem {
position:absolute;
width: 100%;
top: 25px;
height:6px;
padding: 1px 0px;
}
please see this screen shot i uploaded
when looking at the layout tab of the firebug inspection....i noticed the '-13' at the bottom...where is it from? what does it mean? i did not specify it...why is it showing there? what does it tell me about 'bottom'? or it means something else?
It's show position from bottom in minus if the position from top overlap or more than his parent.
Check this example http://jsfiddle.net/wqrh6/
in this when .myElem position top overlap his parent then the firebug show position from bottom