Question

我创建css / jquery调整大小窗口，在css中，将title，container和footer分为3部分，在该窗口的容器内部，插入iframe，然后可以从右下角调整所有窗口的大小

下一个问题是

如果页脚在相对位置上使用div，则问题在于它的容器没有在同一时间展开，而当调整尺寸的页脚看不到或高度减小时，该问题

如果在页脚中使用绝对位置，则iframe的滚动条将隐藏在此div下

我尝试使用CSS进行各种组合，但找不到任何解决方案

我创建的Jsfiddle供人们看到：

代码是下一个：

<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"t></script>

<div id="win_container_gen">

<div id="win_title"></div>

<div id="win_container">
<iframe src="http://famouspoetsandpoems.com" id="iframe"  scrolling="yes" frameborder="0"></iframe>iframe>
</div>


<div id="win_footer"></div>


</div>

CSS：

#win_container_gen
{
position:relative;
width:350px;
height:400px;
margin:auto;
border:4px soli #111;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 7px 4px 17px -8px rgba(0,0,0,0.75);
-moz-box-shadow: 7px 4px 17px -8px rgba(0,0,0,0.75);
box-shadow: 7px 4px 17px -8px rgba(0,0,0,0.75);
overflow:hidden;
}

#win_title
{
position:relative;
width:100%;
height:35px;
line-height:35px;
margin:auto;
font-family:Arial;
font-size:14px;
color:#fff;
padding-left:1%;
background-color:#111;
}

#win_container
{
display:block;
position:relative;
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
border:1px solid;
background-color:#eee;
overflow:auto;
}


#win_footer
{
position:absolute;
width:100%;
height:40px;
line-height:40px;
cursor: nwse-resize;
background-color:grey;
bottom:0px;
}

#iframe
{
display:block;
width:100%;
height:100%;
}

jQuery调整大小

jQuery(document).ready(function() {
jQuery("#win_container_gen").resizable
({
 handleSelector: "#win_footer"
});

});

在此致以最高级的问候

Answer 1

编辑

正如OP所指出的，以下方法不能满足他的需求。

更改的方法：https://codepen.io/ajzk/pen/RJJZOO

从您的琐事中删除错字（selectInput）似乎可以解决此问题，滚动条不会显示。

library(shiny)
library(leaflet)
library(sp)
library(raster)

## Spatial Polygon ##########
Sr1 = Polygon(cbind(c(2,4,4,1,2),c(2,3,5,4,2)))
Sr2 = Polygon(cbind(c(5,4,2,5),c(2,3,2,2)))
Sr3 = Polygon(cbind(c(4,4,5,10,4),c(5,3,2,5,5)))
Sr4 = Polygon(cbind(c(5,6,6,5,5),c(4,4,3,3,4)), hole = TRUE)
Srs1 = Polygons(list(Sr1), "s1")
Srs2 = Polygons(list(Sr2), "s2")
Srs3 = Polygons(list(Sr3, Sr4), "s3/4")
SpP = SpatialPolygons(list(Srs1,Srs2,Srs3), 1:3)
SpPDF <- SpatialPolygonsDataFrame(SpP, data = data.frame(x=1:length(SpP)), match.ID = F)
Extent = extent(SpPDF)

## UI ##########
ui <- fluidPage(
  selectInput("col", label = "Select a color", choices = c("Blues", "viridis", "magma")),
  leafletOutput("map")
)

## SERVER ##########
server <- function(input, output) {
  output$map <- renderLeaflet({
    leaflet()  %>% 
      addTiles() %>% 
      fitBounds(lng1 = Extent[1],lat1 = Extent[3], lng2 = Extent[2], lat2 = Extent[4])
  })

  observe({
    req(input$col)
    pal = colorFactor(input$col, domain = factor(SpPDF$x))
    leafletProxy("map") %>%
      addPolygons(data = SpPDF, color = ~pal(factor(SpPDF$x)))
  })
}

shinyApp(ui, server)

</iframe>iframe>

jQuery(document).ready(function() {
jQuery("#win_container_gen").resizable
({
 handleSelector: "#win_footer"
});

});

将iframe放入潜水容器中，作为窗口模式

1 个答案: