I am a big fan of adding CSS in a stylesheet for my applications to have the form contents centered in the browser so that no matter what the size of the browser window, the application or page contents will be centered horizontally.
The CSS Code I use to do this is as follows :
.panel
{
width: 300px; /* Can be whatever value you need it to be */
position: relative;
left: 50%;
margin-left: -150px; /* This is half of width */
}
However, when I do this for an application I'm working on in Visual Studio, it moves the contents half off the page in design view. It's like it's applying the left and margin-left CSS attributes, but ignoring the relative attribute. Do you know how to get Visual Studio to treat my CSS the same way a browser would so that I can apply my CSS positioning code and still work on the application. As of right now, I have to comment out CSS above until I am completely done working on the project so I can see the content in design view.
Thanks for any help you can provide.
Related
I have an interesting CSS / rendering issue with Microsoft Edge and scrollable content in divs that I'm trying to find a workaround for.
If the Edge browser window starts small enough that the div scrollbar is needed immediately, then most(!) of the time the scrollbar will be rendered correctly as below:
However if the browser window is resized or the content within the div changes so that a scrollbar is required, rendering of the scrollbar and parent div is performed incorrectly as shown below:
I've only observed this issue in Edge so far so believe it's an Edge only peculiarity.
Here's the url if you'd like to try it out: https://www.topomap.co.nz/#ShareMap
The CSS for the div is:
.sidebar-scrollable-area {
position: absolute;
width: 235px;
top: 38px;
bottom: 0px;
overflow: auto;
padding-right: 15px;
padding-top: 15px;
}
Setting overflow to either auto or scroll results in the same issue manifesting.
Does anyone have any ideas that I can try as a fix / workaround?
I believe this is an Edge specific rendering bug. I'm currently porting the site from Google Maps to Leaflet which gave me a chance to observe that the rendering issue seems to capture a static snapshot of whatever content is under the div when the issue occurs.
As a result I've lodged an error report with Microsoft:
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17459668/
The screenshot below demonstrates the rendering issue:
I have a dynamically generated list of moderators on a minecraft network with a tooltip generated for each head that is generated showing their username on hover. The functionality works, the tooltip generates and has the correct username in it however, the position is wrong. It's shifted to the left and falls apart as I move down the list. Here's a gif on what's happening:
I simply do not know what to do in this situation.
Well the plugin seems to work correctly (if the names are okay), I suppose it might be a css issue. Maybe the parts of the tooltip get somehow some margin on them. try to inspect them with right click and see if they have any other style attributes than the defaults.
Anyway, if you could post some of the codes, that would be easier.
Seems like this page has changed since you asked this question, but I bet it was a CSS issue. You probably needed to center the tooltip box relative to its parent. Here's some (unvetted) code that might help. I've only included the properties that would affect the centering on the tooltip container:
.parent {
position: relative;
}
.tooltip-container {
position: absolute;
left: 50%;
width: 100px;
margin-left: -50px;
}
Notice, you have to set a width on the tooltip-container. margin-left is 1/2 the width, and negative (visualize that left: 50% will put the left edge of the container at the center of the parent, and the negative margin-left will shift the container half the width of the container).
Currently trying to find a clean solution for achieving the following layout for a sidebar like this
Header
Section 1 that updates it's (dynamic) height aligned to the content
Section 2 that takes the rest of the height with content that needs to scroll if it doesn't fit anymore
Footer
How to make Section 2 taking the remaining space between Section 1 and the footer as nothing I tried makes it happen?
#data_section {
/*Section 2*/
position: relative;
background: red;
/* This needs to be 100% of the 'reset' excluding the footer */
/*height: 100%;*/
/* he content needs to scroll if it outgrows the height */
/*overflow-y: scroll;*/
}
Is there a CSS only solution for this kind of layout that works on >= IE9 and current FF, Chrome, Safari versions?
As it is part of a JavaScript centric application nothing speaks against using JS to calculate the dimensions. But as I always have a hard time when it comes to CSS and it's capabilities it would be nice to see if there's a "clean way" in doing by CSS only.
Here's a fiddle with the barebones layout without getting Section 2 to do what it should.
I would suggest using display:table; and display: table-row. The nifty thing with these display types is that the rows will both try to fill the entire table as well as fitting the content inside. Because of this, you can set height: 0; to the rows that you want to merely fit the content, and let section 2 just fill the rest.
Here's a fiddle
Assuming that you have no content as per you Fiddle, my suggestion would be to add :padding-bottom : 90%; // adjust the value to your need to your css in #data_section, as this will mark up the color in entire remaining area without affecting the footer!
I have a theme image which I am getting from an infopath and proccessing through xslt. I am using this image as a theme for header of my site. Here is my current structure
<div id="mainContent"> testlink</div>
<div id="theme"><img src="abc.jpg" /></div>
I am placing my theme behind my header bar by position:absolute and z-index:-1
Now my issue is, I have to make this theme image clickable. However if I have a link on mainContent div, that should also work. Also I can't use image as background as I have to make image path configurable (through infopath) and can't hardcode it in css.
In IE browser, above structure worked fine as IE allow us to access lower z index div, and I can click it. however other browser are not. I require a universal solution which should work in IE 7+ and latest version of Firefox, Chrome and safari
Note: I am new in posting question on the forum, so please let me know in case anything is not clear in my question
If you can change your html, a solution is to put the theme div first, and put both divs in position:absolute. You don't need z-index then.
A simple example can be found here: jsFiddle example.
The css code being :
#theme {
position: absolute;
top:0;
left:0;
}
#mainContent {
position: absolute;
top:0;
left: 0;
}
Other method inspired by This answer : Set the theme image as part of the mainContent div, with position absolute and z-index set, and everything else with position relative and a larger z-index. See this example.
I'm developing application with GWT 2 and would like to add float panel that stick to the bottom of the screen (not page, like chat panel in facebook). What is the best way to make that kind of panel?
If I understood you correctly, you should apply the style below to a Panel (any basic Panel should do: FlowPanel, HTMLPanel, etc) and add it to the body (it doesn't have to be <body> but we know that it's always there and won't be removed ;)) via RootPanel.get().add(fixedPanel);
position: absolute; /* Or fixed - depends on what you want */
right: 0; /* The part that puts the Panel in bottom right of the page/client area */
bottom: 0;
This can be done by adding the CSS attribute position: fixed to the div in question.
Read more here: http://www.quirksmode.org/css/position.html
I think you can do this by CSS. All you need is any GWT Panel and then style it using CSS. Check out http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/