Set minimum width to a resizable frame in a frameset in html - html

I have a frameset like below in the code. I want to set minimum width for the frame "frmMView". Frame "frmMView" is resizable, but it should be resizable only to a minimum value.
<frameset ID=frmDefault name=frmDefault COLS="250, *" BORDER=1 FRAMEBORDER=1>
<frameset ID=frmHeader name=frmHeader ROWS="400,18" BORDER=0 FRAMEBORDER=0 FRAMESPACING=0>
<frame ID=frmMView name=frmMView SCROLLING="auto" SRC="Menu.htm" width="100">
<frame ID=frmMSearch name=frmMSearch SCROLLING="no" SRC="Search.html">
</frameset>
<frameset ID=frmDetail name=frmDetail ROWS="0, *" BORDER=0 FRAMEBORDER=0 FRAMESPACING=0>
........
........
</frameset>
</frameset>
I tried giving minimum width "min-width" to the frame. And also tried adding in css below configuration.
.container {
min-width : 100Px;
width : 100px;
width: auto !important;
}
But it did not work

I hope you solved this because you asked this two years ago, but you never included a class in the tag since that's how you wrote your CSS. Also, setting a min-width as the same as a fixed width is redundant since the width won't change.
<frame ID=frmMView class="container" name=frmMView SCROLLING="auto" SRC="Menu.htm" width="100">

Related

Placing Google Map iFRAM to center of page in HTLM table row

i am using angular.js and putting ifram in my table row of html, its not appearing in the center of page.
i am using this code
<tr>
<td>
<iframe id="myIframe"
[src]="'https://maps.google.com/maps?q='+rfq.latitude+','+rfq.longitude+'&hl=es;z=18&output=embed' | safe"
width="100%"
height="450"
frameborder="0"
></iframe>
</td>
</tr>
how can i place this map to center of page with full weight
I don't know how to add css in angular but you can simply use this position: absolute to center the iframe.
you can also remove height and width from iframe
Edited code
I have seen your code, what you were doing wrong that you were adding width and height and other css properties ouside the style tag. If you look at my code you'll understand.
<iframe id="myIframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30704255.110777132!2d64.3828365886956!3d20.047174681973626!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30635ff06b92b791%3A0xd78c4fa1854213a6!2sIndia!5e0!3m2!1sen!2sin!4v1604400347555!5m2!1sen!2sin" width="600" height="450" frameborder="0" style="width: 100%; position: absolute; height: 300px;left: 50%;top: 50%;transform: translate(-50%,-50%)" allowfullscreen="" aria-hidden="false" tabindex="0" ></iframe>
Here's the link of codesandbox
Let me know if it doesn't work for you.

How do I center align an embedded soundcloud widget?

I used the widget API from soundcloud and embedded the widget into my HTML file but I am having trouble center aligning it.
The HTML code is
<iframe width="50%" height="300" scrolling="no" frameborder="no" align="middle" src="musiclink&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
As you can see I tried align="middle" but it did not work.
I tried align="left" and that worked but for some reason align="middle" did not work. Furthermore, I went into the API code and tried to change the CSS styling to
.widget {
background-position: center center;
}
But that did not work either
What am I doing wrong/missing?
You can surround the iframe with a div:
<div style='text-align:center'>
<iframe width="50%" height="300" scrolling="no" frameborder="no" align="center" src="musiclink&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
middle is a value for valign.
Use align="center" instead.
More on valign: Here.
More on align: Here
put a div around the iframe and set the left and right margin to auto. it will center this div inside of it's container.
<div style='margin:0 auto;'>
<iframe width="50%" height="300" scrolling="no" frameborder="no" align="center" src="musiclink&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>

How to get rid of 2 pixel margin around full width/height iframes?

I have an iframe that I want to take up the full width and height of the browser:
<iframe src="http://example.com/index.html" width="100%" height="100%"></iframe>
Unfortunately there's a 2 pixel margin around it causing an ugly thin line on the top and left, as well as scrollbars to appear. I've tried this without luck:
<iframe src="http://example.com/index.html" width="100%" height="100%" style="margin:0;padding:0;"></iframe>
Eliminate the border too:
<iframe src="http://example.com/index.html" width="100%" height="100%" style="border:0;margin:0;padding:0;"></iframe>

iframe and css compatibility

