I am trying to display a page that contains a header with 3 list items, a sidebar with links on the left and the actual body. I would like the sidebar and the body to be rendered side by side under the header. However, they are rendered one after another on the page.
Any suggestions on how this can be done?
I've used the following code and style to achieve this, but it doesn't seem to be working.
<div>
<h1 class="control-label admin-header" style="vertical-align:top;padding-left:20px">Administration</h1>
<ul class="nav nav-pills admin-header" style="float:right">
<li class="active admin-header">test</li>
<li class="admin-header">xyz</li>
<li class="admin-header">abc</li>
</ul>
</div>
<div>
<div class="span3 admin-header">
<div class="well sidebar-nav admin-header">#RenderSection("Sidebar", false)</div>
</div>
<div class="content span12 admin-header">#RenderBody()
</div>
</div>
.admin-header
{
display: inline;
}
Fiddle
Not sure whether I understood, but for side by side display, you can use
<table>
<tr>
<td class="active admin-header">test</td>
<td class="admin-header">xyz</td>
<td class="admin-header">abc</td>
</tr>
</table>
Related
I have a sidebar in my angular app and I am trying to make one div insight the sidebar scoll through the items and the content in the following div keep the same position (no scrolling). I have been looking at so many similar posts and tried everything but it just wont work. The problem is that either can you scroll through everything in the sidebar or not at all or that the bottom stayed (without moving) but then i the scrollbar was there for EACH item (and not for all items).
I used ng-repeat to put items on scope of the sidebar - is it perhaps different with angular that with reg. html?
Thanks!!
Ps. Im using gulp and the sidbar is a directive which I didnt include here. If anything is of importance, please let me know and I include it.
<li>
<a ng-click="openNav()"><i id="cart-icon" class="medium material-icons icon-design">shopping_cart</i></a>
<div id="mySidenav" class="sidenav closebtn" click-anywhere-but-here="closeNav()" ng-click="closeNav()">
<div class="sidebarBox">
<h2 class="sideBarHeader">Cart </h2>
<div class="sidebarContainer" ng-repeat="item in cart">
<img src="{{item.imageUrl}}" style="width:90px;height:100px;">
<div class="sidebarContent">
<p class="sidebarTitle">{{item.title}} </p>
<p class="sidebarSubtitle">Quality: {{item.quantity}}</p>
<p class="sidebarSubtitle">Price: ${{item.price}}</p>
</div>
<p class="sidebarLine"></p>
</div>
</div>
<br>
<div class="sidebarNoScroll">
<p style="color:black;font-size:22px;">Total</p>
<p class="sidebarTotal">${{ total() }}</p>
<button class="sidebarButtonContinueShopping" id='continue-shopping-button' ng-click="closeNav()">Continue Shopping</button>
<button class="sidebarButtonViewCart" ui-sref='cart' ng-click="closeNav()">View Cart</button>
</div>
</div>
</li>
css.
.sidebarContainer {
overflow:scroll;
height:224px;
}
.sidebarNoScroll {
overflow: hidden;
}
Wrap the container.
<div class="sidebarContainer">
<div ng-repeat="item in cart">
</div>
</div>
Example here: https://jsfiddle.net/vdLk2wzk/. click in the CLICK HERE button to see the situation in action. The dropdown menu should show above everything.
<div class="col-md-12">
<div class="panel-group" id="accordionGroups">
<div class="panel panel-default">
<div class="panel-heading accordion-toggle" data-toggle="collapse" data-target="#XX">
<span class="panel-subtitle">TITLE</span>
</div>
<div id="XX" class="panel-collapse collapse in">
<div class="panel-body">
<div class="col-md-12">
<div class="table-responsi">
<table class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="btn-group">
<span class="btn btn-default btn-xs dropdown-toggle" data-hover="dropdown" data-toggle="dropdown">CLICK HERE<i class="fa fa-caret-down left-padding-low1"></i></span>
<ul class="dropdown-menu">
<li>XXXXX</li>
<li>YYYYY</li>
<li>ZZZZZ</li>
<li>PPPPP</li>
</ul>
</div>
</td>
<td>BIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTE</td>
<td>TEXT</td>
<td>TEXT</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Bootstrap applies overflow-x:hidden on .table-responsive, and once you have an overflow it will actually cut it in both direction to guarantee that the scrollbar is accessible. You could of course remove the overflow whatsoever like so:
.table-responsive {
overflow:visible !important;
}
But it will break the responsive design so with this table layout you are out of luck. On the other hand this table layout is terrible to use on mobile anyway, so I would suggest using one of the following instead: https://css-tricks.com/responsive-data-table-roundup/
Yes, Even i was having the same problem but using the jquery it got fixed, please have a look into the below snippet.
i have found this# http://ustutorials.com/blog/popup-overlay-not-working-in-ipad/
so based on you id change accordingly its working for me.
jquery mouse enter and mouse leave, you can try like this, for me its working fine
//Function to display/hide scroll on mouseenter/mouseleave
$(‘.slds-button–icon-border-filled’).each(function() {
$(this).on(‘mouseenter’,function() {
$(this).find(‘.slds-scrollable–x’).css(‘overflow-x’, ‘visible’);
$(this).find(‘.slds-scrollable–x’).css(‘overflow-y’, ‘visible’);
//alert(“hello-mousenter”);
});
$(this).on(‘mouseleave’,function() {
// alert(“hello”);
$(this).find(‘.slds-scrollable–x’).css(‘overflow-x’, ‘auto’);
$(this).find(‘.slds-scrollable–x’).css(‘overflow-y’, ‘hidden’);
});
});
I'm trying to give a different background-color to my button when it is active. The HTML code is as below.
<div class="tabs">
<div class="tab-content">
<div id="tab1" class="tab active">
<!-- some content -->
</div>
<div id="tab2" class="tab">
<!-- some content -->
</div>
<div id="tab3" class="tab">
<!-- some content -->
</div>
<ul class="tab-links">
<li class="active">
<a href="#tab1"><span class="numer_viti">bla bla</span>
<p class="arrow-up"><p class="cmimet_ne_vite">BUTTON ACTIVE</p></p></a>
</li>
<li>
<a href="#tab2"><span class="numer_viti">bla bla</span>
<p class="arrow-up"><p class="cmimet_ne_vite">BUTTON</p></p></a>
</li>
<li>
<a href="#tab3"><span class="numer_viti">bla bla</span>
<p class="arrow-up"><p class="cmimet_ne_vite">BUTTON</p></p></a>
</li>
</ul>
</div>
</div>
I used both this codes in my CSS files and i didn't sow nothing happened:
This is the CSS code for my project:
.cmimet_ne_vite:active
{
background:#787878;
}
.cmimet_ne_vite.active
{
background:#787878;
}
So who knows were is the problem to help me resolve it?
You have no element with both classes "cmimet_ne_vite" and "active". Instead you have a .cmimet_ne_vite element which is a descendant of your .active element, so instead of .cmimet_ne_vite.active you'll need to use:
.active .cmimet_ne_vite {
background:#787878;
}
Furthermore, you cannot wrap two <p> elements within each other. The browser will render this as two separate elements. Change:
<p class="arrow-up">
<p class="cmimet_ne_vite">BUTTON</p>
</p>
To:
<p class="arrow-up">
<span class="cmimet_ne_vite">BUTTON</span>
</p>
Or something similar.
Finally, if this element is intended to be used as a button you'll need to give it a role attribute set to "button":
<span class="cmimet_ne_vite" role="button">BUTTON</span>
I know I am doing it all wrong. At the moment, I used Tables to format my screen. Bad, I know. I am looking at learning Twitter Bootstrap, but for a test site, I am just trying to move away from Tables and try use DIVs for layout.
At the moment, I am trying to make a page header that shows a title on the left, and a login box on the right.
<div>
<table style="width: 100%;">
<tr style="vertical-align: top">
<td style="text-align: left">
<h1>Basic Finance</h1>
</td>
<td style="text-align: right">#Html.Partial("_Login", new LoginModel())</td>
</tr>
</table>
<hr />
#RenderBody()
</div>
How can I use DIVs to do this? Are DIVs the right idea? I see Twitter Bootstrap uses <SPAN> - but I am days away from getting to grips with it.
So, I went a completely separate route form everybody else. First, here is my example of what I think you want but let me know if this is not correct.
DEMO
Now, let me break it down a bit for you. I first started by taking what you said with a login and having some type of header along with a login table by or on the same line. This was done via the HTML code below:
<div id="wrapper">
<h1 style="float:left;"> Example Text </h1>
<form action="" method="post">
<ul id="regis_ul">
<li id="regis_li">
<label><span> Username: </span>
<span><input type = 'text' name ='username' id ='username' value = ></span>
</label>
</li>
<li id="regis_li">
<label> <span> Password: </span>
<span><input type = 'password' name ='password' id ='password' value ='' ></span>
</label>
</li>
<input type='submit' name='submit' value='Register'>
</form>
</div>
Which is then accompanied by some CSS code:
#regis_ul {
display:table;
}
#regis_li {
display:table-row-group;
}
span {
display: table-cell;
}
label {
display: table-row;
}
form{
float: right;
}
The above code is what produced the JsFiddle output. Something to read into is the display method "table" that will tell you more about why this CSS trick actually works. This can be found in the Almanac.
Another thing that is good to read up on is why exactly a list may be better than a table which.. a great argument with pros and cons is found in this stack question here.
Finally, I encourage you to play with any of the JsFiddle's on this page, you may end up finding a perfect combination that really suites what you are looking for, giving you that unique feel :) If you have any questions about my Demo, just comment below and I will try my best to answer it for you :)
You can use divs and it's a good idea if you want to switch, you can use display properties according to your needs
<div style="width: 100%;">
<div style="vertical-align: top">
<div style="text-align: left;display:inline-block;">
<h1>Basic Finance</h1>
</div>
<div style="text-align: right;display:inline-block;">#Html.Partial("_Login", new LoginModel())</div>
</div>
</div>
And twitter-bootstrap have some classes like pull-left and pull-right have a look at it, i recommend you to use divs instead of tables!
Fiddle Demo
Try this layout
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Basic Finance</a>
<div class="pull-right">
#Html.Partial("_Login", new LoginModel())
</div>
</div>
</div>
You can use
display:table; for <table>
display:table-row; for <tr>
display:table-cell; for <td>
in div format
here is a demo (it has css table vs html table-compare and check for your understanding)
CSS to play with
body{
height:100%;
}
#main{
height:100%;
width:100%;
}
.table{
display:table;
width: 100%;
}
.tr{
display:table-row;
}
.td{
display:table-cell;
}
With just plain divs you can use the float property to get them next to each other
<div>
<div class="table">
<div class="left">
<h1>Basic Finance</h1>
</div>
<div class="right">
#Html.Partial("_Login", new LoginModel())
</div>
</div>
#RenderBody()
</div>
Then you can style it the way you like with CSS, for instance:
.left{float: left;width: 50%;;height:100%;text-align:left;}
.right{height:100%; text-align:right;padding-top: 30px;}
.table{height: 75px;}
Output of this code:
http://jsfiddle.net/7Qv8r/1/
Cheers
You can try this
Check Fiddle here
<div>
<div style="width: 100%;">
<div style="float: left">
<h1>
Basic Finance</h1>
</div>
<div style="float: right; padding-top: 30px;">
#Html.Partial("_Login", new LoginModel())</div>
</div>
<div style="clear: both">
</div>
<hr />
#RenderBody()
</div>
Good Luck n Happy New Year...:)
I can't get this list to align left
<table width="100%">
<tr>
<td align="center">
<asp:Panel ID="Panel1" runat="server" BackColor=White Height="604px"
Width="493px" >
<ul align=left style="left:-60px;background:Black">
<li>Coffee</li>
<li>Milk</li>
</ul>
</asp:Panel>
</td>
</tr>
</table>
I agree with Datoon, if it's non tabular data then it's probably worth while to put this in a regular div. The following will align your text to the left, however.
<ul style="background:Black; text-align:left;">
<li>Coffee</li>
<li>Milk</li>
</ul>
Adding the following CSS rule to the parent <div> will get it to align properly:
div {
text-align: left;
}
You can see it in action here.
I know this might sound weird, but why are you using a table instead of a div? Is this specifically data that is tabular in layout?
Usually you would use a div for none tabular data.
So you could do the following:
<div style="float:left">
Your list items here.
</div>
<div style="float:right">
Some other content here.
</div>
Remember to do the following though after:
<div style="clear:both"></div>