CSS design sheets are an essential component of web development

I have been attempting to display the versions one below the other, but so far I haven't been successful. Here is the code I am working with:

<input type="text" 
               data-ng-model="file"
               typeahead="document as document.fileName for document in findDocumentsByTerm($viewValue)"
               typeahead-template-url = "documentContactTemplate.htm"  />
            <script type="text/ng-template" id="documentContactTemplate.htm">
                <div class="icon-hover">                    
                    <table class="table">
                        <tr data-ng-click="$event.stopPropagation()">
                            <td style="border:none;"><b>{{match.model.fileName}}</b></td>
                            <td style="border:none;"><span>&nbsp;</span></td>
                            <td style="border:none;">
                                <div data-ng-repeat="documentFileVersion in match.model.documentFileVersions">
                                    <input type="checkbox" data-ng-model="selected" ng-true-value="true" ng-false-value="false" data-ng-click="match.model.vm.attachFile(selected, match.model, documentFileVersion)" /> {{documentFileVersion.version.substr(1)}}
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </script>

and currently it appears like this:

https://i.sstatic.net/xwO3t.png

Does anyone know how I can arrange the versions one below the other?

htmlcss

Answer №1

If you want to enhance your table, consider inserting a <thead> section and defining the width of each column.

<div class="icon-hover">
    <table class="table">
        <thead>
            <tr>
                <th style="width: 60%"></th>
                <th style="width: 10%"></th>
                <th style="width: 30%"></th>
            </tr>
        </thead>
        <tbody>
            <tr data-ng-click="$event.stopPropagation()">
                <td style="border:none;"><b>{{match.model.fileName}}</b></td>
                <td style="border:none;"><span>&nbsp;</span></td>
                <td style="border:none;">
                    <div data-ng-repeat="documentFileVersion in match.model.documentFileVersions">
                        <input type="checkbox" data-ng-model="selected" ng-true-value="true" ng-false-value="false" data-ng-click="match.model.vm.attachFile(selected, match.model, documentFileVersion)" /> {{documentFileVersion.version.substr(1)}}
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Answer №2

Here is some code that could be helpful:

1.) Make sure to include a container inside the repeater and place checkboxes and labels inside it.

2.) Add 'vertical-align: top' in the "{{match.model.fileName}}" td.

Please refer to the attached code snippet:

 <table class="table">
            <tr data-ng-click="$event.stopPropagation()">
                <td style="border: none;vertical-align:top">
                    <b>{{match.model.fileName}}</b>
                </td>
                <td style="border: none;">
                    <span>&nbsp;</span>
                </td>
                <td style="border: none;">
                    <div data-ng-repeat="documentFileVersion in match.model.documentFileVersions">
                        <div><input type="checkbox" data-ng-model="selected" ng-true-value="true" ng-false-value="false"
                            data-ng-click="match.model.vm.attachFile(selected, match.model, documentFileVersion)" />
                        {{documentFileVersion.version.substr(1)}}</div>
                         <div><input type="checkbox" data-ng-model="selected" ng-true-value="true" ng-false-value="false"
                            data-ng-click="match.model.vm.attachFile(selected, match.model, documentFileVersion)" />
                        {{documentFileVersion.version.substr(1)}}</div>
                         <div><input type="checkbox" data-ng-model="selected" ng-true-value="true" ng-false-value="false"
                            data-ng-click="match.model.vm.attachFile(selected, match.model, documentFileVersion)" />
                        {{documentFileVersion.version.substr(1)}}</div>
                         <div><input type="checkbox" data-ng-model="selected" ng-true-value="true" ng-false-value="false"
                            data-ng-click="match.model.vm.attachFile(selected, match.model, documentFileVersion)" />
                        {{documentFileVersion.version.substr(1)}}</div>
                         <div><input type="checkbox" data-ng-model="selected" ng-true-value="true" ng-false-value="false"
                            data-ng-click="match.model.vm.attachFile(selected, match.model, documentFileVersion)" />
                        {{documentFileVersion.version.substr(1)}}</div>
                    </div>
                </td>
            </tr>
        </table>

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

Tips on transmitting form information from client-side JavaScript to server-side JavaScript with Node.js

Having created an HTML page with a form, my goal is to capture user input and store it in a JSON file. However, I've run into some confusion... In the process, I utilized the express module to set up a server. My mind is juggling concepts such as AJA ...

javascripthtmljsonnode.jsajax

Ensuring various conditions with ngIf

I've created a toggle function that updates the text of a link, but I'm struggling to handle multiple conditions. For example, *ngIf="condition1 or condition2". Below is an excerpt from my code: <a routerLink="/ads" class="tip" (click)="togg ...

htmlangular

Error: The function explore() is missing a required parameter called 'path'

Here is my code snippet: def navigate(directory): # To avoid issues with forward slashes, normalize the path directory = os.path.normpath(directory) if os.path.isdir(directory): subprocess.run([FILEBROWSER_PATH, directory]) elif os.path.isfile(directo ...

pythoncsspython-3.xtkinter

