I have a problem with aligning text in a single row I tried using Fexl approach as well as other approaches as well
also some of the data in my div is rendered dynamically using ng-repeat
the third column displays special data always.
all the rows from 3 columns should be aligned equally
please help me
link for plnkr http://plnkr.co/edit/LSLktvmvlaQtWUofzJvF?p=preview
I think I understand your question - I ran into a similar problem on another project, and I ended up giving each div a fixed height and setting the overflow to hidden. It takes a bit of testing, but if you're aiming for a responsive design, you can uses Sass to set it to different heights based on screen resolution.
Adding this CSS to your Plunkr would be a good starting point. Of course, you'd want to apply this to a custom class and not '.col-md-6':
.col-md-6 {
height: 100px;
overflow: hidden;
}
Increase the 'height' as needed to make sure all text fits.
Related
I have a react mui table where sometimes two adjacent rows are related. I want to show a chain icon (or similar) between the two related rows. Crude mockup below:
Is there a straightforward way to achieve this?
I'm having trouble finding the correct terms to describe what I need, hence google search is failing me. "Overlay" seems to be within a row or cell, and most "Overflow" search hits are about preventing overflow rather than intentionally causing it. Here's a codesandbox starting point if it helps: https://codesandbox.io/s/basictable-material-demo-forked-jzb96?file=/demo.js
There are two possible ways to achieve this effect. One is to use an absolutely positioned chain icon element and then offset its coordinates so that it "floats" between the two table row elements. It may take some playing around with the attributes but it would look something like
.chain-icon {
position: absolute;
left: 100px;
top: 10px;
z-index: 100;
}
The other option that might work is to place the chain icon inside the row and offset it with negative margins margin-top: -50px; and make sure overflow attribute is set correctly. Since it's a table, for either approach I would suggest adding a new column next to dessert and adding the icon to that row cell.
I used plain old css transform - Unsure if this is a good idea.
So, previously I was using the 'ml-auto' class for my navbar, for my dropdown to push itself all the way over to the left. However, I don't want it to push itself all the way to the left when it goes into a small screen, and the navbar changes into a vertical orientation.
I tried giving my NavDropdown the following class and ID:
className={styles.naviDropdown}
id='navigationDropdown'
and apply the following style to it
.naviDropdown#navigationDropdown {
margin-left: auto !important;
}
#media (max-width: 768px) {
.naviDropdown#navigationDropdown {
margin-left: 0 !important;
}
}
So, this seems like it would work perfectly well, but unfortunately, it does not. Doing this makes the website completely disregard any of the CSS, and makes my navbar look all wacky and evenly spaced, as opposed to justifying my links left, and navbar right.
I've found out, through the inspector, that for some reason, the id is being applied to the a element generated by React Bootstrap, not the encompassing div, which is given the proper class.
Any ideas what might be going on?
Any help would be much appreciated, and let me know if I need to provide more info!
Edit:
I tried reformatting my code in the ways specified within this Github discussion, and unfortunately, my issue still remains the same--the ID is assigned to the 'a' element, rather than the dropdown div.
Looks like all i needed to do was surround the dropdown element with a 'div' element and then apply the id to that. There might be some deeper issue at play here, but this fixed my issue.
I'm testing out the md-chips directive in AngularJS.
Is there any way of stacking the 'chips' vertically instead of appending the chips horizontally?
I have been trying out the demos found here:
https://material.angularjs.org/latest/demo/chips
The following CSS style is the minimum needed to enable chips to stack vertically:
md-chip {
clear: left;
}
The default CSS of md-chip's is
float: left and applying clear: left causes the chips to clear each other and stack vertically. Applying float: none or some other styles to change the float appears to easily break the default directive and causes one to be unable to access the input field and add new chips. I note that some other styles may need to be applied to fix the .md-chips container containing the chips such as limiting its width to get the desired result.
See: Vertically Stacking Chips Demo on Codepen
I need to dynamically change the header row height of an ng grid, depending on which column headers need to be displayed. Some columns have a very long header and I want the column name to wrap so they don't need to be excessively wide. I also don't want a lot of blank space if I initially set a tall header height, but then don't need the space if those long column names aren't displayed.
The issue is I cannot get the headerRowHeight to dynamically change. It took some time to realize that I cannot even initialize headerRowHeight using a scope variable the same way as the other gridOptions (see line 23).
See plnkr
The reason this doesn't work is that ng-grid uses absolute positioning under the hood. Grid Options are only fired once, and then the heights are set in the html after that using style= on the html dom node. (THIS IS AWFUL!) They even set the style manually on all of the underlying header dom nodes.
The other avenue I thought of was trying to redraw the grid using ngGridLayoutPlugin. I played around with this for 30 minutes with no luck. You could try manually redrawing the page itself. It looks like ng-grid is not very good at redrawing the grid, and they've made optimizations specifically for updating data, but not the styles.
The 3.0 beta unstable release looks like they've made a lot of changes, and you'll be able to do what you're trying to do easier... however, it is not ready for production. See the header cell class conditionals in this example: http://ui-grid.info/docs/#/tutorial/115_headerCellClass
I had a hell of a time trying to get ng-grid styling to do my bidding at my last job. At a certain point, we were ready to toss it because it was too restrictive. Good luck.
Use this in your CSS.
.ui-grid-header-cell-primary-focus {
line-height: 2.428571;
}
this is pretty frustrating...
basically i'm creating a menubar on a site, and have used css sprite to have a hover effect where the image changes as you hover over it. this is working fine, but i can't display multiple images inline because i have to use display:block in the css for the sprite/hover class for it to work.
here is some of the css code i have:
.x a {display:block; width:100px; height:100px; overflow:hidden;}
.x a:hover img {margin-left:-100px;}
/* ie6 needs this fix*/
.x a:hover {zoom:1;}
and then here is the code in the php file (it's part of a wordpress theme, this bit going in the header.php file):
<div class='x'><a href='#' alt='#'><img src='#' /></a></div>
note: the image used is a horizontal sprite, so two images merged into one (100x100 turned into 200x100).
this alone works fine, but then when i add something to it like:
<div class='x'><a href='#' alt='#'><img src='#' /></a></div>
<div class='x'><a href='#2' alt='#2'><img src='#2' /></a></div>
it makes it go to a new line. i thought it may be a padding issue where it's overflowing on the line, but i've tried doing just two images (total area taken up maybe 210px) and it's in a 911px container area and still goes to a new line.
i've tried using < span> tags, tables, inline-block, and several other things but still no success. at one point i got it to stay inline but then the image was placed beneath all the others, in the correct horizontal position but wrong vertical position.
the goal is to have about 8 100x100 images all in a row in the menu bar, with one spacing in between each one, in a container with width 911px. they all will be in the 'x' class so that the image changes when hovered over.
sorry for writing so much but wanted to get it clear. please help!
The divs are rendering as blocks, which is why the images aren't sitting beside eachother.
If I understand what you're trying to achieve correctly, adding a rule
.x { display: inline-block }
will do what you want.
I made a JSFiddle to try it out: http://jsfiddle.net/XZWzW/