I'm encountering a problem with the ngx-bootstrap sortable component.
My goal is to utilize the sortable component in a horizontal layout instead of the vertical one shown in the documentation examples. ngx-bootstrap sortable
If anyone has a solution or insight on why this might not be achievable with ngx-bootstrap, I would greatly appreciate your assistance.
bs-sortable utilizes internal div elements to display draggable items, resulting in a vertical arrangement due to the default display: block property of div.
To change this layout to horizontal, simply update the CSS property display to inline-block within the sortable-item class.
Template
<div class="row">
<div class="col">
<bs-sortable
[(ngModel)]="itemStringsLeft"
itemClass="sortable-item"
itemActiveClass="sortable-item-active"
placeholderItem="Drag here"
placeholderClass="placeholderStyle"
wrapperClass="sortable-wrapper"
></bs-sortable>
<pre class="code-preview">model: {{ itemStringsLeft | json }}</pre>
</div>
</div>
<div class="row">
<div class="col">
<bs-sortable
[(ngModel)]="itemStringsRight"
itemClass="sortable-item"
itemActiveClass="sortable-item-active"
placeholderItem="Drag here"
placeholderClass="placeholderStyle"
wrapperClass="sortable-wrapper"
></bs-sortable>
<pre class="code-preview">model: {{ itemStringsRight | json }}</pre>
</div>
</div>
styles.css
.sortable-item {
padding: 6px 12px;
margin: 4px;
font-size: 14px;
line-height: 1.4em;
text-align: center;
cursor: grab;
border: 1px solid transparent;
border-radius: 4px;
border-color: #adadad;
display: inline-block;
}
EDIT:
If you prefer to make style changes only within a specific component rather than globally in the style.css, you can utilize the ng-deep pseudo selector in that particular component.
app.component.css
bs-sortable::ng-deep .sortable-item {
padding: 6px 12px;
margin: 4px;
font-size: 14px;
line-height: 1.4em;
text-align: center;
cursor: grab;
border: 1px solid transparent;
border-radius: 4px;
border-color: #adadad;
display: inline-block;
}
Is it feasible to implement an effect on a website using CSS, JavaScript, jQuery, etc., that allows users to hover over individual letters of text and highlight each letter one at a time? This would create a 'zoom up' effect. Adding a small magni ...
Now that YouTube has transitioned from flash to HTML5, what are the unique features and functionalities of HTML5 that set it apart from flash? I am also curious to learn a more in-depth and intriguing aspect of HTML5 beyond what can be found through a sta ...
Initially, I was unsure about the kind of research I needed to conduct, which led me to asking a potentially duplicate question. Nevertheless, the code I am working with is quite simple: #my-container { height: 100vh; } <link rel="stylesheet" hr ...
I have a scenario where I have multiple checkboxes and corresponding labels. When the answer is correct, I want to change the background color of the selected checkbox and label. <input type="checkbox" id="a" class="check-with-label" /> <label fo ...
I am facing an issue while trying to load a web page within a div using an ajax call. Unfortunately, it's not working as expected and displaying the following error message: jquery.min.js:2 [Deprecation] Synchronous XMLHttpRequest on the main thread ...
I've been struggling to get this to display side by side in a two-column grid. Even after following Bootstrap tutorials, I can't seem to make it work. Check out the code below: <div class="row"> <div class="col-md-8 ...
I'm currently grappling with creating a grid layout using the powerful Ionic Framework. My main objective is to have an IonGrid that adjusts in such a way that it takes up the entire available height without requiring any scrolling to reveal hidden co ...
Seeking a way to display random divs on my webpage, I came across a stackoverflow solution: Showing random divs using Jquery The recommended code can be found here: http://jsfiddle.net/nick_craver/RJMhT/ Despite following the provided instructions, I am ...
I am currently working on creating a pug file for a signup form and I'm encountering an issue with the drop-down menu not functioning. How can I properly include my drop-down menu in the body parser? I initially assumed it would be processed with json ...
I'm completely new to Angular2 and I could really use some assistance with the following task. I need to take the input from a textbox and add it to a span in HTML. The requirement is to only make changes in the .ts file. I'm having trouble figu ...
As I work on documenting my project, I am looking to create documentation that will make it easier for beginners to understand the project's structure in the future. I am using Angular2 and documenting with Typedocs. My question is: Are there any solu ...
One of the services I am working with is a Rest service that sends data back in JSON format: {result:"success",message:"token"} The HttpClient Post Function is utilized to retrieve the response above getAuthResponse(username: string, password: string): ...
I am struggling with identifying the pressed button in a modal window, particularly when the modal content is loaded from a link href. While my actual code is generated dynamically in php, I have provided a simple example below using html. It seems that w ...
Being new to JS and JSON, I am struggling to find a suitable solution that works for me. I have two distinct json files. The first one: players.json contains the following data: { "players": [ { "id": 109191123, "surnam ...
Here is the scenario that needs to be implemented: An API call is made which returns a response containing an array of objects. The objects are then mapped to another array of objects. For each item in this new array, another API call needs to be made. Th ...
Creating emails with R using the RDCOMClient package has been a challenge for me. The emails contain HTML text encoded in UTF-8 along with images. However, I've encountered an issue where special characters do not display correctly after saving the em ...
I am looking for recommendations on libraries that can help me save HTML documents in memory as Word .DOC files. Any suggestions for both closed and open source options are welcome. Additionally, could someone provide links to these libraries based on the ...
I recently stumbled upon some interesting JavaScript code in the source of a web page: function fsb329142055() { var b=new Array(57,50,102,50,52,99,50,53,52,56,102,98,102,98,101,102,101,49,53,61,101,99,110,57,111,78,109,54,114,111,56,48,102,38,1 ...
My template includes a comments section where I have used the w-75 float-right class, but this causes the other column to be pulled to the side where the comments are displayed. https://i.sstatic.net/HSnGT.png Below is the code snippet from my template: ...
Can someone assist me with a query regarding PrimeNG p-table? I am looking to retrieve the value of rowsPerPageOptions. Below is a snippet of my HTML code: <p-table (onPage)="paginate($event)" [(first)]="first" [paginator]="true ...