At this URL ( http://jqueryui.com/demos/button/#splitbutton ) you can see what I mean for splitbutton.
I would set the width of first button (the one which contain text). There is a way to do this?
In you CSS, you should include this:
.ui-button-text {
width: 300px;
}
Or to whatever the desired width is.
Related
Set css variable equal to class property
I want to set a css variable equal to the height of one of my divs.
I tried
:root{
--height-of-div: .div1.height;
}
.div2{
height: calc(--height-of-div/2);
}
But it is not working. Please help.
Not possible using CSS alone. You could use jQuery, something like this:
function SetDivHeight() {
$("#div2").css({'height':($("#div1").height())});
}
Currently I have a layout like so
<parent-comp>
<child1> </child1>
<child2> </child2>
</parent-comp>
Parent component have fixed height ( 1000px )
Child 1 have 2 states: Expanded( 200px ) and Collapsed( 10px )
I would like to use these information to calculate and update child2's height accordingly
I do not want to set child2's height to auto ( I need a specific value since this is the requirement to pass it into another library (the virtual scroll) )
How can I achieve this?
I tried ViewChild + ElementRef to get child component's height from parent component but it seems to cause ExpressionChangedAfterItHasBeenCheckedError when I try to update the child component's height
Should the child component output it's current height to the parent or the parent should read it from it's child?
instead of doing it the hard way, you can simply use flex-box, which would take care of doing all the calculations for you.
e.g
.parent {
display:Flex;
flex-direction:column;
flex-wrap:wrap;
height: 1000px;
}
.child1 {
/* expanded */
flex: 0 0 20%;
}
.collapsed {
flex: 0 0 2%;
}
.child2 {
flex: 1;
}
you can apply collapsed classed dynamically with the help of ngclass, hope this helps.
If you want to learn more about flexbox play these free game at https://flexboxfroggy.com/ Hope this helps.
Yes, you're right. You need to Output the value from child to parent and propagate it to desired components and do your calculations.
Here's an example.
If you want to pass this change of height to Components other than the children then I would suggest you use a SharedService to subscribe and make changes to the value(s). Siblings or not, this way you can share data between multiple components.
If you just want to update the height, using Flexbox or Grids is a better alternative.
I'd like to check if an image width has more than 400px I'd like this image to get full div width. if image is less than 400px just print it in its normal size.
any ideas how to do this?
<div id="volta">
<img src="/img/volta.jpg">
</div>
#volta{
width:500px;
}
As far as I know, this does not exist in CSS. What you should do instead is use classes.
Define some CSS class that applies the styles you want:
.long_width {
background: blue;
}
Then you would use Javascript to check the width of the image. You don't need jQuery to do this you can do it in vanilla Javascript (unless you already have jQuery imported and need it for other things). Maybe something like this:
let elm = document.querySelector('[src="/img/volta.jpg]"');
let width = window.getComputedStyle(elm).getPropertyValue('width');
And then you would use Javascript to add and remove styles accordingly:
if (width > 400) {
elm.classList.add("long_width");
}
else {
elm.classList.remove("long_width");
}
The specific answer to your question depends on what your intentions are. But to keep your code simple, you should use Javascript to handle the logic and not depend on CSS selectors for things this complicated. Instead, create a CSS class that contains the styles you need, and then use Javascript to apply it based on the size of the user uploaded image.
Additionally, if the user uploads the image, you should load it into memory and check its attributes in memory rather than by depending on a DOM element. Something like:
let img = new Image();
img.src = "{data URL of img}"
You will need javascript / jQuery to work. Something like this:
$('img').each(function(){
if($(this).width() > 400){
$(this).css('width', '100%');
}
});
Here is also working jquery example.
Apply an id to the image, and with jquery check its width
If it is greather than 400px modify his width or add a class that does the same.
Example
$(document).ready(function(){
if($("#image").width() > 400){
$("#image").css("width", "100%");
}
else{
$("#image").css("width", "10px");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id = "image" src = "https://pm1.narvii.com/6919/98f453834b5d87a6c92118da9c24fe98e1784f6ar1-637-358v2_hq.jpg"/>
You can do it like FlokiTheFisherman (with %), or you can use "wv" instead of "%".
I recommend using vw.
img[width='400'] {
width: 100%;
}
I have <select multiple="multiple">..</select> select and I also have select{heigth: 30px;} in some stylesheet that I cannot edit. Now my multiple select have 1-row heigth - "size" attribute cannot be applied. How can I solve the problem?
I like the clean solution.
select[multiple] {
height: 100px;
}
Well, first off - I'm assuming that you're using the height property, not the misspelled heigth property. There's two ways you could solve this.
The first (which I don't recommend) is by simply appending the style to the HTML element, like below:
<select multiple="multiple" style="height:100px">..</select>
Or, instead, my suggestion would be making a second style sheet, that uses the following property, including the "!important", which follows the attribute value:
select {
height: 100px !important;
}
Doing it like such will override the original style, and replace it. This isn't the only method that you can use to override it - you can read here on CSS specificity.
I think the right way should be adding a class to the specific <select> and giving it the right size, like:
<select multiple="multiple" class="multiple">
select.multiple {
height: 100px;
}
Hi I want to do a fixed size page, but don't want the page to break or reflow at all if the user resizes the window. Is this a javascript function?
sample: http://www.neimanmarcus.com/
Most people put all the content of there page inside a div with an id, such as 'doc', then they would apply the following rule:
<body><div id="doc">
YOUR PAGE HERE
</div></body>
body {
test-align: center;
}
#doc {
margin: 0 auto;
text-align: left;
width: 940px
}
The "text-align" fixes an IE 6 issue, really you just need to assign a margin to your wrapping document div.
it doesn't need java script function .
but remember : don't use % for declaring width or height for elements in css.(for having a static element that resizing window doesn't effect that).
for example : "width:90%;" ==> replace this with "width:100px;"