Challenge encountered while attempting to implement grid system in ionic framework

I'm completely new to the world of ionic framework, and I really need some assistance in completing this view. Please see the image reference https://i.stack.imgur.com/WOBFw.png

I have made an attempt at it with the following code:

    <div class="row">
        <div class="col col-80"> 
          <div class="row">
            <img src="{{jobDetails.category.name}}.png" class="col col-10" width="30">
            <span class="heading col col-10" ng-bind="jobDetails.category.name"></span> 
            (<span ng-bind="jobDetails.subcategory.subCategoryName" class="heading"></span>)
          </div>
       </div> 
   </div>

Unfortunately, my efforts haven't produced the desired outcome so far.

If anyone could offer some guidance or support on how to achieve the correct view, I would be extremely grateful.

cssangularjstwitter-bootstrapionic-framework

Answer №1

I would be happy to provide assistance with the following response:

 <div>
      <div class="row">
        <div class="col col-10">
          <img src="" alt="not available">
        </div>
        <div class="col col-90">
          <span>
            Your text can go here
          </span>
        </div>
      </div>
      <p>In case the text overflows in the initial row...</p>
    </div>

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

Can we execute a function once a mandatory field in a form has been validated successfully?

Looking for a way to execute a function after validating required inputs in a form before submission. Any suggestions? And I'm specifically not using jQuery, but Angular ...

angularjshtmlvalidation

Having trouble invoking html2canvas within an AngularJS app

When I define html2canvas functions in my controller, the alert in html2canvas doesn't get fired and my canvasToImageSuccess function is not executed. Am I missing something here? In my controller, I have defined html2canvas functions as shown below ...

javascriptangularjshtml2canvas

Is there a way to ensure that the height of my images matches exactly with its width?

Is there a way to ensure that the height of my images always matches their width? I need the height of the images to dynamically adjust and match the width, even when the window is resized. For example, if the image width is 500px, the height should also ...

htmlcss

Creating a JavaFX label with a border radius of 20

I need help with creating rounded edges for two labels in my interface. I want the first label (Hello) to have rounded edges on the top left and top right, and the dummy label to have rounded edges on the bottom right and bottom left. I've attempted ...

javacssjavafxlabelcornerradius

The use of a Bootstrap row is leading to incorrect dimensions for FullPageJS

Within the body tag, I have included the following code snippet: <div id="container"> <div class="section profile"> <div class="row"> <div class="col-sm-6"> A </div> ...

javascriptjqueryhtmlcsstwitter-bootstrap

Looking to subtly transition from the current webpage to the next one with a fading effect?

I'm looking to create a smooth transition between web pages on my site by slowly fading out the current page and fading in the next one when a link is clicked. $(document).ready(function() { $('body').css("display","none"); $(&a ...

javascriptjqueryhtmlcss

Establish a primary background color for the React application, with the majority of the display content

I have been working on styling a React project where App.js mainly handles routing and navigation to its components: App.js import {useState, useEffect} from 'react'; import Models from './pages/Models'; import Loadingpage from ' ...

javascripthtmlcssreactjsfrontend

Remove the presence of a black square when selecting elements using CSS

Update: After some investigation, I discovered that the mysterious black square is actually a part of the scroll bar. By adding the following code snippet: select::-webkit-scrollbar { display: none; } The square no longer appears. Initially, my se ...

css

Setting up Angular with Gulp using the most recent version of NodeJS

I've been utilizing the repository A healthy Gulp Setup for setting up Gulp in my AngularJS project. Everything worked fine with an older version of nodejs, but when I switched to a newer version "NodeJS 4.2.2," I encountered numerous dependency erro ...

angularjsnode.jsgulp

Submitting a Form in Django with Angular

Hey there! I'm currently trying to submit data using angularjs in Django with reference to this post. Unfortunately, it's not working as expected for me. views.py def add(request, template_name="form.html"): if request.method == "POST": ...

angularjsdjangoforms

Debouncing in AngularJS with $watch

In my code, I have an HTML search field represented by the following: <input ng-model-options="{ debounce: 500 }" type="text" ng-model="name"> Along with the JavaScript snippet: $scope.$watch('name', function(newVal, oldVal) { ...

javascriptangularjswatch

Display a "Loading" image in the gallery before anything else loads

Can a animated loading gif be implemented to load before the gallery images, or would it serve no purpose? The image will be loaded as a background using CSS. <link rel="stylesheet" href="loading.gif" /> Appreciate your help! ...

javascriptjqueryhtmlcss

Exploring the main directive flow, attaining access to `ctrl.$modelView` in AngularJS is

Four Methods Explained: What Works and What Doesn't I recently created an angular js directive where I encountered difficulty accessing the ctrl.$modelValue in the main flow. In my quest to find a solution, I came up with four potential methods, eac ...

javascriptangularjs

Looking to manipulate and update information within a JSON file using AngularJS

Exploring the world of AngularJS, I've tried searching online but haven't found much helpful information yet. This is the content of my retails.json file: { "categories": [ { "dept_id": "123", "category_na ...

angularjsnode.jsfs

Error encountered with Protractor: 'TypeError: undefined is not a function'

I have explored various discussions on this particular error code. Nevertheless, I am finding it challenging to come across any solutions that are effective (or perhaps I am just not understanding them). While constructing a Protractor test for a webpage, ...

javascriptangularjsnode.jsprotractorkarma-jasmine

Getting the values of $scope variables from AngularJS in the controller to the view

I have a simple scope variable on my AngularJS Controller. It is assigned a specific endpoint value like this: $scope.isItAvailable = endpoint.IS_IT_AVAILABLE; How can I properly use it in my view (HTML) to conditionally show or hide an element using ng- ...

javascriptangularjsscopeangular-ng-if

Unable to make jQuery animate top function work

I have three rectangles set up like this. I've managed to make them disappear when clicking the close button on the right side of each rectangle, but I'm struggling with getting the remaining rectangles to move upward to fill the empty space. Her ...

jqueryhtmlcss

What could be causing my sticky positioning to not function properly when I scroll outside of the designated

My website is organized into sections, with each section corresponding to a hyperlink in the navigation menu. I've applied the CSS property position: sticky to my navbar, which works as expected within the section bounds. However, I want my red navbar ...

javascripthtmljquerycss

AngularJS does not retain selected value in radio button group

I am working on an Angular page that has a radio button group. Here is the code snippet: <span ng-repeat="radioButtonItem in radioButtonItem.Values"> <label class="radio-inline"> <input type="radio" name="radioBut ...

angularjs

The CSS styles are not being applied to the PHP code

I seem to have a tangled mess of CSS / PHP / HTML to deal with. The issue I'm facing is that something works on one PHP script but not the other. Here's a snippet of my code: <?php if ($daten->getData_DB_User($get_page_num) != fa ...

phphtmlcss