I should preface this by saying I'm a complete beginner in the world of editing CSS, so I apologize if this is very simple. I've been editing reports I've built in MicroStrategy 9.4, but we recently upgraded to 10.1. Before the upgrade, I was able to look at lines of the HTML, such as
<div ty="dsec" id="K1" scriptclass="mstrDocSectionImpl" name="K1" class="mstrDocSection">
and make minor edits. An example would be something like
<style>
#K1{
height:130px;
}
</style>
to just make a simple height change for a section. I could paste that Style change into an HTML container, which would effect the report at run time. I believe the K1 refers to an ID. However, after the upgrade, the line has been changed to
<div id="*lK3*kK1*x1*t1454966440926" k="K1" class="mstrmojo-DocSection" style="">
where id="..." changes each time I run it. Since it changes, I do not know of a reliable way to edit that section. The k="K1" does not change, but I'm not sure how to reference this. Any insight you can provide into this is greatly appreciated.
Try using an attribute selector:
[k="K1"] {
height: 150px;
}
Demo JSFiddle
Although this might be a bit more work it looks like the new ID (id="") might be partially static. That is, the asterisks appear to be separators of some kind. If so, you could optionally select on a portion of that ID string that doesn't change. In my example below I'm assuming that data between the second and third asterisk in *lK3*kK1*x1*t1454966440926 doesn't change. If so you could select on that portion of the string.
[id*="kK1"] {
font-size: 5em;
}
Demo JSFiddle
Related
I have posted another similar problem yesterday. Here's the link.
Now I ran into a different problem. Under a rich-column of an extended data-table, I have added another 2 rich-datables. One table for the header, the other table for the table-data. All these were done to make sure our design doesn't get changed.
Now, coming to the problem, you can see the attached image down. [Intended Page Rendering][2]. This is what I need. But when the page loads, I generally get something like this [Actual Page rendering][3].
After looking through the generated HTML code, I can get the desired output by deselecting the background-color property of the rf-dt class. See the third image below.
[Generated HTML -code][4] - this shows by deselecting the background-color property of rf-dt class, I can achieve my purpose. But when I go to actual code and try to put the changes its not working... I tried to put this in the CSS class
.shipmentBrowseTable .rf-dt {
background-color: none;
}
where shipmentBrowseTable is the styleclass for outer Extended-data-table - the same styleclass used for inner data-table too.
The above code is not giving me the intended result. If someone can help me with this, it would be great.
.shipmentBrowseTable .rf-dt {
background-color: none !important;
}
the !important tag should override most styles
I have a follow up for the question answered on this link:
ckecked element number in :nth-child css rule
The answer is just what I'm looking for but I can't figure out how to set the first Tab as default when the page loads? In the above link it is said that: "you may call the page with the hash #section1". Can anyone perhaps show me how to do this in code? I have been trying for a long time but can't seem to make this work.
Thanks a lot in advance!
In pure-CSS solution involving :target, you anyway need JS to go to URL with corresponding hash (e.g. location.hash = 'content1').
It's generally more flexible to show all tabs by default (incl. when JS is disabled), and hide/show/switch tabs with JS.
The people that suggested "you may call the page with the hash #section1" refer to the URL: if your page is http://www.yoursite.com/yourpage simply navigate to http://www.yoursite.com/yourpage#content1 (content1 because is the id of the first section in the example you provided).
Personally I don't like this solution because it's not flexible and maintainable but nevertheless it works for your simple example.
I'd go for a js based solution: at the begin I'd show only the first section and on click I'd hide all and show only desired one.
Check this (HTML + CSS + JS with jQuery).
HTML:
The same you provided.
CSS:
section { display: none }
section:first-of-type { display: block; }
JS:
$('a').click(function(){
$('section').hide();
$($(this).attr('href')).show();
});
Of course you don't need jQuery to do this but it was faster to write for me :)
Let me know if this was useful.
I've a problem while using BIRT report developed tool, the value in parameter is not fully shown. The parameter is display from a dataset (just a simple select statement), the output is correct, just the the dropdown list not fully display the value.
The example below actually is a list of value, but some of the value is very long, the parameter cannot fully display it.
Hope someone can help me or give me some idea to solve this, thanks!
This is a CSS rule. You can't make the width of a combobox dynamic depending on the content of select items, but it can be adjusted for your requirements.
Edit this file: [birt viewer home]/webcontent/styles/style.css
And increase "width" attribute as you like, for example set it to 350px.
.birtviewer_parameter_dialog_Select {
font: Verdana;
font-size: 8pt;
width: 250px;
}
You might have to restart your Eclipse or Application server to take it into consideration, and clear your web-browser caches.
Can anyone tell me how to tell Github, that I want to see code reviews on Pull Requests in full screen width. Code lines are often longer than the area provided by Github and there is a lot of unused screen real estate.
Is there a setting in Github or a Chrome extension or Tamper Monkey or something like that.
Use Stylebot chrome extension
https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en
I use my own style for my favourite websites, I love it.
Plus point is that you can use the styles created by other peoples also. Someone might have already done the things you need there. Or else you can modify on your own.
I have few CSS rules for you,
.repository-with-sidebar .repository-content {
width: calc(100% - 50px);
}
.container {
width: 90%;
}
Github's CSS has changed, so the new styles should be:
.container-lg {
max-width: inherit;
}
You can create a shortcut in your browser to automatically apply this style:
javascript:(function(){var a=document.getElementsByClassName("container-lg")[0];a.style.max-width="inherit";})();
There's a class on the body called full-width for that, so all that's needed currently is:
document.body.classList.add('full-width');
This can also be added as a bookmarklet:
javascript:(function(){document.body.classList.add('full-width');})();
Don't know why the OP said it's not a problem anymore, if you're doing a code review of your own work you won't be comparing it against another in side-by-side view.
Fix for full screen:
Inspect element on the white space to the left of the code
You'll be brought to a tag, expand this
Click on the 3rd div child of 'main'
Scroll down through the css on the right hand side until you find ".container-xl"
Untick this and you'll get the code full screen
If you want to you can write a console script or use one of the plugins mentions above but I find this method the simplest to remember and apply on anyones machine.
This is no longer an issue after GitHub introduced side-by-side code review. That really works well.
I am trying to implement a js accordion I found and I'm having problems with it. The titles are supposed to cleanly slide up to the top of the page and drop the content below. That is not what is happening. There is some obvious jumpiness going on when you look at it. It's not smooth at all. I don't know much about js so please explain your answers carefully. Thanks so much!
http://imip.rvadv.com/accordion.html
EDIT:
After replacing the js with the default file from the site I got it from, nothing changed. Here is a jsfiddle for it
http://jsfiddle.net/imakeitpretty/ruwjn/
Check this: http://jsfiddle.net/luissanchezm86/ruwjn/4/
The problem wasn't the .js, and you don't have to write it all on jsfiddle, since it's JQuery UI, you can simple check it to include it, if it's another external .js, use it as a resource, check fiddle's documentation for that.
Besides that, the other problem was your CSS markup, you had a lot of duplicated classes in that fiddle, it was a bit of a mess.
The main problem with the jumping was the:
.st-accordion ul li.st-open > a{
margin-top: 70px;
}
I just commented that margin-top: 70px;, and it fixed 75% of the problem, I recommend you to use the css that I arrange on the jsfiddle.
Hope it helps you!
UPDATE
Now, if you want to scroll all the way up like http://jsfiddle.net/luissanchezm86/ruwjn/5/ you need to make the body higher on height:
body {
height: 2000px;
}
After looking at your code, you appear to be using this plugin:
http://tympanus.net/codrops/2011/10/12/flexible-slide-to-top-accordion/
If you go to that page, it has the javascript options you need to control the animation speeds, as well as a working example which is more smooth than yours.