I need some compatibility help. My website looks different in browsers. Chrome/firefox, etc. looks right but IE is messed up. Take a look at: http://southwestarkansasradio.com/joomla
I'm using Joomla 2.5. The search box is moved to the left and my on air box script does not work in IE. Code is below, can you help? thanks.
<table border="0">
<tr>
<th>
<center><img style="float: left;"
src="http://www.southwestarkansasradio.com/images/onair995.jpg" alt="" height="35"
width="316" /><br><img
src="http://www.southwestarkansasradio.com/images/playerbackground.jpg" width="316"
height="216" alt="" border="1"><div id="now playing" style="position: absolute; top:
60px; left: 20px;>
<!--[if IE]>
<iframe src="http://www.southwestarkansasradio.com/NowPlaying.html" name="nowplaying"
style="height:216px" "width:316px" frameborder="0" scrolling="no" border="none"
allowtransparency="true" valign="top" ></iframe>
<![endif]-->
<!--[if !IE]>-->
<iframe src="http://www.southwestarkansasradio.com/NowPlaying.html" name="nowplaying"
style="height:216px" "width:316px" frameborder="0" scrolling="no" border="none"
valign="top" ></iframe>
<!--<![endif]-->
</div></center>
</th></tr></table></div>
That html is really hard to read for such a small piece of code. Using indentation would make it easier for you to spot mistakes. There were a number of things wrong:
the opening div was missing from the snippet
One of the divs "now playing" has a space in the id. One cannot have spaces in HTML IDs.
you should have a trailing slash in the br tag
you haven't closed the css style in the nowplaying div, i.e. you forgot the closing apostophe. This would cause problems.
iframe does not have a valign property
the height and width in the iframes are badly formed
iframes do not have a border property
Something like the following should serve better but without being able to debug on your server it's guesswork. Anyway, as said I've kept it pretty much to your structure and fixed fixed the obvious stuff but there will probably still be some issues when you try it on the site but it will get you closer. I certainly wouldn't do it this way however.
The w3c validator is a handy tool.
<div>
<table border="0">
<tr>
<th>
<center>
<img style="float: left;" src="http://www.southwestarkansasradio.com/images/onair995.jpg" alt="" height="35" width="316" />
<br/>
<img src="http://www.southwestarkansasradio.com/images/playerbackground.jpg" width="316" height="216" alt="" border="1">
<div id="nowplaying" style="position: absolute; top: 60px; left: 20px;">
<!--[if IE]>
<iframe src="http://www.southwestarkansasradio.com/NowPlaying.html" name="nowplaying" height="216px" width="316px" frameborder="0" scrolling="no" allowtransparency="true" ></iframe>
<![endif]-->
<!--[if !IE]>-->
<iframe src="http://www.southwestarkansasradio.com/NowPlaying.html" name="nowplaying" height="216px" width="316px" frameborder="0" scrolling="no" ></iframe>
<!--<![endif]-->
</div>
</center>
</th>
</tr>
</table>
</div>
This is just a hack but to move the search box in IE8 and IE9 (haven't tried IE7) add the following to the head section of your template's index.php. It's just "pushing" the search box over.
<!--[if IE]>
<style type="text/css">
div.topmenu
{
width: 250px !important;
}
div.search
{
margin-left: 30px !important;
}
</style>
<![endif]-->

IE reserves space for scrollbar in frame

I have a frame-set and each frame has a table with width:100%. In IE 8 and 9, the table does not fill the whole window, but instead has a strange right margin. In all other browsers it worked fine.
I confirmed that it is not related to margin/padding and is to do with scrollbar because if I change the scrollbar width in the control panel, the reserved space changes too. If the page is viewed outside of frame this problem will not happen.
This is lagacy code. Each frame has scrolling=auto. From the internet I saw two related discussions:
vertical scrollbar problem in IE
Reserved space for vertical scrollbar in IE
However I still can't find a solution. Adding scroll=no to the body of the page will eliminate the space, but this prevents scrollbar from showing when needed. I tried a few other solution but can't find a fully working one yet.
EDIT: This only happens in vertical split frame.
Sample Code:
index.html
<html>
<frameset rows="150,*" cols="*" framespacing="0" border="0" frameborder="no">
<frame scrolling="auto" noresize src="top.html" name="menu">
<frame scrolling="auto" noresize src="bottom.html" name="main">
</frameset>
</html>
top.html
<html>
<body marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 bgColor="#AAFFAA">
<table cellspacing=0 cellpadding=0 width="100%" border=1>
<tr>
<td width="100%" align=middle>TOP<td>
</tr>
</table>
</body>
</html>
bottom.html
<html>
<body marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 bgColor="#FFAAAA">
<table cellspacing=0 cellpadding=0 width="100%" border=1>
<tr>
<td width="100%" align=middle>bottom<td>
</tr>
</table>
</body>
</html>
Sorry i cant comment under the question.
Did you try to replace the scrolling with an oveflow?
try adding a style overflow: auto: or overflow-x: auto; overflow-y: hidden;