It seems that Admin LTE sets the min-height value for ` and also the side bar. For some reason, in my case, this value is getting calculated to be way higher than it should, which causes the side bar to be unnecessarily long. See the screenshot below.
How can this be fixed?
you need add this to this body tag
class="skin-blue fixed sidebar-mini sidebar-mini-expand-feature" style="height: auto; min-height: 100%;"
like this:
<body class="skin-blue fixed sidebar-mini sidebar-mini-expand-feature" style="height: auto; min-height: 100%;"></body>
this fix it, i have the same problem
this is a way to fix it. you can put these code to fix.js
function initFix(){
$('body').layout('fix');
}
$(function(){
setTimeout(initFix,0);
});
Related
Locally ran Basic AngularJS 1.x Example, found out if style="height: 100%;" the grid collapsed into a horizontal line. Setting it to something else like 100px works.
Everything the same except my Angular is 1.5.0, and ag-grid v8.1.0.
<div ng-controller="exampleCtrl">
<div ag-grid="gridOptions" class="ag-fresh" style="height: 100%;"></div>
</div>
JS is the same as the tutorial. Looks like a bug.
This is almost certainly due to you having DOCTYPE html in your html file.
If you do, then you need to ensure that the grids container has a non-0 height to fill, otherwise it will appear as a flat line as you've found.
This is not an ag-Grid specific issue - it's a side effect of not having quirks mode in use.
The easiest thing for you to do is this:
<style>
html, body {
width: 100%;
height: 100%;
}
This StackOverflow Question/Answer explains the underlying issue pretty well
You shall try setting the autoHeight of the ag-grid, by setting the DomLayout.
See the sample code below for angular.
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
//The ag-grid is not enlarging based on the page height,
//so dynamically adjusting the height of the grid
this.gridApi.setDomLayout("autoHeight");
}
For reference see this https://plnkr.co/edit/Jb1TD7gbA4w7yclU?preview
.ag-root-wrapper-body.ag-layout-normal.ag-focus-managed {
height: 100%;
}
I'm trying to figure out how to get this text (!) to show up. Even though it's smaller than the circle it's in, it still gets cut off about 1/3 of the way in to the circle.
I would like to use this for Outlook specifically.
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:20px;v-text-anchor:middle;width:20px;" arcsize="50%" stroke="f" fillcolor="#ffcb05">
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">!</center>
</v:roundrect>
Anyone have any ideas? I've tried overflow:visible on the circle to no avail.
More information
Using a macro to get test html into Outlook.
It is most definitely some sort of margin or padding on the v:roundrect element. After importing the HTML, I can right click, go to Format Shape, then Layout & Properties, which gives me the 4 "margin" options. Setting them to zero gives me the desired effect. The issue is that I cannot then grab this HTML, and I have no idea what property this is correlating to.
Latest code:
<v:roundrect style="height:30px;width:30px;margin:0 !important;padding:0 !important; mso-margin-bottom-alt:0 !important;mso-margin-top-alt:0 !important;mso-margin-right-alt:0 !important;mso-margin-left-alt:0 !important;mso-padding-bottom-alt:0 !important;mso-padding-top-alt:0 !important;mso-padding-right-alt:0 !important;mso-padding-left-alt:0 !important;" arcsize="50%" strokeweight="2px" strokecolor="#FFFFFF" fillcolor="#ffcb05" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word">
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;margin:0 !important;padding:0 !important;mso-margin-bottom-alt:0 !important;mso-margin-top-alt:0 !important;mso-margin-right-alt:0 !important;mso-margin-left-alt:0 !important;mso-padding-bottom-alt:0 !important;mso-padding-top-alt:0 !important;mso-padding-right-alt:0 !important;mso-padding-left-alt:0 !important;">!</center>
</v:roundrect>
I've attempted using different elements (span, p, etc..) instead of center.
Textbox with zeroed inset is the key. I had tried it before, but without nested html. Text directly input in the v:textbox element does not appear to work, so I used a center element to encapsulate text and set styles.
<v:roundrect style="height:20px;width:20px;" arcsize="50%" strokeweight="2px" strokecolor="#FFFFFF" fillcolor="#ffcb05" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word">
<v:textbox inset="0,0,0,0">
<center style="font:300 14px/15px Impact, Sans-serif;color:#FFFFFF;mso-line-height-rule:exactly;">!</center>
</v:textbox>
</v:roundrect>
It might help to solve your problem: https://buttons.cm/
You might try adding line-height: 16px; mso-line-height-rule: exactly; to the center style attributes. Outlook, particularly later versions, tends to tack on a lot of extra spacing above and below text, and won't follow your line height unless you force it.
I'm working with a number of large interchangeable style sheets. I need to use the border colour from one of the classes as the border for a div. The class in question has a number of properties, I only want the border.
Is there any way of doing this with CSS? I'd be happy with a CSS3 solution if it degrades nicely.
Of course I can use JS to do it, I know how with JQuery. But I was hoping to avoid that.
Lyle
Update: As I feared not possible, why hasn't CSS3 provided a solution to this? As I said I'm working with a number of large interchangeable style sheets, the re-factoring suggestions simply aren't workable and they'd not only be a large job in themselves, but have far reaching implications :( I'll just have to do it with JQuery.
JQuery solution (JQuery.css doesn't like shorthand, like border or border-color):
var border = $('.class').css('border-top-color');
$('div').css('border-color', border);
This is simply not possible in CSS alone, unless you alter the way the CSS declarations work.
For example:
.class1 {
background: green;
}
.class1, .class2 {
border: 1px solid red;
}
...and the HTML:
<div class="class1"></div>
<div class="class2"></div>
Or:
.class1 {
background: green;
}
.class2 {
border: 1px solid red;
}
...and then in your HTML:
<div class="class1 class2"></div>
<div class="class2"></div>
Nope. Try to refactor your stylesheets. You can add multiple classes to one element.
<div id="mydiv" class="borders black"></div>
I'm developing a GWT project, and I encountered a problematic cross-browsering problem.
When using firefox, there are problems with the display of all the pages. I found the reason why :
In UIBinder, each of my pages are wrapped by a "g:HTMLPanel" : at start and at the end of the xml file, to wrap the content of all the pages
When doing this, the generated code of the panel goes like this :
div style="width: 100%; height: 100%; ....
The problem is that "height : 100%". If I remove it with firebug, the display is perfect.
So my goal is to programatically remove that generated 100% height.. But no way to do it !
I tried everything : setHeight, setSize, working on the Element itself with getElement().methods()... I tried to do things like style.clear(), everything that could have a chance to work.. But in the generated code that "height: 100%" will ALWAYS be there. If I set it's height to "50%" or "50px" it has no effect at all.
I even tried to give it an ID, then with pure javascript to change it's style, but no solution either..
Note : I'm sure that I'm working on the right element : adding a styleName, for example, works well.
Any idea ?
Your help would be really appreciated, I have no clue of how to remove this bit of generated code, and I've been looking for hours already :(:(:(:(
Best regards,
Nils
I just inspected some of the code generated by GWT from my uibinders in firebug and < g:HTMLPanel > isn't adding any width or height styling.
I don't have < g:HTMLPanel > as the root element in my uibinder though, I have my own class.
<a:FormPanel ui:field="form">
<g:HTMLPanel>
<input type="hidden" ui:field="discoveryId" />
<table cellpadding="2" cellspacing="0" class="{widgets.gridPanel}">
<tr>
<td>Name:*</td>
What about using say FlowPanel as your root uibinder class instead, then HTMLPanel?
Failing that you could always use the !important css rule to override the ones assigned on the div.
.myHTMLPanel {
width: auto !important;
height: auto !important;
}
This can be due to the fact that an HTMLPanel is wrapped into a DeckPanel. A DeckPanel adds "height: 100%" and "width: 100%" to the elements.
After showing the widget, add the following code:
deckPanel.add(widget);
deckPanel.showWidget(0);
Element e = DOM.getParent(widget.getElement());
DOM.setStyleAttribute(e, "height", "");
DOM.setStyleAttribute(e, "width", "");
widget.setHeight("");
widget.gwtContainer.setWidth("");
Wordpress wraps images with captions in a div with a class of .wp-caption.
I'm looking for a way to select images that don't have this div so I can wrap them in different div. (to keep a consistent border around all the images)
<div class="blog-post-content">
<div id="attachment_220" class="wp-caption alignleft" style="width: 310px">
<img class="size-medium wp-image-220" src="/path/to/image" alt="" width="300" height="280" />
<p class="wp-caption-text">Caption Text</p>
</div>
<p>This is the body of the post</p>
</div>
To test my selector, I'm just trying to add a green border. I can handle the .wrap() once the selector is working.
The most promising of my attempts is:
$('.blog-post-content img').parent('div:not(".wp-caption")').css('border', '2px solid green');
... but no luck.
How about this: (untested)
$('.blog-post-content img').filter(function(){
return !$(this).parents('div').hasClass('wp-caption');
}).css('border', '2px solid green');
try:
$('.blog-post-content img').parent(':not("div.wp-caption")')
Not if what Matti says abotu the a element in the hierarchy then the above wont work.
I know this question was asked a long time ago, but I would like to suggest the following:
$('.blog-post-content img').closest('div:not(".wp-caption")')
Untested, but I think that should work, and is shorter than the answer above that works. Using closest means the a is ignored.