What is the best way to create a fixed positioning for a div within a Material-UI table container?

When using the Material UI Table, I encountered an issue with applying the sticky property. The table itself works fine, but I also have a button inside the TableContainer that should be sticky alongside the table head. I attempted to achieve this by using ...

cssmaterial-ui

Why is it impossible for me to delete the class / property of this object?

Within a series of nested divs, there are additional divs containing multiple imgs. The goal is to cycle through these images using CSS transitions. To achieve this, a JavaScript object was created to track the divs, sub-divs, and images. Three arrays were ...

javascripthtmlcssarrays

Arrange a div beneath another div that is positioned absolutely

Within my code, I have a div with the property of absolute positioning referred to as "abs". Right after this div, there is another div called "footer" which does not have any specified position value assigned to it. Even though I've experimented with ...

htmlcss

The active tabs or placeholders do not update properly when I click on them

Is there anyone who can help figure out why the tabs are not functioning as expected? The goal is for the tabs to change the input field placeholder and perform a search based on the active tab. If you're able to assist, please review my complete cod ...

javascripthtmlcss

Angular - attach event listener to Bootstrap dropdown menu

Looking to add an overlay on the screen behind a menu when it's expanded, but unsure of how to do this with Bootstrap. Any suggestions on listening for when the menu expands? Here is my current menu code: <link rel="stylesheet" href="https://st ...

javascriptjqueryhtmlbootstrap-4

Using a JavaScript script in my HTML alongside Vue.js is not possible

Hello there! I recently created a Node.js server and now I'm trying to display an HTML file that contains a Vue script which loads data using another method written in a separate JS file. However, when I attempt to load my HTML file in the browser, ...

javascripthtmlnode.jsvue.js

Load a form using ajax and submit it using jQuery

For a while now, I have been facing challenges in figuring out what's going wrong with my code. The issue arises when I try to submit a form using jQuery that was loaded through ajax. The form loads perfectly fine within a div after invoking the ajax ...

phpjavascriptjqueryhtmlajax

Removing HTML elements using JQuery

Example: http://jsfiddle.net/axfsD/1/ I'm facing an issue with removing HTML tags from my webpage. Below are two examples where I have used the replace command to strip tags. However, it successfully strips the tags of the second button but not the f ...

javascriptjqueryhtml

To ensure that the first three digits of a phone number are not zeros, you can implement a JavaScript function to validate the input

I've been working on validating a phone number using JavaScript, but I've hit a roadblock. I need to ensure that the area code (first 3 numbers in 999) cannot be all zeros (0). While I know how to create the desired format (like xxx-xxx-xxxx), ...

javascripthtmlformsvalidation

What methods can I use to minimize the frequency of the blue box appearing around text?

I successfully developed code that enables user interaction with text, triggering the opening of a modal box when clicked. In this modal box, the text turns red upon clicking, indicating activation of a checkbox. However, I notice that every time I intera ...

javascripthtmlcss

Utilize Flexbox to create a layout with 3 divs, organized into two columns where one column

I am attempting to transform <div></div> <div></div> <div></div> Three consecutive divs into the following format. Div 1 is red, div 2 is green, and div 3 is blue. I have achieved this using floats, like so: .div1 { ...

htmlcssflexbox

Challenge with the continuity of my Html/CSS coding

I am currently expanding my knowledge in web development with a focus on CSS. While I am familiar with JS and HTML, CSS is proving to be more challenging for me. I have been attempting to create a webpage using Bootstrap, but I have hit a roadblock with th ...

jqueryhtmlcsstwitter-bootstrap

Guide to showcasing user input using a Javascript function

I need assistance to show the user input via the submit button. Users will enter tool types and the first five inputs will be displayed in list items (li). Once the limit of 5 tools is reached, a message 'Thanks for your suggestions' should appea ...

javascripthtml

Selenium's click() function is functioning properly, however, the submit() function is not working

During my Selinium Webdriver tests, I have encountered a puzzling issue where I am unable to submit a form by using the submit() method on the elements within the form. However, I can successfully submit the form by calling click() on the submit button. To ...

phphtmlseleniumselenium-webdriverweb-testing

Is there a way to perfectly center text both vertically and horizontally to the right side of an image?

I'm working on developing a mobile website using jQuery Mobile and I want to include images in my "collapsible" elements. Here is the code I am using: <div data-role="collapsible" data-collapsed="true"> <h3><img src="image ...

htmlcssjquery-mobile

Unable to fetch the webpage element object

While attempting to extract data from the historical table on investing.com, I encountered an issue where I couldn't retrieve the column item and an error occurred. Traceback (most recent call last): File "<ipython-input-119-ba739f477693>", ...

pythonhtml

Issue with top-level navigation menu dropdown functionality

I am experiencing an issue with a dropdown menu that has top level and two sub levels. The problem is that while the sub levels function correctly when clicked, the top level does not navigate to the intended page upon clicking. var menu_Sub = $(".men ...

javascriptjqueryhtmlcssdrop-down-menu