I have some HTML being generated in the controller and passed to the view to be added to a "SlickGrid". The problem I'm having, is that the CSS styles that SHOULD be applied are not being applied to that HTML. It's happening in a couple of instances, all with the same symptoms.
The HTML that is displayed is this (taken from Chrome's inspector tool):
<div id="pba-progress-688-5" class="checkpointLegend clickable A tipper" title="Approved<br><i>Composition Table</i><br>Click to go to this checkpoint.">✓</div>
The classes clickable, A, Tipper are not being applied, AND there is some checkpointLegend stuff that is not being applied as well.
checkPointLegend looks like this:
.checkpointLegend {
text-align: center;
vertical-align: middle;
font-weight: bold;
cursor: pointer;
}
.checkpointLegend div {
border: 1px solid #CCC;
border-radius: 4px 4px 4px 4px;
float: left;
height: 14px;
margin: 2px;
width: 12px;
font-size: 10px;
text-align: center;
line-height: 14px;
cursor: pointer;
}
The .checkpointLegend portion IS being applied, but the DIV part is NOT being applied.
Any thoughts as to why these classes are not being applied to the HTML when it is rendered?
For reference:
I'm using a fork of SlickGrid (https://github.com/andrewchilds/SlickGrid)
The CSS works fine in a WEBGRID (so I know it works), but the webgrid is too slow to handle the amount of data I'm throwing at it.
The controller generates the HTML and passes it to the view via an ajax call. The html is dumped directly into a cell in the slickgrid.
I'd be happy to clarify anything that needs to be clarified, or post more code if needed.
Any thoughts/pointers/suggestions/solutions would be GREATLY appreciated (I've been banging my head off my desk for 2 days on this...)
Related
I’m tasked with developing a widget with buttons in SmartGWT (enterprise). The design calls for borders around the buttons. I’ve designed the CSS for this. However, SmartGWT insists on overriding my CSS border definition by filling in the “style” attribute on the generated TD. The docs for Canvas.setBorder actually say “This property applies the same border to all four sides of this component. Different per-side borders can be set in a CSS style and applied via styleName.” Clearly, it’s meant to be able to control border definitions with CSS.
I realize that I could just call setBorder with a concrete border definition, but I need to have different borders based on state (hover, down, etc.)
For example, the button label is “Review”. Here is the generated HTML:
<td class="controlButton" style="border: currentColor; border-image: none; text-align: center; padding-top: 0px; padding-bottom: 0px; vertical-align: middle;">
<div style="vertical-align: middle; display: inline-block; white-space: nowrap; max-width: 100%;">
<div id="isc_1G" overflow: hidden; vertical-align: middle; display: inline-block; -ms-text-overflow: ellipsis; max-width: 100%; box-sizing: border-box;">Review</div></div></td>
In my CSS, I have a class (controlButton) defined with a border, but the explicit border declaration in the “style” overrides it.
Here’s the code where I create the button:
Button button = new Button(“Review”);
button.setBaseStyle(“controlButton”);
button.setBorder("inherit");
button.setHeight(28);
I’ve also tried not calling setBorder, calling setBorder(null), and as above, setBorder(“inherit”). Nothing affects the inline style.
Here’s the CSS (omitting all of the state definitions for brevity):
.controlButton {
background-color: #353535;
text-align: center;
font-size: 14px;
vertical-align: middle;
padding: 2px;
margin: 2px;
border-radius: 5px;
border: 1px solid #b9b9b9;
color: #d5d5d5;
}
In the browser’s programming mode, I can manually un-check the border definition in “inline style”, and my button looks correct using my class CSS.
By the way, I realize that I can use the !important modifier on the CSS, but there must be a way to make SmartGWT stop overriding without it.
The SmartGWT version is 4.0.5.
The GWT version is 2.7.0.
I have a right sidebar in my design that pulls in testimonials dynamically, if there are any.
The HTML looks like:
<h4> dynamic content</h4>
Here is my CSS:
#testimonials {
background: #eeeeee;
padding: 30px;
width: auto;
height: auto;
}
#testimonials h4{
font-size: 20px;
line-height: 30px;
font-family: "freight-big-pro";
font-style: italic;
border-bottom: 1px solid #666;
padding-bottom: 20px;
padding-top: 20px;
}
#testimonials h4 strong{
display: block;
font-family:"freight-sans-pro", sans-serif;
font-style: normal;
font-size: 12px;
}
The issue is that when there is no content in the <h4> element, the style is still being picked up and adds a background and a border as specified in the CSS. I am assuming that it's generating the h4. Is there a way to have it be empty if there is not any content?
Update:
I am trying this and it seems to work in jsfiddle, but not in the file:
<script type="text/javascript"> $(document).ready(function(){ if ($("#testimonials").text().length < 65) { $('#testimonials').hide(); } });</script>
It counts the HTML inside as text, I think.
Update
Here is another JsFiddle, but this also probably won't work for the OP as it uses jQuery.
jQuery
//onload:
checkStyle();
//checks if the h4 is empty, and hides the whole div if so.
function checkStyle ()
{
if ($('#testimonials h4').is(':empty'))
$('#testimonials').hide();
else
$('#testimonials').show();
}
This does not necessarily work for what the asker is looking for, but could be beneficial for future readers. It is for not styling the h4, not the parent div as op wants.
Assuming you are ok with CSS3, and the <h4> is literally empty, you can modify your CSS to use the :not and :empty selectors.
CSS
#testimonials h4:not(:empty) {
font-size: 20px;
line-height: 30px;
font-family:"freight-big-pro";
font-style: italic;
border-bottom: 1px solid #666;
padding-bottom: 20px;
padding-top: 20px;
}
#testimonials h4:not(:empty) strong {
display: block;
font-family:"freight-sans-pro", sans-serif;
font-style: normal;
font-size: 12px;
}
Here is a JsFiddle. You can add content to the h4 to see how it works.
Alternatively, you could even do the opposite, and have a display:none; for empty <h4>s:
#testimonials h4:empty{
display:none;
}
Give #testimonials a display: none; property in your CSS; then, just before whatever Javascript code you use to pull in testimonials finishes running, have it check whether it actually retrieved any, and set display: block; on #testimonials if so.
Somewhat related: When asking questions on Stack Overflow, it's ideal to post as much information as possible, as for example the code you're using to retrieve testimonials dynamically -- it's mentioned in the question and its behavior affects what you're asking about, which makes it well within scope. If you'll update your question with your testimonial-retrieving code, I'll update my answer to show a specific solution.
Do a display:none on your css initially when there is no content.
Use javascript or jquery to show content. Styling will be applied when the content gets displayed.
Initially when there is no content:
#testimonials {
background: #eeeeee; padding: 30px; width: auto; height: auto;
display :none;
}
When content gets generated dynamically use:
$("#testimonials").show();
This seems like alot of front side work when it isn't needed. If you are able to output content into the h4, then you are able to output and additional tag.
<section id="testimonials"></section>
Server Side pushes out:
<h4>all my content</h4>
Then your CSS will work without any work from js.
Most likely you have one for each testimonial?
I'm working on a project to upgrade a system to use the button tag rather than regular submit buttons. For the formatting of the buttons, I have the following CSS classes:
button::-moz-focus-inner {
border: none; /* overrides extra padding in Firefox */
}
button {
background: transparent url('images/greenrightbutton.png') no-repeat scroll top right;
color: #FFFFFF;
display: block;
font: normal 12px arial, sans-serif;
height: 25px;
padding-right: 8px; /* sliding doors padding */
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin: 0px;
text-decoration: none;
border: 0px;
overflow: visible;
}
#loginbox button {
float: right;
}
button span {
background: transparent url('images/greenleftbutton.png') no-repeat top left;
display: block;
line-height: 18px;
padding: 4px 5px 5px 12px;
margin: 0px;
border: 0px;
}
They work absolutely perfectly in every browser except IE8.
In IE8, the buttons work in most places, but then I find a page where the two background images don't quite line up and no amount of tweaking padding, line spacing etc fixes it.
Does anyone know why this might be the case?
Demo page: http://test6.placement.co.uk/demo/test.asp
---Update---
After some fairly extensive testing and trying things, I've now got a pretty fair idea of what's causing the problem in page 1, but no idea how to fix it, while another page with the same issue has a completely different cause (which I haven't found) but where I HAVE stumbled on a fix...
The problem on the first page appears to relate to a ul entered further up the page. Take that out and everything behaves - unfortunately, that's not an option as the ul is part of user-entered content, so I'm scratching my head about that. Particularly given...
Page 2 has no uls to cause an issue, but randomly sticking two break tags in just before my button code resolves the problem.
Naturally, THAT fix doesn't work on page 1.
I'm just about ready to give in and find some alternative way of rendering these buttons, because whatever the actual problem is, it's clearly so deep in either my CSS or my basic HTML that I'm probably never going to find it.
I don't see any difference between IE8 and other browser. Could you pleas mention bit more clear what you want to do?
my asp buttons are getting blurred after disabling them through code in Internet Explorer.on mozilla it is working fine.
Css applied to buttons are
.Login-btn{
font-family: Tahoma;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
background-image: url('../images/Login-btn.jpg');
background-repeat: repeat-x;
padding-right: 20px;
padding-left: 20px;
display: block;
width: auto;
float: left;
text-decoration: none;
margin-left: 10px;
}
Login-btn.jpg is blank image on which i am writing text.what can be the problem
Well, IE gives a disabled effect to html buttons ignoring whatever CSS that you may have. So there are no real solutions but few work-arounds:
Instead of disabling button, add a onclick handler that would return false (but button will still remain click-able).
Create your own custom button implementations that rely on hyper-links
You should create a separate style selector for disabled buttons, something like this should work across most browsers, even IE (7+):
.Login-btn[disabled="disabled"], .Login-btn.disabled{
}
see: this link
I am having some trouble with a font size with CSS. Below you see I have .post I have < pre > tags that are nested inside of the post class so should the css I have for the pre tags work below? It is not working but I can't figure out why? The text inside my pre tags end up being 15px instead of 12px
.post {
width: 100%;
clear: both;
padding: 10px 0;
border-bottom: #CBCBCB 1px solid;
background: url(images/post_element.gif) no-repeat 126px 21px;
font-family: arial;
font-size: 15px;
}
.post pre{
font-size: 12px;
}
http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css
.post pre{
font-size: 12px !important;
}
Should work, but to answer your questing we need to view all html + css because it really depends...
In a vacuum, that code should work. However, base tag styling can vary browser-to-browser and <pre> tends to be a bit of an odd one. My first thought is that some other style is overriding it.
Have you used Firebug (or some other developer console) to take a look at the styles being applied and the computed style for the element? That should put you on the right track.
This was a weird issue, I had to end up changing the class and font size for all the other text, everything except the pre tags to get it to finally quit resizing after page load from my JS syntax highlighter