buttons on IEI have created radio buttons in ASP.NET using bootstrap. These buttons are supposed to be disabled which works fine in chrome but in Internet explorer, it creates a gray square around the buttons. I've been able to get it removed on IE by wrapping the input tag with a div disabled tag. However, this does not work in chrome. So I can't get one to work without messing up the other. The code I have included is the one that works with chrome.
input[disabled] {
cursor: not-allowed;
background-color: #cfcfcf;
}
input[type="radio"], input[type="checkbox"] {
box-sizing: border-box;
padding: 0;
}
<div class="form-check">
<input disabled="disabled" checked="checked" class="form-check-input" id="Male" name="GenderSelection" type="radio" value="Y">
</div>
<label for="Male">Male</label>
]2
the issue is with the css.
input[disabled] {background-color:#cfcfcf;}
remove that and it works.
Thanks!
Related
I have bootstrap switch control that opens and closes some panel in asp.net project. My code as follows:
<div class="bootstrap-switch-container" id="div_pin_bscont" style="height: 34px!important">
<span class="bootstrap-switch-handle-on bootstrap-switch-primary"></span>
<span class="bootstrap-switch-label"> </span>
<span class="bootstrap-switch-handle-off bootstrap-switch-info"></span>
<input type="checkbox" class="make-switch" data-on-color="primary" data-off-color="info" id="chx_pin_data" data-size="mini">
</div>
After build, my markup code looks like:
<div class="bootstrap-switch-container" id="div_pin_bscont" style="height: 34px!important">
<span class="bootstrap-switch-handle-on bootstrap-switch-primary"></span>
<span class="bootstrap-switch-label"> </span>
<span class="bootstrap-switch-handle-off bootstrap-switch-info"></span>
<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-mini bootstrap-switch-id-chx_pin_data bootstrap-switch-off bootstrap-switch-animate" style="width: 64px;"><div class="bootstrap-switch-container" style="width: 93px; margin-left: -31px;"><span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 31px;">ON</span><span class="bootstrap-switch-label" style="width: 31px;"> </span><span class="bootstrap-switch-handle-off bootstrap-switch-info" style="width: 31px;">OFF</span><input type="checkbox" class="make-switch" data-on-color="primary" data-off-color="info" id="chx_pin_data" data-size="mini"></div></div>
</div>
But after postback, this control's height automatically increases.
I tried to access the control via markup or code behind, but the height controlled by the element which added up by build. Also I digged css files, but appeared nowhere.
Appreciate for your help.
thats sounds weird
one solutions should be define a static height for that element in your css like
div.bootstrap-switch-container {
height: 25px;
}
.bootstrap-switch .bootstrap-switch-handle-on, .bootstrap-switch .bootstrap-switch-handle-off, .bootstrap-switch .bootstrap-switch-label {
padding: 3px 12px;
}
div.bootstrap-switch {
margin-top: -4px;
}
as referenced on this post
height issue in bootstrap switch,
also you can inspect the element and deactivate classes in browser then when you identify which is making it, you can search for that class in your css files
I am currently using Bootstrap's SelectPicker and am trying to display it inside a panel heading, aligned to the right, next to a few Bootstrap buttons. My problem is that the Bootstrap dropdown is too wide. It extends past where the panel heading ends. I have attempted to change the width to the dropdown, and by using other options such as float: right and drop-down-menu right instead of pull-right, but no cigar. I have attempted to change the CSS for the selectpicker and have tried to change it's position with Jquery, but it remains the same width and does not change. Here is a sample of my code below:
#if (Model.Customers != null && Model.Customers.Any())
{
<select name="custDropdown" id="custDropdown" class="selectpicker pull-right" title="Select a Customer...">
#foreach (var customer in Model.Customers)
{
<option value="#customer.UserName">#customer.FirstName #customer.LastName</option>
}
</select>
}
else
{
<select class="selectpicker pull-right" title="No Users for this Customer" disabled></select>
}
<div class="panel panel-default">
<div class="panel-heading">
Claim Activity
</div>
</div>
I haven't included my other buttons in this code sample, but they all have the class pull-right associated with them too. I've done a ton of research into this, but I haven't found any useful articles or threads with people trying to do this with a select statement, only with dropdown buttons. I know dropdowns act weirdly in comparison to buttons when trying to apply pull-right to them, but it doesn't make sense to me why it would extend past the panel heading. I know that it doesn't have to do with how long the name is inside of the dropdown. The names being displayed now are relatively short and the width does not change no matter how long or short they are. If anyone has any suggestions or know what I could do to fix this, that would be great. Here is an image for reference of what I'm talking about below:
I ended up solving the issue. Turns out, the problem was with the CSS of the SelectPicker. I was just looking in the wrong place when trying to modify the CSS before. The width was set at 100%, and I had to shorten it down to 82.5%.
.bootstrap-select > .dropdown-toggle {
width: 82.5%;
padding-right: 25px;
z-index: 1;
}
I have a web page that has basic registration field like Name, DOB, Address etc. The page has some controls (text box, DOB etc) that will be shown or hidden based on a radio button selection. Currently, when the end user fills up the page using tab key the hidden controls are getting focus and tab out is not working as expected (Current implementation does not have tab indexes set).
I tried manually setting the tab indexes in a incremental order for all the controls. But moving back and forth or after switching between those radio button selections, tab out scenario is not working properly.
Is there any work around to handle this scenario? Any help would be appreciated.
You need to set display: none instead of opacity: 0 so controls are removed completely from the flow. opacity: 0 means that the controls are still there, just invisible, they can still receive focus and input, on the code snippet below, you can still click in the invisible control between the two visible controls.
display: none means the controls are not there anymore so they can't receive focus and input.
You can refer to code snippet below to see the comparison.
.opacity .hidden {
opacity: 0;
}
.display .hidden {
display: none;
}
<h3>Opacity: 0 style</h3>
<form class="opacity">
<input type="text" />
<input type="text" class="hidden" />
<input type="text" />
</form>
<h3>Display: none style</h3>
<form class="display">
<input type="text" />
<input type="text" class="hidden" />
<input type="text" />
</form>
I need a way to layout controls in a page.
Let me ask you by example.
I have four different action buttons (Edit, Delete, etc..) that do the same actions on any page, but sometimes I want them laid out horizontally and some other times vertically, depending on which page is displaying them.
So I thought of placing all four buttons in a user control and manage their layout using some sort of template control.
Does such a control exist that is as flexible as ListView's template management?
Of course a lazy solution is to place four buttons horizontally in a panel, and another four buttons vertically in another panel, and show/hide the panel that's requested, but I don't want to have two instances of the buttons; I just want one instance of each button, but in different layouts.
Feel free to add more tags to this.
Such thing can be achieved with CSS. I'm bad in CSS but I believe this works:
HTML
<div class="horizontal">
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<input type="button" value="4" />
</div>
Two CSS classes you simply set which you need in the div element (you can wrap your buttons with UserControl and map div's class to UserControl's property)
<head>
<style type="text/css">
.horizontal input
{
margin:0px 2px 0px 2px;
}
.vertical input
{
display:block;
margin:2px 0px 2px 0px;
}
</style>
</head>
Templated control is to strong for such easy task especially when you do not need to change template content.
Below is one item in my page, which consists of the div containing two side by side divs. The first of which is an outline number to an entry in an outline, and the second item to the right of it is the content of that entry in the outline. The Controls_ContentPanel div can contain many different things, often some text paired with a single input control. In the case of the textbox, I had a problem in that the textbox's font styles were not inherited, and so it's font was larger, and thus the line-height was larger, and thus the text in the same div as the textbox used the larger line-height. However the line-height in the first div containing the outline number text was smaller, and thus the text in the span that was paired with the textbox was not aligned with the text in the outline number. I fixed this by jacking the line-height of both divs up to 22px.
That works, but now I have another problem when I have a radio button, because the input button's computed height is 13px and the text in the same div is moved down a few pixels and doesn't align with the outline text. If I reduce the height of the radio button to 11px it fixes the problem. If I make it larger it makes the problem worse, such that the text with the radio button is aligned at the bottom of the button, and is lower than the outline number text. I tried applying a CSS class to the RadioButton contorl that sets it's height to 11px, but the problem is the span tag gets the class, and the nested input tag does not inherit the height. I am developing a server control and I want to use CSS that does not globally effect all radio buttons on the page, but only the radio buttons I generate. So I had hoped to use Css Class, but it is not effecting the radio button itself since ASP.NET is rendering the css class on the span tag instead of the input tag. So either looking for a nice way to apply the css class to the input tag from my C# code, or some other way to get the text in both div's to align consistently.
Simplified snippet of code trying to apply CSS class to radio button control, but the generated html applies the css class to a span tag instead:
RadioButton radioButton = new RadioButton();
radioButton.CssClass = "Controls_RadioButtonInput";
this.Controls.Add(radioButton);
My CSS file:
/*The first three indent levels*/
.Controls_IndentLevel0
{
font-weight: bold;
font-size: 12pt;
}
.Controls_IndentLevel1
{
font-weight: bold;
font-size: 10pt;
}
.Controls_IndentLevel2
{
font-weight: normal;
font-size: 8pt;
}
/*The div tag that contains each node*/
.Controls_NodePanel
{
clear: both;
font-family: MS Sans Serif;
font-weight: normal;
/*font-size: 8pt;*/
font-style: normal;
line-height: 22px;
border: 1px;
margin: 3px;
}
/*The div tag that contains the outline number*/
.Controls_OutlineNumberPanel
{
float: left;
line-height: 22px;
}
/*The div tag that contains the content of a node, such as a label and textbox, a table, or any of the other controls we've implemented.*/
.Controls_ContentPanel
{
float: left;
line-height: 22px;
}
/*Trying to fix a text alignment issue caused by large radio buttons*/
.Controls_RadioButtonInput
{
height: 11px;
}
The generated HTML:
<div style="margin-left: 60px;" class="Controls_NodePanel Controls_IndentLevel2" id="ID_1__10">
<div class="Controls_OutlineNumberPanel" id="ID_1__10_0">
<span id="ID_1__10_0_0">XIV.</span>
</div>
<div class="Controls_ContentPanel" id="ID_1__10_1">
<div id="ID_1__10_1_0">
<span disabled="disabled" class="Controls_RadioButtonInput">
<input type="radio" disabled="disabled" value="ID_1__10_1_0_0" name="a" id="ID_1__10_1_0_0">
</span>
<span id="ID_1__10_1_0_1">
text here for radio button selection
</span>
</div>
</div>
</div>
Edit, I tried adding line-height to the spans directly, as a test, and no luck. According to firebug they were already inheriting the line-height, but I applied it directly just to make sure, and it had no improvement on the alignment:
<div style="margin-left: 60px;" class="Controls_NodePanel Controls_IndentLevel2" id="ID_1__6">
<div class="Controls_OutlineNumberPanel" id="ID_1__6_0">
<span id="ID_1__6_0_0" style="line-height: 22px;">non0005</span>
</div>
<div class="Controls_ContentPanel" id="ID_1__6_1">
<div id="ID_1__6_1_0">
<span disabled="disabled" class="Controls_RadioButtonInput" style="line-height: 22px;">
<input type="radio" disabled="disabled" value="ID_1__6_1_0_0" name="a" id="ID_1__6_1_0_0">
</span>
<span id="ID_1__6_1_0_1" style="line-height: 22px;">
Competitive HC Only [Competitive 4% and/or 9% Housing Credits]
</span>
</div>
</div>
</div>
Try making the inner spans have the same line-height as the divs (22px) and then setting the vertical-align to be middle.