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
Related
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.
I have a Wordpress blog where my featured images & videos extend outside of the post, but I've run into a problem.
Whenever I'm embedding videos outside of YouTube, the embedding messes up completely. And I'm not sure why.
I have two examples here, please check the link: https://imgur.com/a/4wnjY
The css line that controls the width is .fluid-width-video-wrapper, and the code is:
width: 113% !important;
height: 51px;
margin-left: -6.4%;
Live demo here:
Correct article: https://www.droppet.se/visuellt/en-man-uppfostrar-en-ekorre/
Incorrect article: https://www.droppet.se/sport/cavani-och-mbappe-kombinerade-till-ett-drommal/ (password wvideo)
Change the width: 113% to 100% and get rid of margin-left
.fluid-width-video-wrapper {
width: 100%;
height: 51px;
/* margin-left: -6.4%; */
margin-bottom: 7px;
}
Your container is the desired size.
The problem is inside the iframe; the div .media-container has these CSS rules, which prevent the video from being the full width of the framed document:
height: 56.23vw;
max-width: 177.85vh;
Removing the max-width rule from that class corrects the problem.
But since you're framing a third-party site, you won't be able to remove that class; instead you'd need to tweak the height of the iframe so that the framed site's rules match your layout. Changing your .fluid-width-video-wrapper height to any height larger than 85px seems to do it. (May not be the ideal way to fix this, though; I haven't looked closely enough at the rest of your code to understand why that height rule exists.)
I want to make my header fixed. But my header is overlapping my body content. I know there is a way to fix it, adding padding. But for some pages, I have to add padding-top: 20px; and for another page I have to add padding-top 50px;
Also, for responsive I have to keep change the padding-top. Anyone know how do it in dynamic way?
#top-header-wrapper {
background-color: gray;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
If you are using a header element with the position value of fixed; as you've notice it will sit "on top" of the proceeding element.
Using the padding-top property is one way of making sure to ensure that your header doesn't 'block' content on the proceeding element (let's pretend it is a section element):
header ~ section {
padding-top: 50px;
}
Like you've said, one issue is that if the header does not have a static height (which it probably should) and when switching viewport sizes, you have to change the padding-top value.
Personally, I don't think that's so much of an issue, since media queries are easy to use.
With CSS, it is your only option, however. That are ways to use javascript to get an elements height and set the padding-top of another element to the first elements height, but since you are asking about css, your best bet is to use #media rules.
No matter what screen size I use, the Sidenav is always the same size. I tried adding attributes such as
- flex
- flex="85" (to get 85% of its container)
Can't seem to find a good approach.
In angular material, md-sidenav has these attributes:
width: 304px;
min-width: 304px;
That's why the width will be fixed at 304 px no matter what device you use.
So if you want to change your sidenav width you'll have to change the css a bit.
If you're fine with supporting only modern browsers, you can change it to a vw measure (1/100th of the viewport width) and add it to a separate css file. The code will look something like this:
md-sidenav,
md-sidenav.md-locked-open,
md-sidenav.md-closed.md-locked-open-add-active {
min-width: 200px !important;
width: 85vw !important;
max-width: 400px !important;
}
Here's a plunker: http://plnkr.co/edit/cXfJzxsAFXA3Lh4TiWUk?p=preview
The answer submitted by user3587412 allowed me to change the width but I was having the same problem as Craig Shearer with it killing the animation. So I tried a few different things and came up with this.
md-sidenav.md-locked-open {
width: 250px;
min-width: 250px;
max-width: 250px;
}
I'm not sure if that is the proper way but it seemed to work for me.
Thanks to user3587412 I could find easily the required styles.
To get the md-sidenav to adjust to a flex parent just override
md-sidenav,
md-sidenav.md-locked-open,
md-sidenav.md-closed.md-locked-open-add-active {
min-width: 0px !important;
width: auto !important;
max-width: none !important;
}
After trying different CSS in this thread I end up with :
md-sidenav,
md-sidenav.md-locked-open-add-active,
md-sidenav.md-closed.md-locked-open-add-active,
md-sidenav.md-locked-open {
width: 200px;
min-width: 200px;
max-width: 200px;
}
I'm currently on angular-material 1.0.8 and tested with Chrome 50 only.
With this CSS what works for me :
Animation close and open OK
When locked OK
When not locked OK
In case anyone comes here using the latest mat-sidenav, you can explicitly set the width on the the element.
mat-sidenav {
width: 200px;
}
The docs caution against using percentage based sizes.
https://material.angular.io/components/sidenav/overview#setting-the-sidenavs-size
Here's a somewhat "jank" solution, but it doesn't mess with the animations at all. The sidenav automatically resizes itself in order of the items inside it to fit perfectly. As such, you can just add a span with the width of your choice to the mat-drawer to set a minimum size. Note that this only works to set a minimum width, and not a maximum width.
<span style="height: 0px; width: 200px; display: inline-block;"></span>
I came across this issue, as well -- even though the 304px width is plenty, I had a card in the content area to the right that was squeezing the sidenav. So, using the flex grid I was able to add <md-sidenav flex="15" class="md-sidenav-left ... to get the width I wanted without overriding CSS. It sounds like this didn't work for you, so maybe it has to do with the layout options in your design...
Please tell me how can I create a Richfaces page where I want to keep the collapsible panels fixed and below that I have another form. As the form is very large. So I want to put a scroller. Do I need to use frameset or is there any support for that in Richfaces
Nothing jsf-specific. That is usually done via CSS:
create a <div class="limitedHeightDiv">
define the css class in a css file:
.limitedHeightDiv {
height: 100px;
overflow: scroll;
}
(You can define these styles inline, using style=".." as well)
#Bozho
.limitedHeightDiv {
height: 100px;
overflow: auto;
}
Will work a way better, in the previous case you will have scroll bars even if you don't need them. I guess it is just a question of different design and flavors.
auto