How do I change or make the border disappear of Radio Buttons in Cognos?
I am trying to give padding between the text in a radio button and the border.
I tried adding a table border but still the radio buttons border persists and looks ugly.
You can use CSS:
<style>
.clsCheckBoxList {
border: none;
}
</style>
Put this in an HTML Item on your prompt page and all radio buttons will no longer have borders.
If you want to target a specific radio button prompt while not affecting others, wrap it with a span and give the span an ID.
Add an HTML item with following contents right before the prompt:
<span id="myradiobutton">
Add a second HTML item with the following contents right after the prompt:
</span>
Modify your CSS to use the span's ID to isolate the radio button group desired:
<style>
#myradiobutton .clsCheckBoxList {
border: none;
}
</style>
Related
Actually i want a nav-item to act like a dropdown on hover and on click it redirects to another link. I have already tried using css but it does work on hover but on click it shows drop down again istead of redirecting to another page. If someone knows about it then please explain it.
`
.dropdown:hover .dropdown-menu{
display: block;
margin-top: 0px;
}
.dropdown .dropdown-menu{
display: none;
}
`
I'm trying to use a CSS transition in a similar manner to https://htmx.org/examples/bulk-update/ to show which row was updated, but I can't get it to work for my example using HTMX 1.3.3
The relevant HTML is:
<div id="replace-me">
<div id="A" hx-get="/A" hx-target="#replace-me" hx-select="#replace-me" hx-swap="outerHTML">A</div>
<div id="B" hx-get="/B" hx-target="#replace-me" hx-select="#replace-me" hx-swap="outerHTML">B</div>
</div>
When either div A or div B is clicked, the server returns the above HTML again, but with class="updated" applied to the div in question.
I also have the following CSS:
.htmx-settling .updated {
background: darkseagreen;
}
.updated {
border: 1px solid black;
}
I would expect to see the clicked div show a border and also flash green. However what I observe is:
I click on div A.
div A shows a border but does not flash.
I click on div B.
div B shows a border, but div A flashes.
From then on, the div that I click on shows a border, but the div that was clicked on the previous turn flashed.
I'm guessing this is something to do with the timing of the application/removal of the htmx-settling class combined with when the swapped content gains the new class. I've read https://htmx.org/docs/#request-operations and https://htmx.org/docs/#css_transitions, but can't see where I'm going wrong.
AFIAK you need transition in you CSS, like from https://htmx.org/docs/#css_transitions
.red {
color: red;
transition: all ease-in 1s ; <========= missing?
}
I'm designing a joomla horizontal scroll website by specifying the width of the body to be 4500px wide and absolute positioning the content I want (tried loads of different ways and this one works the best for me). The problem is bootstrap tooltips dont position themselves correctly if I specify data-position"bottom"
I've tried adding { container: 'body' } to the js tooltip initialisation but it does not fix the problem (as the width of the body is wider than the viewport).
It's annoying the heck out of me, can anyone help please.
I've create a bootply and the code is below for reference
http://www.bootply.com/x1xfg7Z19J
The JS is as follows:
$("[data-toggle=tooltip]").tooltip({container:'body'});
the CSS is as follows:
body {
width: 4500px;
position:relative;
height: 100vh;
overflow-x: visible;
}
.dyno {
position: absolute;
transition: none;
}
.zap-fb {
background-color:#456789;
background-size: 100% 100%;
}
.zap-fb:hover {
background-color:#453698;
}
.zap-li {
background-color:#763456;
background-size: 100% 100%;
}
.zap-li:hover {
background-color:#854a34;
}
.zap-pi {
background-color:#912643;
background-size: 100% 100%;
}
.zap-pi:hover {
background-color:#7269c3;
}
The HTML is as follows:
<p>Scroll to the right to see the tooltip issue. If you position the squares around the center of the screen and hover you will see the bottom positioned tooltip way off to the left. If you position the squares to the right of the screen and hover to see the tool tip it is almost in the right position. Note without body position: relative, the tooltip boxes are wierd dimensions</p>
<a style="width:50px; height:50px; left:3144px; top:20px;" class="zap-fb dyno" data-block="268,292,left,3144,top,20" href="#" target="_blank" title="Spread the Word, Like Us on Facebook" data-toggle="tooltip" data-placement="right"></a>
<a style="width:30px; height:30px; left:2900px; top:10px;" class="zap-li dyno" data-block="240,250,left,2900,top,10" href="#" target="_blank" title="Promote your business whilst promoting ours" data-toggle="tooltip" data-placement="bottom"></a>
<a style="width:70px; height:70px; left:2700px; top:10px;" class="zap-pi dyno" data-block="200,208,left,2700,top,10" href="#" target="_blank" title="Share our work with the world" data-toggle="tooltip" data-placement="left"></a>
EDIT: posted the problem on the bootstrap github issues page: official response "Closing as a won't fix since it's v3." So I guess it is an issue but one that I've got to live with. I did try the scenario with bootstrap 4alpha and the tooltips position themselves correctly.
EDIT 2: using bootplys bootstrap version select, I've found that prior to the introduction of bootstrap 3.2.0, tooltips aligned correctly. I'll try and download 3.1.1 and see if I can spot the error.
I have a WinJS.UI.Flyout that I would like to have expand upward when content is added to it while it is visible. The flyout's anchor is at the bottom of the screen. If I call flyout.show(anchor, 'top'); it appears correctly at first, but then expands off the bottom of the screen when content is added. If I call flyout.show(anchor, 'bottom'); it expands upward, but it also covers over the anchor element, which I do not want.
This can be done by using -ms-flexbox display for the flyout and packing its content to the end.
flyout background can be set to transparent; it's size can be set to max possible; this way it serves as a outer container which aligns its content to the end. expandable content is placed inside another div flyout-content with background as white.
<div data-win-control="WinJS.UI.Flyout" id="flyout">
<div class="flyout-content">
expandable content here
expandable content here
expandable content here
expandable content here
</div>
</div>
css:
#flyout
{
background-color: transparent;
border: 0;
display: -ms-flexbox;
-ms-flex-pack: end;
-ms-flex-direction: column;
height: 400px;
}
.flyout-content
{
padding: 20px;
background-color: white;
}
I've encountered an odd behavior in a Windows8 app that I'm building with WinJS, javascript, and HTML. In a particular Page that I'm implementing, there are several divs that have CSS rules like this:
.col {
border: 1px solid none;
overflow-x: hidden;
overflow-y: auto;
height: 100%;
margin: 0px;
width: 100%;
}
The problem is when I invoke the main app bar by right clicking, the scrolled content in the div snaps to the top of the div. In other words, the scroll position of the div is lost. I've tried a host of ways to fix, but nothing has come up. How can I prevent the scrolled content from jumping around upon invoking the App Bar.
Thanks!
suggest to use -ms-grid for the page. The app bar will overlap the div in that case, which is ok and likely right behavior that you can see in other apps also.
html:
<div class="test5 fragment">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled type="button"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">test page</span>
</h1>
</header>
<section class="content" aria-label="Main content" role="main">
<div class="test-content">
Text here.
</div>
</section>
</div>
<div id="appbar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}" type="button"></button>
</div>
css:
.test5.fragment section[role=main] {
display: -ms-grid;
-ms-grid-rows: 1fr;
-ms-grid-columns: 1fr;
}
#Sushil is correct. AppBar is an overlay control, so you should place it next to the fragment div, not inside it. #Sushil's code shows how to do it.
Placing an appbar inside the fragment has performance penalties as it will need to be rendered every time a user navigates to that page. Another undesirable side effect is that all input to the appbar will propagate to the fragment. This is the problem you are facing.
In theory, you can listen to the various input events for mouse, keyboard, touch and call preventDefault on them. But it is not recommended.