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.
Related
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!
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 have an asp.net form that is styled with CSS. I am trying to input a string into a textbox through the code behind the asp form.
Problem: All text that goes into any asp.net textbox is centered and in one line Figure 1
Attempted solution: Created a class in my CSS form and changed margins and alignments. Surrounded the textbox in a div with the class
Question: How do I revert the CSS back so all ASP.NET textbox's are back to normal
If you add class attribute to the form element then the given styles apply for all the elements within that form element.
Instead of doing that if you want to apply style for only one element add id attribute to the element and give styles.
Ex:
.form {
text-align: center;
}
above code apply center text for all elements.
<input id="txtBxId " value="Hello World!"/>
#txtBxId {
text-align: center;
color: red;
}
but if you do like this it will apply for single element
you can use textbox in centered text with 2 ways :
1) tag
<center>
<asp:TextBox ID='text'>
</center>
2) Input :
<html>
<style>
#txtBxId {
text-align: center;
color: red;
}
</style>
<body>
<input id="txtBxId " value="Hello World!"/>
</body>
</html>
I want to be able to send text to this text box element:
<form class="compose okform initialized">
<div class="border"></div>
<div id="message_9028519832635440005Container" class="inputcontainer textarea empty">
<textarea class="clone" placeholder="Compose your message" aria-hidden="true" style="height: 21px; width: 417px; line-height: 18px; text-decoration: none; letter-spacing: 0px;" tabindex="-1"></textarea>
<textarea id="message_9028519832635440005" placeholder="Compose your message" style="height: 39px;"></textarea>
<span class="okform-feedback message empty" style="height: 0"></span>
<div class="icon okicon"></div>
</div>
<button class="flatbutton" type="submit"></button>
<div class="draft_message"></div>
<label class="checkbox" for="enter_to_send_9028519832635440005"></label>
</form>
I'm not able to location the element by searching for part of the ID (the number after message_ is dynamically generated).
I've also tried this but I get an error saying "unknown error: cannot focus element":
var textBox = DriverActions.driver.FindElements(By.ClassName("inputcontainer"));
textBox[0].SendKeys("Why hello");
Try the following css
.inputcontainer.textarea.empty>textarea:nth-child(1)
I assumed you want the first text area box with placeholder="Compose your message"
if so, you can also use the following cssSelector
[placeholder='Compose your message'][class='clone']
Partial search with id is also possible. Assuming the Container part of the div's id is unique and static, you can do the following
[id$='Container']>textarea:nth-child(1)
On the other hand, if you want the second textarea just simply change the child index
[id$='Container']>textarea:nth-child(2)
And, here is the implementation
By byCss = By.CssSelector("[id$='Container']>textarea:nth-child(1)");
IWebElement textBox = driver.FindElement(byCss);
textBox.SendKeys("Why hello");
Try this XPath using starts-with
var textBox= DriverActions.driver.FindElement(By.XPath(".//textarea[starts-with(#id,'message_')]"));
textBox.SendKeys("Why hello");
The reason that you are getting the error could be because by your selector you will end up getting a div instead of a textBox that you need.
I create one ASP.NET MVC 4 project. I want display an image into textbox like this tutorial but image not display in textbox.
CSS:
.searchText {
background:#FFFFFF url(Images/search.png) no-repeat 4px 4px;
padding:4px 4px 4px 22px;
border:1px solid #CCCCCC;
width:230px;
height:18px;
}
View:
<input type="text" class="searchText" />
put a forward slash / before Images.
Replace this:
url(Images/search.png)
with:
url('/Images/search.png')