I'm trying to follow this tutorial in creating a slide in navigation, and I have the following stackblitz. The side nav is toggleing, but it is not expanding to fit the page. IIUC this CSS class is supposed to do the trick (In styles.css):
.container {
position: absolute;
top:0px;
left:0px;
bottom:0px;
right: 0px;
}
Thoughts?
.container {
position: absolute;
height: 100vh;
width: 100vw;
top:0px;
left:0px;
bottom:0px;
right: 0px;
}
let me know if that helps, it looks like it works but i don't know exactly what you want, and optionally
padding: 0;
margin: 0;
on the body element to remove the scroll bar.
I have run into many similar issues working with Angular Material. The issue stems from AngMat dynamically generating custom components and classes at render time, so it's often hard to catch these things up front.
If you open the dev tools and select the opened menu, you can find the custom component, <mat-drawer class="sidenav mat-drawer..."/>, This is the piece that is preventing the full width menu. If you manually apply a width: 100% on that component it will snap into place.
There are two approaches I've found, neither of which are ideal solutions. You can look into ::ng-deep and how to override angular material styling by disabling view encapsulation, this is a pretty deep concept when it comes to shadow doms and everything else associated but you don't need to know all of that to know that you can override the styles with the approach. However this will be deprecated at some point. The other approach is a hard-coded width:100% applied directly to the component. So something like mat-drawer { width:100% } in the top level stylesheet.
Related
I have a simple fixed header, that seems to be shifting up when the body is scrolled a slight amount, but only on the homepage (and only on mobile display). Other pages are okay, so I assume it's related to an element being shown/not shown on one instance and not the other.
I can't figure out a fix for the homepage to make it stay fixed.
http://dev.bellavou.co.uk (best to inspect and use responsive design mode to view on mobile).
http://dev.bellavou.co.uk/request-a-consultation/ This shows the header staying fixed when scrolling fine.
Can anyone help identify where the issue lies?
body.fixed-header #header {
position:fixed;
z-index: 100;
width: 100%;
top:0;
}
The problem with height is caused by CSS classes that is triggered below certain point.
And it is caused by additional minimal CSS class that is added to <header> and affects many elements below in DOM structure.
You can see that for example #branding is affected by added minimal CSS class.
By the way, as you can see your header doesn't really have 100% width.
It's because it's CSS:
body.fixed-header.home #header {
width: calc(100% - 15px);
}
Changing above to below fixes the issue.
body.fixed-header.home #header {
width: 100%;
}
You styles are overwritten:
With width: 100%:
In situations like that always remember to check dev tools and track down actual, final, computed CSS styles. :).
I have a dynamic created page with a panel which contains this:
<div class="x-panel-body x-panel-body-default x-panel-body-default" id="panel-1026-body" style="left: 0px; top: 0px; width: 1819px; height: 29px;">
I want to change the width of this panel, but the problem is that the width is not being overwritten.
What I have tried to do in my css is:
#panel-1026-body {
width: 400px;
}
This does not work, since the width still stays 1819px as auto-created by the panel. How ever, it seems that it is only the width: that it won't accept, if I fx. add a margin-left: 400px; or background-color: red; it works.
Does anyone know what might be the cause of the width not taking effect?
I have provided the info that I think is relevant, but please let me know if you need more info
Thank you
It is because when your set a value in your element like style="left: 0px; top: 0px; width: 1819px; height: 29px;", it will be prioritary on the CSS.
Rapid solution :
#panel-1026-body {
width: 400px !important;
}
But it's a very bad pratice to use !important
Cool solution
Try to remove all the style of your element and put it into a CSS class. After, put your CSS code, who will be prioritary on the code before.
inline-styles have greater specificity so with normally you can't override that. You need to use !important:
#panel-1026-body {
width: 400px !important;
}
And yes margin-left or background-color works as these are not defined in that inline-style.
Changing a complex component dimensions (panel, grid, tree, etc.) with CSS is generally not a good idea in Ext. The dimension you see in the DOM, in your case 1819px can also be set on some children of the panel depending on layout.
Thus, you would need to use css that addresses main container div plus all necessary children. Such solution is very vulnerable because the DOM structure can (and it does) change with Ext upgrades - sometimes even minor upgrades may introduce a change of DOM.
You should always set dimensions programmatically calling panel.setWidth(), panel.setHeight(), panel.setSize() or similar. Ext then takes care about itself and sets the width to all DOM elements it needs.
As all suggested in this topic, the solution was to add:
width: 400px !important;
This solved my problem. Gratitude to all that helped
I'm new to this stuff and trying to design a mock car sales website for a project, but I need some help, bearing in mind a beginner, I have designed a basic layout with divs, and I want to put a badge in the top right of the banner, but the logo went in fine using the following and CSS:
img.logo
{
position: relative;
top:15px;
left: 24px;
}
But when I try to put in a "badge" in the right hand side it moves the logo?
Anyknow know how to keep them both on the same line, also in general whats the best way to postion elements within a webpage? CSS or seperate divs?
when using different div's you should use float:right; and clear:both; in the next element.
but try to set it as a background-image:
background-image:url('./url/to/file.png');
background-repeat:no-repeat;
background-position:right;
to answer your general question: both!
use div's and position them with css.
Hard to say without the knowing the html but I would look at display:inline-block and float:right
CSS is cascading style sheets, and it is a styling language. A div is a tag belonging to the markup language HTML.
I would encourage you to follow tutorials on both css and html. There are a gazillion online. Also, make sure you learn how to inspect web pages and view source, so you can learn from what others have done. Best of luck in your endeavors!
Try to use
img.logo
{
position: absolute;
margin-top: 100px;
margin-left: 100px;
}
just change the value of margin-top and margin-left until you place it on your desired position. you can also use negative ex. -100px;
So I'm making a jQuery slideshow using the jQuery cycle plugin.
Part of the code generates an <input type="button"> with a value from 1 to i (where i equals the total number of slides)
I'm trying to style these buttons so that they appear on top of the image in the slideshow. However when I try to absolute position the buttons they all stack on top of each other. I understand why this is happening, I just don't understand how to get around it.
This is how I'm targeting the buttons the JavaScript is generating.
input[type=button] {
position: absolute;
left: 400px;
}
How do I prevent the buttons from stacking?
If Position is absolute, you must define left and top for each separately, else it will stack up,
Or you may use position:relative with margin:5px; float:left;
thank you,
Instead of trying absolute positioning, try floating the image.
input[type=button] {
position: relative;
float: center;
padding: 10px;
}
This should eliminate the stacking and you can also easily add borders and customize this to be whatever you want. This is just a general description of what I thought was necessary .
I used tags instead of buttons, but I don't think it should make too much of a difference. Anyways, if you want to go about making it vertical, I would just go like this:
HTML:
<h1>Example</h1><br />
<h1>Example1</h1><br />
<h1>Example2</h1><br />
CSS:
h1{
position: relative;
float: none;
padding-bottom: 10px;
}
This is fairly simple CSS work so it won't take you too far, but this is a good start. Also, I would never recommend using absolute positioning unless you're only dealing with one object instead of several since it creates a stacked look. Hope this helps.
I have built a small breadcrumbs example cloning some functionality from Google's design. I have been looking to get the arrows to display on top of each-other so there isn't any white space. I have tried negative margins, possibly positioning but I wasn't able to get anything working.
Below is a link to Google's working example, along with my current demo example and a screenshot of why the breadcrumbs aren't working currently. Appreciate any help, I'm also happy to clarify anything!
Google's working example
Demo(taken offline sorry!)
Current bug screenshot:http://f.cl.ly/items/3H2Z3S3R2v0H3V1r3S3L/breadcrumbs-error.png (sorry this was also deleted!)
The Google implementation is using postion: relative; margin-left: -13px in the CSS but at the same time they are using inline styles to give a different z-index to each link like this: image
Use javascript or your backend script to loop through each link and give each link a lower z-index.
try this:
.crumbs li {
display: inline;
float: left;
margin-right: -11px;
position: relative;
}
so they fit on eacht other. now add this:
.crumbs li:nth-child(1) {
z-index:10;
}
.crumbs li:nth-child(2) {
z-index:9;
}
.crumbs li:nth-child(3) {
z-index:8;
}
etc
the only problem is, nth-child is css3, so it's bad for your cross browser support.
You could also add classes to ever li, like "li.first li.second li.third" etc and give them decreasing z-indexes. Then it should work
Well, Google's use sprites, relative positioning and incremental z-indexes. I think you should go with the same technique. They implement the z-indexes as inline styling with the style="" attribute, which seems acceptable in this situation, especially if they are generated with PHP later on.
Another (somewhat shoddy) way of doing it is to add a wrapper that has the same background image. e.g.
<li>
<div style="float: left; background-image: url('img/bg-crumbs.png');">
2011 Writing
</div>
</li>
for all but the last one.
Add an left: -12px; to the styles of the li elements of the breadcrumb. That would only work if their position is set to relative;
Additionally, for my solution to work, add a PHP or JavaScript for example which add to each element style="z-index: 10;". The script should automatically increase the z-index property. If you are making the blog static etc. with no PHP or JavaScript set the z-index manualy.