Align a button to top - asp.net

I am building a webapp in .net using some of the AJAX features; in this case it is TabContainer.
Below is a screenshot of the area I want to play with.
The menu on the left is the tabs of TabContainer. The right side is tab's content. I would like to have the "Update PCR" button to be right underneath "Disciplines Affected". The problem is that the left and right side are a part of ONE block, which is TabContainer.
Are there any suggestions to how would I format the CSS of the Button to align right underneath TabContainer's menu? I could add the button as a part of the menu but, then I would have to set the control to AutoPostback, which defeats its purpose in this case in the first place... Any suggestions would be appreciated!
EDIT:
Here is the existing CSS
.ajax_tabController .ajax__tab_tab
{
background-color: #3c6f91;
padding: 5px;
border: 1px solid #ffffff;
color:#ffffff;
border-left: 3px solid #5AB0DB;
}
.ajax_tabController .ajax__tab_hover .ajax__tab_tab
{
background-color:#5AB0DB;
text-decoration:none;
}
.ajax_tabController .ajax__tab_active .ajax__tab_tab
{
background-color:#5AB0DB;
text-decoration: underline;
}
Also, there is CSS that overrides some settings to make TabContainer Vertical instead of Horizontal. I know, that there is a property .UseVerticalStripPlacement but it messes up with the height of the control and throws a JavaScript error.
.ajax__tab_header
{
float: left;
}
.ajax__tab_body
{
margin-left: 160px;
}
.ajax__tab_outer
{
display: block !important;
}
.ajax__tab_tab
{
width: 210px;
height: auto !important;
}

You need to position the top of the button relative to the bottom of the tab elements. This can be done with jquery. See How to position one element relative to another with jQuery?

It's going to be a bit hit and miss, but try something along the lines of:
.updatePcrButton {
position: absolute;
top: 100px; /* These will be whatever the measurement is to */
left: 5px; /* be directly under the last element */
z-index: 99; /* Arbitrary amount to put it above any other elements */
}
This is pretty messy to be honest - it relies on your not changing the position of the control thereafter.
Perhaps a better way would be to add an extra tab to the TabContainer and handle any Tab clicks yourself.
-- Edit -- May be more useful --
Nikita, I had completely forgotten about this as it was in an old Classic ASP app of mine, but you could try these two JS functions that are probably more useful to you:
function curTop(obj){
rv = 0;
while(obj) {
rv += obj.offsetTop;
obj = obj.offsetParent;
}
return rv;
}
function curLeft(obj){
rv = 0;
while(obj) {
rv += obj.offsetLeft;
obj = obj.offsetParent;
}
return rv;
}
They pull the position from the specified object. If you add the height of the button that you want to position under then you may find this improves the location for you and prevents any funny business with CSS.
Kind regards,
Westie.

Related

Basic CSS styles not applying

I cannot figure out how to get some basic CSS styles to apply to my blog. I'm trying to customize my blog summary page. I want the "read more" button centered and for the picture to show correctly. For some reason the picture keeps moving and it cuts it half off. I've tried multiple things to different classes and nothing works. It was originally on the left with the text to the right of the thumbnail and I'm moving the picture above the text if that means anything.
I've tried text align center for the button in multiple divs and it doesn't budge. Can anyone help? I can only adjust CSS not HTML on my Squarespace site, and the limited styles they give you doesn't allow me to adjust any of this. I'm not a coder, I just kinda understand it enough, so any help is appreciated.
Here is the page: https://www.themodernrenovator.com/blog
Here is custom CSS I added to make the button a circle, but can't get it to center:
text-align: center;
display: table;
width: 100px;
border-radius: 30px;
padding: 12px !important;
background-color: #f0ede9;
margin: auto;
}
.view-list article .excerpt-thumb {
width: 100%;
position: inherit;
}
.view-list article .excerpt-thumb .intrinsic .content {
position: inherit;
padding-bottom: 0px;
}
.intrinsic {
padding: 0px !important;
}
.entry-title {
text-align: center;
}
.article-dateline {
text-align: center;
}
article .post span.inline-action {
display: inline-block;
text-align: center;
}
.article-meta {
display: none;
}
I'd recommend centering the "READ MORE" button using the following CSS, inserted via the CSS Editor:
article .post span.inline-action {
display: inline-block;
text-align: center;
}
The "cut off" image problem, on the other hand, should not be corrected with CSS because it is an issue with Squarespace's ImageLoader function. To correct it, add the following via global Footer code injection. If code injection is not available to you, insert the code via a Markdown block in the footer of your website.
<script>
// Fix Squarespace ImageLoader Bug.
function fixImages() {
var images = document.querySelectorAll('img[data-src]');
var i = images.length;
while (i--) {
ImageLoader.load(images[i], {load: true});
}
}
fixImages();
window.Squarespace.onInitialize(Y, function() {
fixImages();
});
</script>
Your images are cut off because you have a top: value that's currently set to -300px. I can't tell where it's being affected just by looking at this, but somewhere in your styling you have the child img of your excerpt-image getting a top value being set.
To center your 'read more' link: .inline-read-more { margin: auto; }

CSS3 webkit-scrollbar hidden when not needed

