How to apply border-radius to a single column within an Ionic row?

My ionic view contains the following:

<div>
  <div class="row">
    <div class="col col-80" style="background-color: lightgrey;border: 1px solid;border-radius: 15px;">Row 1</div>
    <div class="col" style="text-align: center;"><a class="icon ion-edit"></a></div>
  </div>
  <div class="row">
    <div class="col col-80" style="background-color: lightgrey;border: 1px solid;border-radius: 15px;">Row 2</div>
    <div class="col" style="text-align: center;"><a class="icon ion-edit"></a></div>
  </div>
</div>

I am trying to achieve a design where the first column has a background color, one border around the entire column, and that border with a border-radius. The current code creates individual borders around each row instead of what I need. Is there a way to create a single border for the whole column?

htmlcssangularjsborderionic-framework

Answer №1

Sure, you could implement it in this way:

<section>
  <div class="row">
    <div class="col col-80" style="background-color: lightgrey;border: 1px solid;border-top-right-radius: 20px;">Panel A</div>
    <div class="col" style="text-align: center;"><a class="icon ion-edit"></a></div>
  </div>
  <div class="row">
    <div class="col col-80" style="background-color: lightgrey;border: 1px solid;border-bottom-right-radius: 15px;">Panel B</div>
    <div class="col" style="text-align: center;"><a class="icon ion-edit"></a></div>
  </div>
</section>

https://jsfiddle.net/abc123/

If that answers your query.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Develop a container element with protective measures against external CSS styles impacting internal elements

As I work on integrating my webpage code into a large project, I have encountered an issue. The entire project code is contained within a div element inside the <main> tag. However, when I add this container div within the <main> tag, the pro ...

htmlcss

Having trouble extracting text from a div element using Python

for item in driver.find_elements_by_xpath("//div[@class='d3-tip n']"): custom_style = item.get_attribute('style') transparency = custom_style[:32] if transparency = ...

pythonhtmlseleniumxpathweb-scraping

Fuel Calculation - Unable to pinpoint the error

My JavaScript Code for Calculating CO2 Emissions I'm working on a program that calculates how much CO2 a person produces per kilometer. This is part of my school project and I'm still learning, so please bear with me... I also just signed up on ...

javascripthtmlbootstrap-4

Issues with the Click Event on Angular Calendar

I am currently using the angular calendar from the GitHub repository https://github.com/10KB/angular-clndr but I am facing an issue with my click event not working, even though I have copied the code exactly as shown in the link. If there are any setup st ...

angularjsangularjs-directivecalendar

Is there a way to utilize an Angular Material checkbox without any extra gaps or spacing?

Currently, I am working with Angular Material and trying to figure out how to remove the default spacing around the checkbox. The checkboxes in Angular Material are typically surrounded by some space (as shown in the image). Is there a simple way to elimin ...

cssangularangular-material

Troubleshooting a vertical overflow problem with Flexbox

Struggling to design a portfolio page for FreeCodeCamp using flexbox layout due to vertical overflow issues. Here is the HTML: <div class="flex-container flex-column top"> <header class="flex-container"> <h1 class="logo"><i clas ...

cssflexbox

Analyzing the HTML code retrieved from a jQuery AJAX call

My goal may appear straightforward: use HTML page retrieval with $.ajax() to extract a value from it. $(function () { $.ajax({ url: "/echo/html", dataType: "html", success: function (data) { $('#data').tex ...

javascriptjqueryhtmlajax

Arrange two span elements in opposite directions within an li element

When creating a list of 5 items with HTML using the li tag, each item has data formatted as a:b. <li class="subtitle"> <span>a </span>: <span>b</span></li> <li class="subtitle"> <span>c </span>: <sp ...

htmlcss

The video link was not found during the page scraping process

I'm trying to download a video from the page below: After inspecting with Firebug, I found the video url, <video src="https://09-lvl3-pdl.vimeocdn.com/01/1449/2/57246728/138634997.mp4?expires=1457996449&amp;token=089e435c20e7781d36fce" preloa ...

pythonhtmlseleniumvideoweb-scraping

CSS techniques for aligning content

I am currently working on designing a website template, and I have encountered an issue with positioning three individual columns that contain blocks of content. My objective is to have the first block of content in each column start at the top of their re ...

htmlcsspositioning

Discover the process for simulating a browser zoom using JavaScript

Is there a way to control the browser's zoom level using JavaScript? I decided to create my own solution to override the default browser zoom behavior. The current code works fine if starting from a scale of 1, but I'm facing an issue when alrea ...

javascripthtmlcsszoomingpinchzoom

The display block style is not functioning properly

I am experiencing an issue with my HTML design. Even after setting the display to inline-block, the logo and text are not appearing on the same line. .logo img { border-width: 0; height: auto; max-width: 100%; vertical-align: left; } .lo ...

htmlcss

Tips for positioning the search bar on the opposite side of the navbar in Bootstrap 5

In my navbar, I have items aligned on the left and a search bar aligned on the right. However, when I try to move the items to the right using the ms-auto class, only the items move and the search bar stays in place. How can I adjust the alignment so that ...

htmlcsstwitter-bootstrapbootstrap-5

Issue with mime-type when uploading a file in a React js application on Windows operating system

In my React application, I have implemented the following HTML code to upload files: <div className="form-group files"> <label>Upload Your File </label> <input type="file" className="form-control" multiple onChange={this.onC ...

javascripthtmlreactjsfile-uploadbootstrap-4

Using ng-repeat in Angular causes the style of a div to become hidden

Utilizing angular ng-repeat to generate multiple divs, the original template html code is as follows: <div class="span5 noMarginLeft"> <div class="dark"> <h1>Timeline</h1> <div class="timeline"> <div c ...

htmlcssangularjs

Instructions on how to navigate back one page to determine which page initiated the action

I am looking for a solution to implement a back button that takes me back one page while caching it. Currently, I am using the following code: <a id="go-back" href="javascript:history.go(-1)" type="button" class="btn btn-danger">Back</a> Howe ...

javascriptphphtml

Timeout causes failure in AngularJS jasmine promise testing

I need help testing my login controller, here is the structure of it: describe('LoginController', function() { beforeEach(module('task6')); var $controller, LoginService; beforeEach(inject(function(_$controller_, _LoginSe ...

javascriptangularjsjasminepromiseq

Adding images dynamically into a Bootstrap modal when clicking using Angular's ng-repeat

I would like to create a page with photos where users can click on an image and have it enlarge in a bootstrap modal. The challenge is dynamically adding each specific image to the modal when clicked. Below is how my html currently looks: <div class="c ...

javascriptjqueryhtmlangularjstwitter-bootstrap

Using Angular-Translate to Replace Variables in Title Tags

In my AngularJS project, I am using Angular-Translate version 2.6.1. One of the challenges I am facing is how to include a variable in a translated title attribute within a span element. <span title={{'translationID'|translate:'{username ...

javascripthtmlangularjsangular-translate

What is the best way to integrate a PHP page with its own CSS and JavaScript into a Wordpress page?

I'm facing a challenge with integrating a dynamic PHP table into my WordPress page. Despite working perfectly when opened locally, the CSS and JavaScript used to create the table are not functioning properly when included in a WordPress page via short ...

javascriptphpcsswordpress