My goal is to center the icon horizontally within the "Data" column:
Currently, I have applied textAlign: center to the column:
Additionally, I am using CSS in the icon renderer function to horizontally center it:
Despite these efforts, the icon remains left-aligned.
What more can I do to ensure that the icon in the column is centered horizontally?
By including align: 'center' in the actioncolumn item, I was able to achieve the desired outcome. Here's how it looked:
{
xtype: 'actioncolumn',
text: 'Edit',
align: 'center',
items: [{**}]
}Without any way to test, I'm taking an educated guess here.
It seems like the margin: 0 auto property isn't successfully centering the image.
My suggestion is to try adding the display: block attribute to the image - this might help your margin rule work as intended.
Perhaps consider updating the render function in this way:
function displayIcon(val) {
if(val=='active') {
return '<div style="width:100%;height:16px;background-image:url(/images/icon_blue_dot.png);background-position:center center;background-repeat:no-repeat;"> </div>';
} else {
return '<div style="width:100%;height:16px;background-image:url(/images/icon_green_dot.png);background-position:center center;background-repeat:no-repeat;"> </div>';
}
}
I'm experiencing some difficulty with loading a custom URL. Essentially, the user will click on a series of navigation links that will dynamically load the relevant content in a tabbed bootstrap jumbotron. The navigation links vary based on data store ...
I'm struggling to create a striped colored background with a narrow center single color background on top for showcasing articles and photos. However, I am unable to get the colored background to display correctly. Despite trying different approaches ...
I recently implemented an AJAX post request in my backend Rails application to upload a file. Upon successful posting, the response contains a JSON list of files. Now, I face the challenge of reloading the file list on my 'detalhes.html.erb' vie ...
Isn't it interesting that I couldn't find anything on Google, but I believe you can assist me. I have a Table containing different accounts. Upon clicking on a specific row, I want another table related to that account to slide in. This secondary ...
Take a look at this example: wthdesign.net/website/olaf&co/index.php I am currently working on creating a responsive layout, but I am struggling to figure out how to make the "#content" div stretch with its child div when there is more content than ex ...
When I click on an <a> tag, I want to display a div and wait for 10 seconds before redirecting. However, the div is currently being shown immediately without waiting. Here is the HTML code: <a class="clickHereToDisplay" href="http://www.google.c ...
In my code, I have an icon that is displayed conditionally using ng-class. I am looking to include ID's for both the HTML elements. <i ng-show="ctrl.data.length > 1" ng-class="{'glyphicon glyphicon-chevron-down': !ctrl.isOpen, ...
I want a textarea element to appear or disappear based on the selected state of the radio buttons before it. If "no" is chosen, the textarea will be hidden, and if "yes" is chosen, the textarea will become visible. <fieldset class="input-group form-che ...
I am facing an issue with my dynamically updating form. When I submit the form, I want to post the data to a views function and receive a response. Below is the code from my template file: $("#myForm").submit(function(){ event.preventDefault(); va ...
Currently immersed in the development of a sprawling website using Vue.js, I find myself grappling with the architecture of Vuex store. The current folder structure is as follows: . ├── build ├── src │ └── components │ ├ ...
I attempted to use the :nth-of-type selector, but I am uncertain if it is feasible or if it accomplishes what I desire. My goal is to create an alternating style: two paragraphs aligned on the left, followed by two on the right, and so forth, regardless of ...
I've been working on a feature in my Express router that updates data in a MySQL schema for 'members' of clubs. The members table has various columns like member_id, forename, surname, address, etc. I've successfully created an Express ...
I've been diving into Django and am eager to implement ajax functionality. I've looked up some examples, but seem to be facing a problem. I want to display all posts by clicking on a link with the site's name. Here's my view: def archi ...
Instead of the booking website, this is what is being displayed. Below is the code snippet: index.js import React from 'react' const Appointment = () => { return ( <iframe src='https://outlook.office365.com/owa/calendar/<a ...
Within my list, I have a div element wrapped in an anchor tag. Here is an example of the code: <li> <a href="http://google.com/"> <div id="tease-info"> <div class="inset-img-border fade"></div> <img src=" ...
I am working on a component in ReactJS that involves a circle in the center displaying the average (rendered as a div element), with 12 progress bars aligned around it at equal angles. To achieve this, I am utilizing React Bootstrap ProgressBar. <Progr ...
I am currently working with a client on the website . One of the features on the site is a slider at the top that allows for image swapping using pure CSS. However, the client recently requested that the images change when hovering over radio buttons or au ...
I'm dealing with a bar column that changes color based on the percentage value. However, some of the text is not visible to users because it falls within the white section of the bar. When selected, the text becomes visible but not otherwise. Is the ...
Can anyone help me with a CSS solution to make boxes with different heights stack underneath each other neatly, similar to Tetris? Here's my code: CSS #page .equipeBox{ float:left; width:280px; padding:10px; margin:10px; backgro ...
When postMessage() is triggered within the beforeunload window event in an Ionic 2 browser, I've noticed that the message doesn't make it to the parent. However, if the same message is sent during the unload or load event, it is received successf ...