I have the following code to style custom scrollbars, but when the scrollbar is not needed because the content is not very long, I would like to hide the scrollbar. Is this possible?
Here's the code I have so far...
.myscroll::-webkit-scrollbar {
width: 15px;
}
.myscroll::-webkit-scrollbar-track {
border-radius: 3px;
background-color:#D4D4D4;
}
.myscroll::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color:#0085bf ;
}
Assuming that the element is having class myscroll, you can try following css
.myscroll{
overflow:auto;
}
It might solve your issue.

AngularJS Single page app: google maps reloading weirdness

Hi I am trying to build a angular single page app for mobile that uses a map on one page. It also should include a sticky footer, and is based on bootstrap. The sticky footer css interferes with the css needed to get the map to take up all of the remaining screen space, so I add a class='map' to the html element to override certain css elements (see below).
Everything works nicely until I go to the map page, leave it and then return to the map page. In this instance the map is not working correctly at all. It is hard to describe, so please try the plnkr.
I have found CSS that works for the map reloading, but then that breaks something else in the site. It is driving me crazy trying to combine the two models, hence my appeal for help.
Update: I have now found that resizing the screen rectifies the rendering issues, until you leave and return to the map. Of course a mobile use cannot change their screen size, but this may help find a solution.
html {
position: relative;
min-height: 100%;
}
html.map {
height: 100%
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.map body {
/* For Google map */
height: 100%;
margin-bottom: 0;
padding-bottom: 60px;
padding-top: 60px
}
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
header {
width: 100%;
background-color: #ccc;
height: 60px;
top: 0;
}
.map header {
position: absolute;
}
UPDATE
I implemented a solution similar to yours, which I found in this blog article. Essentially, you have to trigger a resize event in order to have the map repainted correctly when it goes from hidden to visible.
But I put my code into a directive instead of a controller (doesn't bloat controller and decorates the element it affects), instead of adding a watcher it runs only after the directive/element is linked (more performant), and it doesn't require you to re-enter your coordinates in order to refresh:
.directive('autoRefresh', function($timeout){
return {
restrict: 'A',
link: function(scope, elem, attrs){
$timeout(function(){
var center = scope.map.getCenter();
google.maps.event.trigger(scope.map, "resize");
scope.map.setCenter(center);
});
}
}
})
Updated Plunker
OK, so what I was missing was to trigger the resize event. This now works perfectly in my plunker but not yet in my more complex actual code. Nearly there!
restosApp.controller('mapCtrl', function($scope) {
$scope.$watch('map', function() {
google.maps.event.trigger($scope.map, 'resize');
var ll = new google.maps.LatLng(52.374, 4.899);
$scope.map.setCenter(ll);
});
});

Button CSS weird results

I've been working on positioning a button for a web app and ran into some difficulty.I've created this jsfiddle, which demonstrates the problem.
The code is taken out of context, so some of the rules and classes and such may not make sense, but the problem I'm having is the same. The button moves away on click and I can't seem to fix it when playing with the position. I want the button to stay in the same place when clicked, so that clicking on the button will actually take you to the link that it is referencing.
Any Ideas?
Thanks.
You are specifying the link move to 1px from the top of the page in the rule .back:active (what happens when you click down on an item.)
http://jsfiddle.net/3dk48/8/
a.back:active {
/* This breaks it.
position: inherit;
top:1px; */
color: black;
}
In addition, if you want to still have :active effects, you need to have the correct specificity (currently a.back:link rule overrides your color for :active, but if you correctly update the specificity you can fix that. As well as link rule positioning in the LV(f)HA order (LoVe HAte mnemonic, plus focus lol) will ensure your pseudoclasses work properly.)
The LoVe-f-HAte mnemonic:
a:link { ... }
a:visited { ... }
a:focus { ... }
a:hover { ... }
a:active { ... }
... ensures that the correct states override the correct other states.
Remove the below code from .back style
position: absolute; // not need
margin-left: 2%; // not need
then the problem can solved.
EDIT:
also make change here..
.back:active {
/* position: absolute;
top: 1px; */
color: black;
}
fiddle: http://jsfiddle.net/3dk48/9/
use this:
.back{
top:32px !important;
}
body{
position:relative;
}

CSS minimized mode in Opera: positioning in speed dial extension

I'm trying to display a scrolling list inside a speed dial box but have a problem with the positioning
I want to know when the list object is too big to fit the box, but as far as I know, there's no way of getting the size of the box in pixels
how can I get the minimized mode to show exactly what it's seen in the normal mode but fitting the box?
this is the CSS I'm using right now
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
background: #eee;
color: #444;
display: table;
height: 100%;
width: 100%;
}
output {
position:absolute;
width: 100%;
white-space:nowrap;
font-family: monospace;
}
it works fine if I open the file in a tab, but in the speed dial it's displayed zoomed in
Opera's guide uses this query:
#media screen and (view-mode: minimized) { }
which controls the way it's displayed in the speed dial, I think. but I don't know what to put in there
UPDATE
well, I ended up creating an element and assigning a bottom value of 0
like this:
var bottom = document.createElement('div');
bottom.className= "ylimit";
document.body.appendChild(bottom);
and in CSS:
div.ylimit{
position:absolute;
bottom:0px;
}
then whenever I want to check or compare the height, I use bottom.offsetHeight

Resources