I have a website running on a mapping platform called Ushahidi. The default template is quite boxy so I was fiddling with the CSS and rounding everything off using border-radius.
It has helped with other elements but the map is such a square it won't ease up!
It might be that it's not possible, wondered if anyone here had any experience of this. The html using inspect element and view source are different. Not sure what this means exactly but guessing that the html is pulled in by the map provider?
Here is the html on view source:
<div class="map " id="map"></div>
<div style="clear:both;"></div>
<div id="mapStatus">
<div id="mapScale"></div>
<div id="mapMousePosition"></div>
<div id="mapProjection"></div>
<div id="mapOutput"></div>
</div>
I've added a screen of inspect element HTML too. Looks like it's using "Open Layers". I've heard of that but don't fully understand whats going on.
Is it possible to round the edges of my map? Here is the site if that helps: http://tinyurl.com/c8djrvr
Apply the border-radius to two layers.
CSS
div.map {
border: #999 1px solid;
width: 800px;
height: 366px;
position: relative;
height: 650px;
border-radius: 25px; /* ADD THIS */
}
#OpenLayers_Map_11_OpenLayers_ViewPort {
border-radius: 25px; /* ADD THIS */
}
It works. Use however many pixels you want. I used 25px.
I would suggest more general and safer CSS selectors (since ID #OpenLayers_Map_11_OpenLayers_ViewPort is generated by OpenLayers and it's value is unpredictable; and OL 2.12 and older produce ID's, that contain dot and are therefore unsuitable for CSS selectors):
.olMap, .olMapViewport {
border-radius: 25px;
}
Related
I am fairly new to React. I am also new to asking questions on this forum.
I have a pretty basic two column layout and I am trying to dynamically set the image size in the RH column to match the height of the text content of the LH column.
I have figured out I can't get the scrollHeight value of the ref'd element until the page is rendered but I don't want to render the page until I know the scrollHeight value to render the image...and around in circles I go.
I can get the ref'd value if I put a console.log inside a useEffect() but I don't know to adapt this to help me solve the specific problem.
Can anyone help with a solution or another method to achieve this same idea?
const tickList = useRef();
useEffect(() => {
console.log(tickList);
}, [])
<div className='ticklist-container' ref={tickList}>
<TickCrossList items={tickListItems} />
</div>
<div className='image-container p-1 flex flex-center'>
<img
src={imageUrl}
alt={imageAltText}
style={{ width: tickList.current.scrollHeight * 1.77 }}
/>
</div>
I believe this is, at core, an XY problem. You're asking how to technically achieve a nearly impossible task (1) when you're actually trying to answer another question: how to make some text and an image look good side by side (2) (which, by and large, is not an actual coding problem - it's a graphical design problem).
Most notably, you're not providing either the text or the image, so you're asking for a general solution, which would work in all cases. That solution doesn't exist. Picture how the result would look if the text was 1 letter long and how it would look if it was 2 pages long.
Last, but not least, the problem is not strictly related to React. In general, you should ask yourself:
is this achievable in DOM (HTML + CSS + JS)?
does it need JS?
once you answer both of the above with "yes", and you know how the output should look like, the React part is generally easy.
In more detail...
(1). When you're changing the image size, provided you maintain its ratio, you're going to affect the paragraph's width, causing it to re-wrap, changing its height, potentially creating a loop. In many cases, you'd need to re-run the script multiple times until the text no longer re-wraps when adjusting the image height.
In some cases, depending on the amount of text, a solution doesn't even exist.
In other cases, the script will jump between two positions, basically two different numbers of text rows, each resizing the image, causing the text to jump to the other number of rows, causing the whole thing to tremble indefinitely. I've actually seen this quite a few times, on production websites. The general fix is to record each resizing step and, should the script get any of the previous values, kill it. An ugly fix for an ugly bug.
And, in some other cases, you might find multiple possible "solutions". Which one should the script pick?
Picture all this in the context of resize events (a user flipping their tablet from landscape to portrait and back) and you got a recipe for disaster, UX-wise.
Not to mention browsers nowadays allow users to override font-size or font-family, giving control over readability. How would your script cope with this change?
(2) How this problem is typically solved.
There are a few distinct considerations:
the image needs to have a minimum size, at which it conveys whatever message it carries. It needs to remain "readable" at all times. Not too small, but not too large, either. It has to be in balance with the amount of text.
if there's too much text, you either make its box scrollable (depending on case) or you crop the sides of the image (if image is "croppable" - from a graphical POV).
the text needs to remain readable (with ease) at all times (lines shouldn't be too long or too short)
typically, you want to roughly determine a ratio between the minimal image size and a paragraph width good for readability and set a consistent ratio (throughout the whole app/website) between the two (design consistency pays off in how your website is perceived as a whole - it provides rhythm and an overall feeling of confidence and reliability, when done right). Go with 1:1, 2:1, 3:1, 1:2, 1:3, based on paragraph length and readability. Another good ratio is 1:1.618 (the golden ratio - it's pleasing to the eye, without an exact explanation - debugging humans is particularly difficult)
a typical solution is to wrap the paragraph into a slightly bigger, visible box, with a slightly different background or border color. This gives you significantly more flexibility in matching the image height. See the examples below.
below a particular container width, you want the two elements (the image and the text box) to wrap, so they both remain readable and attractive (e.g: responsiveness)
A few bad examples you probably want to avoid (but you're currently asking for), followed by a possible answer to the Y problem:
.container {
display: flex;
max-width: 600px;
margin: 0 auto;
margin-top: 1rem;
justify-content: space-between
}
.proper img {
width: 50%;
}
.proper div {
background-color: #F5f5f5;
display: flex;
align-items: center;
justify-content: center;
padding: 2em;
}
.proper.two div {
background-color: transparent;
border: solid #ddd;
border-width: 1px 0 1px 1px;
}
<div class="container">
<h3>What you probably don't want</h3>
</div>
<div class="container">
<div>Spiff up your work with our random beer Lorem Ipsum generator. Beer!</div>
<img src="https://random-ize.com/lorem-ipsum-generators/beer/suds3.jpg" style="max-width: 528px">
</div>
<div class="container">
<div>Spiff up your work with our random beer Lorem Ipsum generator. Beer!
</div>
<img src="https://random-ize.com/lorem-ipsum-generators/beer/suds3.jpg" style="max-width: 515px">
</div>
<div class="container">
<div>Spiff up your work with our random beer Lorem Ipsum generator. Beer!
</div>
<img src="https://random-ize.com/lorem-ipsum-generators/beer/suds3.jpg" style="height: 1em">
</div>
<div class="container">
<div>Spiff up your work with our random beer Lorem Ipsum generator. More Beer!
</div>
<img src="https://random-ize.com/lorem-ipsum-generators/beer/suds3.jpg" style="height: 2em">
</div>
<div class="container">
<h3>What you probably want</h3>
</div>
<div class="container proper">
<div>Spiff up your work with our random beer Lorem Ipsum generator. Beer!</div>
<img src="https://random-ize.com/lorem-ipsum-generators/beer/suds3.jpg">
</div>
<div class="container proper two">
<div>Spiff up your work with our random beer Lorem Ipsum generator. Beer!</div>
<img src="https://random-ize.com/lorem-ipsum-generators/beer/suds3.jpg">
</div>
As a bonus, what golden ratio can do for you:
* {
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 0 2.1rem;
}
.container {
padding: 2.1rem 0;
max-width: 500px;
margin: 0 auto;
min-height: 100vh;
display: flex;
align-items: center;
}
.golden-ratio {
border-radius: .35rem;
overflow: hidden;
display: flex;
justify-content: space-between;
background-color: white;
color: #aaa;
aspect-ratio: 1.618;
box-shadow: 0 1px 5px 0 rgb(0 0 0 / 10%), 0 2px 2px 0 rgb(0 0 0 / 07%), 0 3px 1px -2px rgb(0 0 0 / 06%)
}
.image-container {
flex-grow: 1;
background: #ddd url('https://random-ize.com/lorem-ipsum-generators/beer/suds3.jpg') 100% /cover;
}
.content {
flex: 0 0 61.8%;
font-size: 1.5rem;
font-style: italic;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10%;
}
#media (max-width: 600px) {
.golden-ratio {
flex-direction: column-reverse;
aspect-ratio: unset;
}
.content {
flex-basis: 50%;
padding: 3rem;
font-size: 1.2rem;
}
.image-container {
aspect-ratio: 4.16;
flex-basis: 50%;
}
}
<div class="container">
<div class="golden-ratio">
<div class="content">Spiff up your work with our random beer Lorem Ipsum generator. Beer!</div>
<div class="image-container"></div>
</div>
</div>
I'm a very beginner at react-native. I'm trying to design like the image given below. But can't make the red marked part. Can anyone help me to solve this by saying what CSS property should I use to design this part? I know I have to use border-radius but can't reach out what would be the other property for making the appropriate design like the image given.
Take a look at the box-shadow property (Docs here)
.card {
border-radius: 10px;
height: 100px;
width: 200px;
box-shadow: 0px 5px 6px -1px #58585838;
}
<div class="card">
</div>
Can you put your code so we can see where's the problem?
But you can use these properties to change it:
borderBottomRightRadius:value,
borderBottomLeftRadius:value
Example:
borderBottomRightRadius:10
I´m trying to do the following on a website. I guess it´s quite simple for thoose who have programmed alot but for me it´s new. Can someone show me how to code this? Thanks!
Layout on computer screen and mobile screen
You need to use media queries to make your HTML and CSS code produce different results in user's browser on different devices.
Media queries usually based on max-width of the browser viewport.
So, if browser viewport will be less than 800px wide, additional styles will be applied.
.box
{
display: inline-block;
margin: 0 10px;
width: 180px;
height: 180px;
border: 1px solid #CCC;
background: #DDD;
}
#media screen and (max-width: 800px)
{
display: block;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
For iPads & iPhones
If you need to have different layouts on iPads and iPhones, you need to take proper media queries from this article: http://stephen.io/mediaqueries/.
You have to write specific CSS rules for each device you'd like to support in particular.
Layout examples:
Desktop layout
Tablet layout
Phone layout
(Pictures are from w3schools.com)
About media queries:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
http://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
I am devolping app using angular js and ionic framework. I want to show border right only for odd numbers.
Here is my code:
<div class="media-body" style="padding-bottom:25px;">
<h2 class="align_center">{{services.name}}</h2>
<a href="#job/{{services.id}}">
<h2 class="align_center_des">{{services.description}}</h2>
</div>
</div></div>
Here is the Css
.col-32-custom {
width: 32%;
float: left;
margin-left: 1%;
border-right: 1px solid #E4E4E4;
margin-bottom: 31px;
height: 144px;
}
Here is fiddle:
https://jsfiddle.net/asetkL0n/
CSS also allows you to target specific odd or even elements. An example to that could be:
.col-32-custom {
width: 32%;
float: left;
margin-left: 1%;
margin-bottom: 31px;
height: 144px;
}
.col-32-custom:nth-child(odd) {
border-right: 1px solid #E4E4E4;
}
wherein, inside that nth-child, you can pass, "odd","even","2n","2n+1", or any expression in n.
I think the best solution is to use ng-class, so you have to create a class that will only add the border right.
I presume you are in an ng-repeat loop so the code will look like
<div data-ng-class="{border-right: ($index%2)===0}" class="col-32-custom">
Here you have the condition for the even number ($index%2)===0 so the div will have border-right class on event number.
you can use ng-class-odd / ng-class-even within ng-repeat to add specific classes to this items.
example here : ng-class-odd
We have a solution utilizing JavaScript, but I'm also curious if there is a way to do this with pure CSS?
The Situation
I'm relatively new to responsive design, and in the past have stuck with positioning, etc to achieve my layouts. I'm attempting to create a simple responsive header that resizes in a specific way.
My Dilemma
The header is a 29px high bar at the top of the page, with 29x29 buttons at either end. In the middle, bordering the button on the right, is a div (for page titles) that I want to have a min width of 300, but I also want it to expand with the browser width.
Here is the catch: I want this title div to pull away from the left button, leaving a gap of a max-width of 200px. Once the max-width of the gap is reached, I would like the title div to start expanding, staying pressed up against the right button. See as follows.
note: I've created a jsfiddle here for experimenting
I've modified your JSFiddle and added a bit of JavaScript to get the effect I think you're looking for. There are also comments to walk you through exactly what the JS code is trying to accomplish.
Essentially, I'm binding a handler to the window.resize event, calculating the available space in the header, and adding or subtracting from the title container to maintain its width.
Okay well here is what I have so far. WILL EDIT in the morning (kind of tired)
I feel this is definitely possible but it does require javascript. The fact that you want there to be a 200px space available requires javascript or some sort of programming to tell the styling to do that.
<!DOCTYPE html>
<html>
<style>
html, body { height: 100%; }
#container { margin-top: 29px; }
header { height:29px; margin: 0 49px; background-color:#999999; }
#div1 { width: 29px; height: 100%; background-color: yellow; display: inline-block; }
#div2 { width: 100%; height: 100%; background-color: blue; display: inline-block; }
#div3 { width: 29px; height: 100%; background-color: red; display: inline-block; float: right;}
#div4 { height: 100%; background-color: yellow; display: inline-block; float: right; }
</style>
<body>
<div id="container">
<header>
<div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div><div id="div4">div4</div>
</header>
</div>
</body>
<script>
if (parseInt(document.getElementById("div2").clientWidth) >= 200) {
document.getElementById("div2").style.width = "200px";
}
</script>
</html>
So the way I went about it is rather than having 3 divs, I made 4 -- the original 3 you had, but then the white space you want to consider as, well open space, I made a div for that as well. I also have javascript so that when the window scales past a width of 200px, it will lock it at that width. Unfortunately, I'm not super polished with my CSS yet so I'm still trying to figure a way to get that working. If anyone wants to edit my answer, please feel free.
Another thing to point out is that while the javascript does working for if the nav is growing, it doesn't for shrinking. I didn't implement a way for it to be able to shrink if say the user decided to shrink his window size because I have it set to lock the width at 200px (I guess a way to work around that would be with an } else { clientWidth = "100%"? Not sure. Hope this gets you on the right track though.