Tips for connecting lines between md-radio-buttons housed in a div with a label using Angular Materials

I am looking to enhance my md-radio-buttons by adding connecting lines between them in a component that uses dynamic data.

<md-radio-group ng-model="selected"  layout="row">
  <div ng-repeat="i in items">
    <label>{{i.name}}</label>
  <md-radio-button  value="{{i}}"></md-radio-button>
  </div>
</md-radio-group>

The goal is to have a line drawn between every pair of buttons. The length of these lines should initially be set as a minimum distance apart, but can automatically increase if necessary.

Check out the CodePen example here

javascriptcssangularjsangular-materialmaterial-design

Answer №1

Just made some adjustments

class="{{$last ? 'last' : '' }}"

has been included in the 

md-radio-button

directive, followed by 

<div class="line"></div>

for styling purposes.

To complete the setup, add the following CSS code to your stylesheet:

.line {
    position: absolute;
    height: 5px;
    width: 52px;
    background: grey;
    left: -11px;
    top: -2px;
 }

 .last .line {
      display: none;
 }

Edit

I've updated my example to meet your dynamic needs. Please refer to This CodePen. I have added two "line" divs before and after, each covering 50% of the container div width. The first and last divs in the ng-repeat behave differently - the first one doesn't show the "before" line, while the last one doesn't display the "after" line.

Hope this resolves your issue.

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

Determining the position of p5.js input in relation to the canvas

Show me what you’ve got: function initialize() { var board = createCanvas(960,540); board.parent("drawingPad"); background('white'); var textbox = createInput(); textbox.position(10,10); textbox.parent("drawingPad"); } I’ve cre ...

javascripthtmlcsscanvasp5.js

Steps for accessing the controller scope from a directive nested within another directive:

I am in the process of developing code that is as generic as possible. Currently, I have 2 directives nested within each other, and I want the inner directive to call a method on the main controller's $scope. However, it seems to be requesting the m ...

javascriptangularjs

Determine if the html element is wrapping to a new line when zoomed in or when the text size on Windows is increased

My webpage has 2 labels displayed side by side, but due to the system text size being set at 150% (which is recommended) in Windows, the second label does not have enough space and gets pushed below the first label. I am looking for a way to determine if t ...

javascripthtmlcsswindowsbootstrap-5

Load select box with options upon document load

After the document loads, I want to populate a select box with values from my database using ajax and jQuery. Can someone help me identify what's wrong with my code? <select class="form-control sec" id="sec" name="sec"> <option value="s ...

javascriptphpjqueryajax

Is there a way to align my anchor tag so that my link appears perfectly centered both vertically and horizontally on the page?

Despite my efforts to find a solution, I am stuck with this issue. Here is the code I have been working on: <a href='/Customers' class='centre'>Start</a> I attempted to wrap it in a div tag and also wanted to add a small gr ...

htmlcssreactjs

Generating a collection of items within a JavaScript object

Struggling with sending a json object to a java API backend that requires an Object containing a list of objects. Wondering if it's possible to create a list of objects inside a javascript Object. While I know we can create an "Array" of objects with ...

javascriptarraysjsonobjectdata-structures

Adjusting the spacing of the first letter using CSS, leave room

I'm encountering issues with the alignment of titles and text using the 'Lato' Google font. It seems like there is a space or kerning issue on the first letter causing them not to align properly to the left. Any suggestions on how to fix thi ...

htmlcssfontswebfonts

CSS: The height of floating divs is set to 0

I'm attempting to align 2 divs next to each other within another div, creating 2 columns of text with the outer div forming a border around both: HTML <div id="outer"> <div id="left"> ... <div id="right"> </div& ...

htmlcss

Is it possible for Typescript to resolve a json file?

Is it possible to import a JSON file without specifying the extension in typescript? For instance, if I have a file named file.json, and this is my TypeScript code: import jsonData from './file'. However, I am encountering an error: [ts] Cannot ...

javascripttypescriptwebpack

Determine the number of visible li elements using jQuery

Currently, I am utilizing a jQuery script to count the number of li elements in my HTML code. Here is an example of the setup: HTML: <ul class="relatedelements"> <li style="display:none;" class="1">anything</li> <li style="disp ...

jqueryhtmlcssjquery-selectorshtml-lists

Modify the behavior of the tab key using JavaScript

I'm currently working on a text editor embedded within a contenteditable div. My goal is to modify the [TAB] functionality so that instead of shifting focus to the next element (as is done by default in browsers), it will either insert spaces or a &b ...

javascript

Would you like to learn how to extract data from a specific textbox using jQuery and save it to a variable when the textbox is in

Below is a textbox that I am working on: <input type="text" name="company" id="company" required /> I am trying to figure out how to use jQuery to capture the values inside the textbox whenever they are typed or selected. Despite my efforts, I hav ...

javascriptphpjquery

No AngularJs HTTP resource could be located on the WebAPI

Currently, I am working on an Angular application that utilizes WebAPI. Whenever I make a call to any method, I encounter the error message "HTTP resource not found" within Angular. This is the Angular call: service.Login = function (email, password, call ...

angularjsasp.net-web-api

Implementing setInterval() leads to the dynamic alteration of images

I've created Marquees using CSS animations and a countdown timer. The Marquees display 100 random images that move from left to right and right to left. However, when the countdown timer decreases, the images in the Marquee change but the scrolling co ...

javascriptreactjssetinterval

What sets Gulp-Browserify apart from regular Browserify?

After switching from Grunt to Gulp recently, I find myself still learning the ropes. Can anyone shed some light on the distinction between using Gulp-Browserify versus just Browserify? I've heard that Gulp-Browserify has been blacklisted and seen som ...

javascriptnode.jsgulpbrowserify

Displaying Bootstrap star rating twice in a recursive manner

After reading about the issue with Bootstrap star rating displaying twice on Stack Overflow, I found myself facing a similar problem. <div class="row"> <input id="input-id123" type="number" class="" min=0 max=6 data-stars=6 step=1> </di ...

jqueryangularjstwitter-bootstraprating

What is the best way to showcase HTML content in columns with a horizontal scrolling feature?

I am trying to showcase a list of basic HTML elements such as divs, paragraphs, etc. within a fixed height container, arranged in columns with consistent width. I want them to be horizontally scrollable, similar to the layout displayed in this image. Thi ...

csshtmlscrollinternet-explorer-11

Tips for evenly distributing these cards

Check out the full code on Codepen.io <div class="card-container"> <div class="card col-lg-4 col-sm-6 col-xs-12"> <div class="side">Jimmy Eat World</div> <div class="side back"><img ...

htmlcssbootstrap-4

What could be causing my server to not fully read my json file?

I created a function that sends a get request for fav.json and assigned the id="fav_button" button to execute this function. Additionally, I configured an express server. However, upon clicking the button, only the last item in the json file is displayed. ...

javascriptjsonexpress

Using a custom font in a Django project without relying on the Google Fonts API

I've hit a roadblock in my programming journey and I'm seeking help. As a newcomer to both programming and Django, I've been following a helpful tutorial up until part 4. Everything was going well until I stumbled upon a new font online cal ...

htmlcssdjangofonts