asp.net apply same style to textboxes within div - html

I have 3 div's with over 20 textboxes in each div.
Based on certain rules, each div is enabled or disabled.
I use the following code via VB to disable or enable ALL of the fields in each div, and works great: div_full1_DETAILS.Attributes.Add("Disabled", "") div_full1_DETAILS.Attributes.Remove("Disabled")
Now when I enable the div, I would like to apply a style to each box within the div, and I would like to do it all one hit, just like the code above.
So I would like to apply something like this:
div_full1_DETAILS.Attributes.Remove("Disabled")`
div_full1_DETAILS.Style.Add("border-bottom", "thin dotted #AD9F9F")
So the last line of code I would like to apply the style to all the textboxes within the div div_full1_DETAILS
Can this be done ?
UPDATE:
Following comments below and some search on the web regarding child style, etc, I have done as follows, but clearly something is wrong:
CSS
.div_details_dotted * {border-bottom: thin dotted #AD9F9F}
.div_details_dotted_WHITE * {border-bottom: thin dotted white}
VB PAGE
' SET ALL 3 DIVS TO WHITE DOTTED BORDER-BOTTOM
div_1_DETAILS.Attributes.Add("class", "div_details_dotted_WHITE")
div_2.Attributes.Add("class", "div_details_dotted_WHITE")
div_3.Attributes.Add("class", "div_details_dotted_WHITE")
if username='frank' then
' enable all textboxes in div 1 and put a dotted dark line below...
div_1_DETAILS.Attributes.Remove("Disabled")
div_1_DETAILS.Attributes.Add("class", "div_details_dotted")
end if
However this doesn't work, clearly I've done something wrong.
Each DIV has a dark line around it which it has now dissapears (so the CSS is not being appliedonly to child textboxes but also to div.
Also the div_1_DETAILS.Attributes.Add("class", "div_details_dotted") doesn't do anything.
Any ideas how to proceed ??
thanks

Related

Make sure each line in button has all the attributes

I'm trying to achieve the underline for all parts of my button. I tried using -webkit-box-decoration-break property, it didn't work.
Both first line (New Delhi,) and last line (India) should have underline. Since it's due to break in the box, I tried the box-decoration-break property, but it didn't work out. Please guide me where I am going wrong.
The only thing you can do is use text-decoration: underline. Think of a button and the text inside it as a box. The line you are trying to draw will always be at the sides of that rectangle. When the text is wrapped (e.g., because the box is not wide enough), the rectangle just increases in height and keeps drawing the line at the bottom. Have a look at this Mozilla doc about CSS text-decoration or this Mozilla doc about CSS border.
You can add border-bottom : 1px solid #cccccc;. and if it's too close to your element (e.g. button) you can add padding-bottom : 5px to solve your issue.

Grey outline in Internet explorer when we set height to the div inside summernote editor

I am working in a summer note editor in which i had to add 2 lines with bottom border so user can type in the 2 lines.
I have added a div with the below css
.line {
line-height:10px;
height: 10px;
border-botom: 1px solid #007272;
}
In IE alone I am getting an grey outline around the div
I would like to remove the outline when user focus to type something.kindly provide some inputs.
When you say "focus", I think you mean "hover". If not, please correct me.
To remove the border on hover, just add another rule using the :hover pseudo class:
.line:hover {
border: none;
}
You may also want to make sure that all of your HTML/CSS/JS files are IE-compatible.
Hopefully this solved your problem. If not, please me.
I have fixed the issue by removing the height and line-height and adjusting with the padding on top and bottom.
The issue was when setting the height to any element inside summer note editor that outline is coming up in IE, so removed it and adjusted with padding.
This issue is little bit strange. I was unable to fix it in the local environment initially with the above-said code and fixed it while debugging in the high environment.

When I set the body's background color to black, it stays white

I'm trying to make a flat black background below the navbar but that seems to be an issue. This is particular concern because I wanted to add some JQuery functionality to the buttons on the right to cause the background color to change when they're pressed. But if something as simple as this, though fundamental, doesn't work...
Currently another issue is this thick, white strip. I honestly don't know what's causing it. I assumed that just having a white AlarmTime would mean floating white text on the page surrounded by a black background, but that's clearly not the case. It's left as the default black now simply because it's effectively invisible otherwise. For the record, it's not the flexbox nor the div causing the border because it still shows up with both of them deleted.
https://jsfiddle.net/xjrqm1k3/
body
{
background-color:black;
}
What did I do wrong?
Edit: I thought you had to have a period before the name of the selected item to select a class. I guess I might've been missing something in my code? The fiddle I posted doesn't seem to have a period Fiddle, and it's what I Copy-Pasted from my work. Do indents cause Visual Studio to count the item as a class?
Edit: Regardless, thanks for the help and information; it works.
You were doing
.body
meaning class with name body
change to body
Also you have to add !important since you're loading bootstrap after this CSS file.
See fiddle
It's probably being overriden by something else. Try this:
body
{
background-color: black!important;
}

Unable to set either CSS style or style HTML attribute directly

I have a wordpress site and all tables seem to be borderless as far as I can see.
When I check it with Firebug I can disable css initialization for <table> element and design seems to be OK. Firebug tells me the CSS code is set in theme's style.css file. I open the file and check the content but there is no such line.
After this I choose a worse way to manually set the style attribute of my <table> HRTML element as follows. I also apply !important directive to override anything.
As far as I can know the style attribute of an HTML element overrides all CSS and previous (inherited or not inherited) style declarations. Also the !important also makes it undestructable. I have used both I still can not make it work.
What am I possibly doing wrong and how can I fix it?
Regards.
P.S. : You can check the faulty content # http://pmiturkey.org/hakkimizda/uyelik/
The table as the bottom of the content.
OK, I played a little with firebug in your website here and had to do a few things:
1) Remove border="1" in that same table
2) Change from style="1 border #000 !important;" to style="1px border #000;"
These changes solve your problem.
EDIT
In order to draw borders around each cell of the table instead, proceed as follows:
1) Remove the table's style attribute
2) In your css file, add the following:
th, td {
border: 1px solid #000;
}
This should add borders around each table cell of yours. Hope it helps!
Well for starters you aren't adding a color to your border border: 1px solid red;. The borders are probably being removed in a css reset. You can add css to the bottom of your styles.css file and that should override any reset.
Also.. are you wanting a border around the table, or a border between the table rows? You might want to specify what exactly you want.

CSS ContentEditable Span: Ugly Border

I have to make some text editable to form an Email. To indicate where text may be changed, I want to give a border around editable passages.
Sadly, it looks pretty ugly with:
outline: 1px solid #c9c9c9;
If the editable span contains a line break (border looks even worse!).
See fiddle: http://jsfiddle.net/Q5qdA/1/ for reference. Try to add a double line break and some text. Especially line breaks will result in very ugly vertical borders.
Another problem is (only tested on firefox), that if you add a line break at the end, you can't remove it (it creates a new break with type="_moz", which won't get removed...)
Is there some way to work around this ?
ps: I have jQuery / jQuery-UI at hand, but wouldn't like to use plugins...
its hard to get your problem, because its not easy to see, what you wish.
But maybe its better to get one outline for one span :
Here's my fiddle
http://jsfiddle.net/Q5qdA/7/
p {
width:210px
}
(for example)
with a width you can solve this.