Html Question posted in
Some basic documentation can be found here.

Html – How can I change my CSS to position and size image correctly on page

I am sure this has been asked multiple times before but it seems every scenario is slightly different. I am using React to position a number of elements on a page. One of these elements is a map which needs to be sized to just under the page width but the CSS does not seem to be containing it correctly.

This is the code visible in debug:

<div id="Layout_Map_Container" class="col-sm-10">
    <div class="col-sm-10" id="Layout_SiteMap_Img" style="z-index: 10;">
        <img src="data:image/jpeg;base64,/9j/4QDORXhpZgAASUkqAAgAAAAGABoBBQABAAAAVg..." alt="Layout plan for X" id="floorMap" style="width: 100%; position: absolute;">

The second div is showing a height of 0px and the image seems to be expanding to full size of the encoded image. The first div acts as if there were nothing in it, but I am assuming that is because of the absolute positioning. What I need is for the <img /> tag to be contained withing the first div and for the entire width to be within the page. Currently the first div has the correct width.

I am sure this will be a very easy fix but my knowledge of CSS is very limited.

Thank you.

EDIT: This is the entire React code used to generate the page. All the additional elements do not seem to play a part in the actual layout as they are not containers for the map.

return (
    <div>
        <Row>
            {(isAdmin && !areMapsLoading) ?
                <span style={{ 'whiteSpace': 'nowrap', 'backgroundColor': '#ccc', 'visibility': `${currentMap !== -1 ? 'visible' : 'hidden'}` }}>
                    <label htmlFor='layoutEditSelect'>Edit</label>&nbsp;
                    <input id='layoutEditSelect' type='checkbox' ref={editRef}
                        onClick={async (e) => { setEditMode(e.target.checked); }}
                    />
                </span>
                : <span></span>
            }
            <Col sm={10}>
                {//(editMode && currentDesk != null) 
                    false ?
                        <div style={{ position: 'absolute', top: '100px', left: '300px' }}>

                            <Row>
                                <Col>Left</Col><Col>{Math.round(currentDesk.x)}</Col>
                                <Col>Height</Col><Col>{currentDesk.height}</Col>
                            </Row>
                            <Row>
                                <Col>Top</Col><Col>{Math.round(currentDesk.y)}</Col>
                                <Col>Width</Col><Col>{currentDesk.width}</Col>
                            </Row>
                            <Row>
                                <Col>Rotation</Col>
                                <Col>{currentDesk.rotation}&deg;</Col>
                            </Row>

                        </div>
                        : ''
                }
            </Col>
        </Row>
        <Row>
            <Col sm={1}>
                <Row>
                    <Col>
                        {!areMapsLoading ? (
                            buildMapSelector()
                        ) : (
                            <Loading title="Map Data" />
                        )}
                    </Col>
                    <Col>
                        {
                            editMode && mapScale.height ? (<AddDesks
                                maps={maps}
                                deskTypes={deskTypes}
                                desks={desks}
                                editMode={editMode}
                                scale={mapScale}
                                currentMap={currentMap}
                                fns={AddDesksFns}
                                
                            />
                            )
                                : ''
                        }
                    </Col>
                </Row>
            </Col>
            <Col sm={10} id="Layout_Map_Container" ref={mapContainer}>
                <div
                    ref={mapContainer}
                    style={{
                        width: "100%",
                        height: `${window.height}px`,
                        position: "absolute",
                        zIndex:10
                    }}
                    onClick={() => clickMap()}
                    onLoad={
                        () => {
                            //console.log("load");
                            getScale();
                            clickMap();
                        } /*If map is reset, set current desk to null*/
                    }
                    className="map"
                    id="Layout_SiteMap_Img"
                >
                    <img
                        src={mapImage}
                        style={{ width: "100%", position: "absolute" }}
                        alt={`Layout plan for ${maps.maps[currentMap]?.currentSite?.SiteName}`}
                        ref={mapRef}
                        id="floorMap"
                        onLoad={getScale}
                    />
                    <React.Fragment>{buildDesks()}</React.Fragment>
                </div>
            </Col>
        </Row>
        {showStatus(currentDesk)}
    </div>
);
Tags:

2

Answers


  1. 0

    I think that position: absolute cause your error

    Login or Signup to reply.
  2. 0

    So,
    In my opinion the issue came from the position:absolute which is written in the image tag,which causing it to be removed from the normal doc. flow, resulting in the containing div not acknowledge its height.

    so you can use something like relative position of container, to do that set position: relative on the parent container instead of using position:absolute on the image tag itself. This should make sure that image takes up the full width of the container w/o breaking the layout.

    your CSS should look like:

    #Layout_Map_Container {
  width: x%; /x == choose according to your will/
}

#Layout_SiteMap_Img {
  position: relative;
  width: 100%;
}

#floorMap {
  width: 100%;
  height: auto;
  display: block; /* make sure that image behaves as a block element */
}

    I think this should work…

    Any issue just text back.

    cheers!!!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search