I am using server.execute to call a another form my code Looks like this
<div>
<% server.execute("default2.aspx") %>
</div>
My problem is the size of the default2.aspx is greater so when i apply height to the div the default2.aspx is overlapping the other content in the default page
Is not setting the height an option? Typically if the height is not set it's default is "auto"
You could also use:
div
{
height:500px;
overflow: auto;
}
If the content is too big for the area, a scrollbar will appear.
Using your code:
<div style="height:500px;overflow: auto;">
<% server.execute("default2.aspx") %>
</div>
Related
Is it possible to change size and width for this image when I display it?
As it stored as picture and I can't change it to hyperlink and use the img tag.
<div class="col-md-8" style="padding: 0px;">
<%# ((SPListItem)Container.DataItem)["Rollup Image"] %>
</div>
I am using CarrierWave to upload an image. The image uploads fine. But any vertical image (only vertical images) displays sideways. How can I fix this?
<div class="row">
<div class="profile_picture">
<%= image_tag #user.attachment.url %>
</div>
</div>
the image tag turns into:
<img src="/uploads/user/attachment/23/CIMG6610.JPG" alt="Cimg6610">
CSS:
.profile_picture {
max-width: 100%;
img {
max-width: 100%;
}
}
if I look at the upload directly in the browser "localhost:3000/uploads/user/attachment/23/CIMG6610.JPG" it displays correctly
It seemed to be an issue with the upload. Adding this to my Uploader fixed the issue.
process :auto_orient
def auto_orient
manipulate! do |img|
img = img.auto_orient
end
end
Thanks #JohnDevelops
I am supporting a legacy application.
In the CSS there is the following rule:
.dashboard-panel table {
width: 100%;
}
So basically there are many panels, and for all tables in them the width is set to 100%.
Now the problem: in a dashboard panel I have put a calendar control from an external library (richfaces). This calendar control is using a table for displaying the days. And this width:100% is affecting the calendar table.
Example:
<div class="dashboard-panel">
<div id="content">
<table id="table1"> //this is ok
<tr>
<td>
<table id="richfacesCalendarTable"> //this not ok
</table>
</td>
</tr>
</table>
</div>
</div>
What is the proper solution here?
I don't want to go through every panel in this application and put a separate style there.
Mabye if you add something like that into end of your css:
.dashboard-panel table#richfacesCalendarTable {
width: your_desired_width_px !important;
}
or
.dashboard-panel table#richfacesCalendarTable {
width: auto !important;
display: table !important;
}
Hard to say for sure as this is only a small portion of HTML and CSS code you provided. There can be other elements that affects your result.
I have following webpage:
<div id = "wrapper">
<div id="leftmenu>
...
</div>
<div id="search">
...
</div>
<div class="Container">
<div id="content">
<iframe id="iF" name="if" src=""></iframe>
</div>
</div>
</div>
It bascially shows the menu in the left search bar on top and iframe with content below search bar and next to the menus. Problem i am having is i dont want it to show vertical and horizontal scrollbars inside ifram but rather use browsers scrollbars.
if i set like this in css:
.Container
{
position:absolute;
width:100%;
height:100%;
left:180px;
}
It removes horizontal scrollbar but is not removing vertical scrollbar. Can anyone guide me how to remove this vertical scrollbar from iframe.
Try: overflow: hidden; on your iframe.
#content iframe {
overflow: hidden;
}
Try this... After the iframe loads it resizes it using javascript. It'll only work if the iframe src is of the same domain.
<div id = "wrapper">
<div id="leftmenu>
</div>
<div id="search" >
</div>
<div class="Container">
<div id="content">
<iframe id="iF" onload="resize(this)" name="if" src="/"></iframe>
</div>
</div>
</div>
<script>
function resize(elem){
var outer=elem;
var inner=elem.contentDocument.documentElement;
outer.style.border="0";
outer.style.overflow="hidden";
outer.style.height=Number(inner.scrollHeight+10)+"px";
outer.style.width=Number(inner.scrollWidth+10)+"px";
}
</script>
There should be a scrolling attribute for the iframe you can just set to no, that takes care of the scrolling.
The iframe doesn't know it needs to be larger than the page it is in. If you know the height of the page you are attempting to show in the iframe, you can set the iframe height accordingly.
That being said, if the page you are displaying may change in size, your maintenance makes this pointless.
Charlie Frank's answer is good for same domain applications.
I am using the twitter bootstrap css toolkit for building master page for an application in asp.net webforms 2.0( also .NET 2.0). Nothing of a programming question though it is about design i got page with
Header
Breadcrumb
Maincontent
-leftsidebar
-pageContent
-rightsidebar
Footer
yeah this is one of those sidebar questions, i got the HTML like below
<div class="row">
<div class="span4">
<!--Place holder for left sidebar-->
<asp:ContentPlaceHolder runat="server" id="phLeftSidebar">
</asp:ContentPlaceHolder>
</div>
<div class="content">
<!--Place holder for main content-->
<asp:ContentPlaceHolder runat="server" id="phPageContent">
</asp:ContentPlaceHolder>
</div>
<div class="span4">
<!--Place holder for right sidebar-->
<asp:ContentPlaceHolder runat="server" id="phRightSidebar">
</asp:ContentPlaceHolder>
</div>
</div>
Question
In one of the content(child) pages i got no content for the left sidebar & i was expecting the middle content to take that space too since the right sidebar was spanning only 4 grids. So how do i make the content section take up the available space on absence of either right or left sidebar.
I answered a question much similar to this, you can take a look at the result here.
What it basically came down to was creating a new set of classes that you can add to your .content area in your child page so it can conform to your sidebars.
Just add this to your main CSS and add a class to your .content area according to your sidebar needs:
.fixed-fluid {
margin-left: 240px;
}
.fluid-fixed {
margin-right: 240px;
margin-left:auto !important;
}
.fixed-fixed {
margin: 0 240px;
}
Here is a demo of how it looks:
Without left sidebar: http://jsfiddle.net/6vPqA/4/show/
Without right sidebar: http://jsfiddle.net/6vPqA/5/show/