I'm working on one large site and currently all radio buttons look like this:
In my View I have this code:
#Html.RadioButton("new", "new", false, new { #onclick = "New()", #id = "new", #class="radio-button" }) Some Text
And CSS for radio button:
.radio-button label {
width:5px;
}
That width doesn't change anything. How can I remove all that space around radio button and have text near radio button? I was looking in that generated CSS Site.css but I can't find where it's defined to be like that.
Thank you!
Are you definig input width in somewhere else? Its not semantical ,but try
margin:0;
padding:0;
width:5px!important;
If it works, try to "inspect element" with Developer Tools(chrome) to see if it hav any inheritance
Related
I'm a very basic coding person that needs something to work, but IDK how. I have a website where I have 4 images. When you hover over those img they become slightly darker, but I wish there was a way to show some text as well (preview of how it should work: https://imgur.com/a/r5cOW2R)
Here's the link to my GitHub code: https://github.com/Ezzol/HCI-Portfolio
Can anyone explain to me what I need to do to add that hovereffect you can see in my design at the imgur link?
You would want to use the CSS hover event. Here's a good example on how to do that.
https://www.w3schools.com/howto/howto_css_image_overlay.asp
you probably need to use javascript as well, and do an EventListener to tell when it is being hovered over, and then use .style to change it, for example:
var text = document.getElementById("text");
var exampleimg = document.getElementById("exampleimg");
exampleimg.addEventListener("mouseover", examplechange);
exampleimg.addEventListener("mouseout", examplechangeback);
function examplechange(event)
{
text.style.display = "block";
}
function examplechangeback()
{
text.style.display = "none";
}
add a h1/h2/h3/p element to your page, and give it the id "text" then style it how you want and set the display to none.
How to disable only dropdown and the fieldLabel should be enabled and dropdown should be disabled(not able to select and should be grayed out)
Let me know how we can do it by CSS?
This css will do the job. But its better to use a more specific selector.
.x-form-item-label {
opacity: 1 !important;
}
Alternatively, you can create a DisplayField instead of using FieldLabel and place it near the dropdown.
I want to relocate my bootstrap popover in the left side, i.e. I want to move the whole popover in the left side, while the white arrow would stay in one place.
I would like to have the effect which is on google.com website, when you click blue icon you see popover but its content is relocated while the white arrow is located under the user.
I know that I can use something like this:
.popover {
top:0 !important;
margin-top:10px;
}
Unfortunately, it relocates the whole popover altogether with white arrow.
What I have now (popover is on the right side and there's no place between screen edge and my popover)
What I want to have (small distance between popover and monitor's edge):
“I want to change the position of content of this popover so that this
arrow will be placed further on the left„
When the popover is shown the arrow position is calculated in Tooltip.prototype.replaceArrow based on width/height and placement. You can force a specific position with this CSS :
.popover .arrow {
left: 90px !important; /* or 45% etc */
}
But that will affect all popovers. Popovers is injected and removed to and from the DOM, and there is by default no way to target visible popovers individually. If you want to style the arrow on a specific popover, a workaround is to hook into the shown.bs.popover event, detect which popover that is being shown, and style the arrow for that popover if needed. Example :
.on('shown.bs.popover', function() {
var $popover = $('.popover')[0];
switch ($(this).attr('id')) {
case 'a' : $popover.find('.arrow').css('left', '10px');break;
case 'b' : $popover.find('.arrow').css('left', '40%');break;
case 'c' : $popover.find('.arrow').css('left', '180px');break;
default : break;
}
})
To get this to work, there must be only one popover shown at a time (see fiddle). It can be worked out with multiple visible popovers also, but then we need to add some HTML to the popover content.
see demo -> http://jsfiddle.net/uteatyyz/
As what I have understood so far, you want to achieve the popover to the left of the button.
Please check this Plunker Link
HTML Code:
<div class="pull-right">
<button type="button" mypopover data-placement="left" title="title">Click here</button>
</div>
Angular Code:
var options = {
content: popOverContent,
placement: "bottom",
html: true,
date: scope.date,
trigger: 'focus'
};
I have edited the answer as per the images that you have shown.
If this is not is answer, then please comment below.
Regards D.
I have a chart that displays a tooltip (string) when hovered over. Is there a way to control the delay/time the tooltip is displayed to the user?
<asp:Chart runat="server" ID="Chart2" Width="340px" Height="265px">
<!--Define Things in here-->
</asp:Chart>
Backend:
//define what rec is
string tooltip = rec;
Chart2.ToolTip = tooltip;
I just came up with a pretty simple solution to this classic problem with the help of some Javascript I borrowed from here: http://bonrouge.com/~js_tooltip
Asp.NET renders tooltips as a title attribute on the actual HTML page generated. You can take advantage of this fact to apply whatever style you like to the tooltip by overriding it with two very simple javascript functions.
function showTooltip(control) {
var ttext = control.title;
var tt = document.createElement('SPAN');
var tnode = document.createTextNode(ttext);
tt.appendChild(tnode);
control.parentNode.insertBefore(tt, control.nextSibling);
tt.className = "tooltipCss";
control.title = "";
}
function hideTooltip(control) {
var ttext = control.nextSibling.childNodes[0].nodeValue;
control.parentNode.removeChild(control.nextSibling);
control.title = ttext;
}
Next you need to design your css for your tooltip:
position:absolute;
border:1px solid gray;
width:300px;
margin:1em;
padding:3px;
background: Red;
Finally you need to wire up the JavaScript to your control
Chart2.Attributes.Add("onmouseover", "showTooltip(this)");
Chart2.Attributes.Add("onmouseout", "hideTooltip(this)");
Hope this helps.... I've been looking for a SIMPLE way of doing Tooltips for all my Asp.Net stuff for ages. I don't like to declare my Tooltip code in separate spans or whatever as this is really no good for my dynamically generated stuff. Anyway I just wanted to add this somewhere online. Hope it helps someone out.
Sorry, but probably not.
Most tooltips are a browser feature, and display either the alt tag of an img, or the title tag of most elements. So the control of how long that tooltip displays is going to vary from browser to browser.
It's possible that the tooltip is under your control, and is an html element displayed with javascript on mouseover, or the charts and the tooltip might be in Flash or Silverlight, but if that's the case we'd need to see your code.
I'm guessing probably not. If you need more flexibility I would recommend going with a jQuery tooltip solution.
To add to Ravendarksky's answer: I used his code but if I moved my mouse during the mouseout event over the tooltip content, IE would issue an unhandled exception (no issues in Chrome, I did not check Firefox):
0x800a138f - JavaScript runtime error: Unable to get property 'nodeValue' of undefined or null reference
So I simply wrapped the implementation of hideTooltip in a conditional checking for null and all was well in IE [and Chrome]:
function hideTooltip(control) {
if (control.nextSibling.childNodes[0] != null) {
var ttext = control.nextSibling.childNodes[0].nodeValue;
control.parentNode.removeChild(control.nextSibling);
control.title = ttext;
}
Or you can use HoverMenuExtender of asp.net. You can also modify the pop up content/design.
Code reference sample here: http://asp-net-example.blogspot.com/2009/11/ajax-hovermenuextender-how-to-use.html
I change the border style and border color on a .net textbox to solid red respectively. After a postback I am attempting to return the textbox to its default values, but I cannot seem to get the color right. I have googled this, and tried to get the default values in the debugger, but the values in the debugger always look too dark of a gray when applied. Is there an easy way to return to the default look and feel of a textbox?
try this:
TextBoxTitle.BorderColor = System.Drawing.Color.Empty;
You can write two CSS classes:
.tb_with_border {
border: 1px #FF0000 solid;
}
.tb_without_border {
border: none;
}
.. and then you can change styles by assigning CssClass property of your textbox, for example:
Textbox1.CssClass = "tb_without_border";
or in markup:
<asp:TextBox id="Textbox1" runat="server" CssClass="tb_with_border" />
If you're just switching the particular element style off then this works:
Textbox1.BorderColor = Nothing
You should be using CSS to do this anyways...
Textbox1.Style.Remove("border")
txt_TextBox.BorderColor = System.Drawing.Color.Empty;
txt_TextBox.BorderStyle = BorderStyle.NotSet;
Simple. Add another textbox or dropdownlist with default values and make it hidden.
To RESET to defaults, just set your textbox's border color, width and style to that of the hidden textbox like so:
txtMyTextBoxToReset.BorderColor = txtHiddenTextBox.BorderColor;
txtMyTextBoxToReset.BorderWidth = txtHiddenTextBox.BorderWidth;
This works in all browsers and works for Drop down lists as well