I have a dynamically created tree view control in ASP.NET. I want to format that treeview control and want to apply some designing. I have found this on on stackoverflow but I don't know whether I can apply to my dynamically created Treeview control or not?
Here is the link that I found on stackoverflow for tree view
https://jsfiddle.net/jhfrench/GpdgF/
and here is my code
<asp:TreeView ID="TreeView1" runat="server" ShowLines="true">
</asp:TreeView>
Please let me know how to apply this styling to dynamically added treeview control.
Check This ! this will help You
.treeNode
{
transition: all .3s;
padding: 12px 5px;
text-align: center;
/*width: 100%;*/
margin: 0;
min-width: 250px !important;
border: 2px solid #8e44ad;
text-decoration:none !important;
color:black;
/*color:blue;
font:14px Arial, Sans-Serif;*/
}
.rootNode
{
font-size:18px;
/*width:100%;*/
border-bottom:Solid 1px black;
color:#337ab7;
}
.leafNode {
border: Dotted 2px black;
padding: 10px;
background-color: #eeeeee;
font-weight: bold;
}
.selectNode
{
background-color:Black;
border:Dotted 2px black;
font-weight:bold;
color:#fff;
}
<asp:TreeView ID="tvw_Category" runat="server" NodeStyle-CssClass="treeNode"
RootNodeStyle-CssClass="rootNode"
LeafNodeStyle-CssClass="leafNode" SelectedNodeStyle-CssClass="selectNode"
OnTreeNodeCheckChanged ="tvw_Category_TreeNodeCheckChanged" ExpandDepth="1" Font-Size="Small">
</asp:TreeView>
You can use the ASP:TreeView's CSSClass property to apply CSS to the TreeView Control
Related
I am trying to achieve the following using bootstrap button and custom css. I am not sure how to add a separation with a button and have two sets of labels within it. So far, I am able to create a button with label in it.
Working codeply demo
DEMO
You can do this with mark-up (html) only:
<button>
<h4>Titel</h4>
<hr/>
<span>More</span>
</button>
But this will look a bit weird so by adding some css make it look better.
button span {
font-size: 0.7em;
}
button hr {
margin: 2px;
}
Try this,
Demo
.productButton.selected {
background-color: rgb(0, 146, 143);
color: #FFF;
}
.productBtnText{
font-size:25px;
border-radius:0;
width:100%;
border-bottom:2px solid #000;
}
.productButton{
border:2px solid #000;
margin:0px;
padding:0;
height: 100px;
width: 200px;
font-size: 15px;
white-space: normal;
position: relative;
}
I try to do a little forum to train a little on web design. How can I change that table design to have a 3 dimensions (3D) table ? Or if there is any solution to improve its design, that will be maybe better !
Otherwise, any criticism is welcome!
/* Tableaux -------------------------------------------------------------------------------------*/
table {
border-collapse: collapse;
}
pair {
background-color: #efefef;
}
tr.impair {
background-color: #fff;
}
th {
color: #D89845;
border: 1px solid #D89845;
padding: 5px;
font: normal 8pt verdana, helvetica, sans-serif;
}
td {
border: 1px solid #ddd;
padding: 5px;
font: normal 8pt verdana, helvetica, sans-serif;
}
PS: I will keep the best suggestion as validation of the subject.
Thanks in advance.
You can use box-shadow is the best solution to give any object a 3d look & feel.
box-shadow use browser specipic prefixes like -webkit, -o, -moz etc . Here I just gave the link where you can find out more about it & can study how it works. I also many times just created such type of objects that have just 3d feel.
Link to box-shadow.
Maybe you can do anything with this,
CSS:
.gridtable {
border:1px solid #000000;
height:149px;
width:342px;
overflow-x: scroll;
}
.fixedcell {
height:30px;
padding:0 2 0 2px;
background-color:#C2BFA5;
border-left:1px solid #E1E0D2;
border-top:1px solid #E1E0D2;
border-right:1px solid #8D8961;
border-bottom:1px solid #8D8961;
}
.gridcell {
height:30px;
background-color:#ffffff;
padding:0 2 0 2px;
border-right:1px solid #C0C0C0;
border-bottom:1px solid #C0C0C0;
}
Edit
Link to 3d effects : http://www.w3schools.com/cssref/pr_border-style.asp
I'm currently at a loss concerning this issue. What I'm making is a WYSIWYG editor (much like the one I am using right now) and the problem is the buttons on top. I have made a CSS class of their layout:
.test {
background-color:#d0d0d0;
color:#000000;
font-family:arial;
font-size:12px;
font-weight:bold;
padding:2px 7px;
text-decoration: none;
}
.test:hover {
padding: 1px 6px;
background-color:#789dfa;
border: 1px solid #485ae0;
}
The layout works fine but I am unable to find a proper way to link the class. Take this for example(ignore the JavaScript):
<input type="submit" class="test" value="B" onClick="texta(text,'b','b')" onmouseup="text.focus();">
Problem is that any buttons (<button>, <type="submit> etc) tend to deform the original design, giving it 3-dimensional look and generally making it look more like a button.
My question is, how do I work around this? I've tried to link the class in several different ways but it just won't work.
Picture:
I usually go with:
html:
<div class="test"><a data-js="texta(text,'b','b')" href="http://someOtherLikeActionIfTheresNoJs"></a></div>
css:
.test {
[ ... snipped your style ... ]
position: relative;
}
.test a {
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
Tweaked your css just a bit
.test{
background-color:#d0d0d0;
border: 1px solid #f5f5f5; //<--add this
color:#000000;
font-family:arial;
font-size:12px;
font-weight:bold;
padding:2px 7px;
text-decoration: none;
}
.test:hover {
padding: 1px 6px;
background-color:#789dfa;
border: 1px solid #485ae0;
}
Works on input or button elements
Here's a FIDDLE with the result.
I currently have the following table definition:
<table border="1" cellspacing="0" bordercolor="#CEDFEF" cellpadding="1">
I am trying to transform it to CSS, using:
table{border:1px solid #CEDFEF;cellspacing = 0px;cellpadding = 1px}
The table doesn't render as it should, though. What am I doing wrong?
Secondarily, if I want to not apply this styling to one of my tables in specific, how do I do so?
I expect problem is with cellpading and/or cellspacing.
This is not valid CSS:
cellspacing = 0px;cellpadding = 1px
There are already some questions about that :
Set cellpadding and cellspacing in CSS?
Why are cellspacing and cellpadding not CSS styles
I hope this helps you.
Here you are & have a good year!
You need to optimize the tables in css with border, paddings and colors versus cellpadding and default stuff. Code for all tables in your site:
table {
width: 100%;
border-collapse: collapse;
border-bottom:1px solid #e1e1e1;
border-top:1px solid #e1e1e1;
margin-bottom: 10px;
background-color: #FFF;
}
table td {
padding: 4px 10px;
border-right:1px solid #e1e1e1;
border-left:1px solid #e1e1e1;
}
table th {
padding: 4px;
text-align: left;
border-right:1px solid #e1e1e1;
border-left:1px solid #e1e1e1;
font-weight: normal;
}
table tr {
border-left:1px solid #e1e1e1;
border-top:1px solid #e1e1e1;
}
and for tables with no common styling just add the class to the table tag (exapmle1):
table.example1 {
width: 100%;
border-collapse: collapse;
border-bottom:0px solid #e1e1e1;
border-top:0px solid #e1e1e1;
margin-bottom: 20px;
padding-bottom: 20px;
background-color: #FFF;
}
table.example1 td {
padding: 0px 0px;
border-right:0px solid #e1e1e1;
border-left:0px solid #e1e1e1;
}
table.exapmle1 th {
padding: 0px;
text-align: left;
border-right:0px solid #e1e1e1;
border-left:0px solid #e1e1e1;
font-weight: normal;
}
table.example1 tr {
border-left:0px solid #e1e1e1;
border-top:0px solid #e1e1e1;
}
Also you can customize many things with more classes...
table.exapmle1 td {
text-align: center;
}
table.exapmle1 td.left {
text-align: left;
font-weight: bold;
}
table.exapmle1 td.right {
text-align: right;
}
and add class to the td tag for example.
Hope this helps.
It is generally not possible to transform the table-related HTML attributes so that the exact appearance is preserved. The main reason is that the HTML attributes have vague definitions and different interpretations in different browsers, as you can see e.g. by viewing a page with the given attributes on IE and Firefox. It is not possible to replicate this browser-dependence in CSS.
The following stylesheet, which assumes that your markup has <table class=t>, tries to replicate a “typical” or “average” rendering of a table with the given attributes:
table.t {
border-collapse: collapse;
border: outset #CEDFEF 2px;
}
table.t th, table.t td {
border: inset #CEDFEF 2px;
padding: 1px;
}
It’s seldom useful to convert presentational HTML attributes to CSS. When designed new or completely rewritten documents, it is better to start from the desired appearance rather than some existing or hypothetical HTML attributes. For example, solid borders usually look better than the outset or inser borders that <table border> creates, and a padding of 1px is seldom appropriate (usually you want either no padding or a few pixels on left and right, none on top and bottom).
General info: Mapping presentational HTML to CSS. See also subsection Tables in section Rendering of the WHATWG HTML5 draft.
This is the another one way in CSS styling..!!
while styling many tables in html, we can follow this way..!!
Hope it is help full
In Css:
#list
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border:dashed;
background-color:#CC0099;
border-bottom:1px dashed;
border-top:1px dashed;
border-collapse:collapse;
}
In Body section, simply we can give the name...!!
<table id="list">
In the code below, $row['site'] is an URL. In Chrome and IE8, it displays fine. In Firefox 3.0.11, it only displays everything up until the second forward slash. So "en.wikipedia.org/wiki/Miami" is only displayed as "en.wikipedia.org/wiki".
I believe this is because of the CSS that I am using, but I can't quite figure out how to fix it. Any ideas?
Thanks in advance,
John
Here is the code:
print "<table class=\"navbar\">\n";
print "<tr>";
print "<td class='sitename'>".''.$row['site'].''."</td>";
Here is the CSS:
table.navbar {
margin-left:44px;
margin-top:0px;
text-align: left;
font-family: Arial, Helvetica, sans-serif ;
font-weight: normal;
font-size: 12px;
color: #000000;
width: 700px;
background-color: #A7E6FE;
border: 1px #FFFFFF;
border-collapse: collapse;
border-spacing: 4px;
padding: 4px;
text-decoration: none;
}
table.navbar td {
border: 2px solid #fff;
text-align: left;
height: 16px;
}
table.navbar td a{
padding: 3px;
display: block;
}
.sitename { width: 535px;
overflow:hidden;
}
a.links2:link {
color: #000000;
text-decoration: none;
text-align:left;
margin-top:6px;
margin-bottom:2px;
margin-left:2px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
width: 10px;
height: 12px;
vertical-align:middle;
}
This is the "culprit":
.sitename {
width: 535px;
overflow:hidden;
}
You are setting any element with a class of .sitename to have a specific width and hiding any overflow.
In addition to that, this is also part of the reason:
a.links2:link {
...
width: 10px;
...
}
Not sure why you'd want to limit links to such a small width, but it is forcing the link text to wrap underneath which is then hiding "Miami" away because the overflow is hidden.
The code you pasted minus the above width declaration gives me what you want on Firefox.
This is a side note, but printing HTML like you are printing there is seriously ugly. It is also awfully easy to forget to close quotations and make silly mistakes just because it's hard to tell where you are. Consider heredoc syntax:
print <<<EOT
<table class="navbar">
<tr>
<td class='sitename'>
{$row['site']}
</td>
EOT;
Much better, right?
to test this try
.sitename { width: 535px;
overflow:visible;
}
if you see scrollbars try changing the width to an "em" based number