Incorrect displayed width for JQuery UI button - javascript

A common way to create a button to access another page (i.e. link) using JQuery-UI is the following:
<div id="hb">
<form action="index.html"><input type="submit" value="Home" id="but_hb"></form>
</div>
In order to set the width and layout, one can do:
$('#but_hb').button().css({ width: 70 });
$('#hb').css({
textAlign: 'center',
width: 70,
top:0,
left:0,
position:"absolute"
});
My question is: why is the displayed width only 68 pixels? How to solve this?
See here for a replication of the issue.

Add additional styles to your button, your OS (or possibly a plugin) is styling it for you. Add a background:"#f00" and border:"none" to the CSS then remeasure.
$('#hb').css({
textAlign: 'center',
width: 70,
top:0,
left:0,
position:"absolute",
background:"#f00",
border:"none"
});

In Firefox 9, the actual width is 64px and the border is 3px on the left and 3px on the right, totaling the intended visible width to 70px. You always have to take the border and padding into account. Padding will expand the element's width. See The CSS Box Model

70px -2Xborder. The border will depend on your browser unless you define it yourself. Box Model

Related

react-bootstrap ButtonDropdown - can't set the width of the button itself to 100%?

I'm not sure if there's some quirk with react-bootstrap's DropdownButtons, but when I try to style the dropdown button like so:
<DropdownButton
key={index}
id="dropdown-basic-button"
title={
<div style={{
maxWidth: '250px',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
}}>
{url}
</div>
}
style={{margin: "auto", width: "100%", display: "block"}}
>
in order to try to get the button to fill its CSS grid cell completely, but it ends up looking something like this, clearly not filling its container:
I noticed in the chrome inspector, there are actual button components underneath this "DropdownButton" that, if I set the width of those to 100%, it achieves my goal. But, I don't know how to access these in code (see picture for reference).
You can see the div with my applied styles, but the <button type="button"...> component is what I really need to be editing. Is there a way to drill down into this and change its width?

Cards come with margin-right

I'm trying to display three cards in a grid. The media of the card has a max-width of 345px but because of that the card gets a lot of margin-right. Styling doesn't look good in a grid. Anyone know how I can get rid of the margin?
I have an example made in sandbox: https://codesandbox.io/s/6451nx4ypr
The issue is with the grid. The Card has max size, but the grid is larger. This leave some extra space. If you look in the debugger, there is no margin to change.
You can try the following:
const styles = {
card: {
maxWidth: 345
},
gridFour: {
maxWidth: 345
},
media: {
// ⚠️ object-fit is not supported by IE11.
objectFit: "cover",
}
};
And in the change the grid class to:
<Grid item sm={4} className={classes.gridFour}>
Sandbox: https://codesandbox.io/embed/k3k2m35mz5
You can also center the cards in the Grid:
const styles = {
card: {
maxWidth: 345,
margin: 'auto'
},
gridFour: {
align: 'center'
},
media: {
// ⚠️ object-fit is not supported by IE11.
objectFit: "cover"
}
};
I don't know if it works differently in React, but in Angular, I just apply classes to whatever it is I need to restyle and it seems to take.
If you have the objects in another container of some kind, make sure it doesn't apply some margin/space (like a flex container or something). Apply something to the container items to strip away any of that.
Simple example, this strips away all padding and margins and has the predictable effect on the backgrounds (I just tried it in a project, it works as expected):
mat-card {
margin: 0;
padding: 0px;
background-color: grey;
}
mat-card-content {
margin: 0;
padding: 0px;
background-color: red;
}
If you are familiar with bootstrap, there is this feature called grid offsets. Unfortunately, this is still not a feature to material-ui.
So, what you can do is remove the max-width on your cards. Then add an empty Grid to the sides to create an offset.
If you are expecting the width to be defined and should fluid on the screen when the screen width increased is as showed in this codepen link.
And this will have default width as 4 and doesn't have custom style to define a width to considered as responsive width.

How to enable SlimScroll when reach max height

I am using slim scroll for a div. I want show the slim scroll only when the content of the div reach the max-height of the div. Is there any way i can achieve this?
$('#main-table-body').slimScroll({
height: '66px',
width: '100%',
size: '10px',
alwaysVisible: true,
distance: '7%'
});
Like this I have added slim scroll to the div.Div have a static height 66px. And content are getting added to the div dynamically. When content reach the max space in the div only slim scroll need to be showing. Otherwise don't need.

Cant change background size because of position absolute

First of all the JSfiddle
I'm trying to make the div (or the element inside the div) background to take the image width and set the background width to it. Because I'm using jQuery position I must use the position: absolute property which for some reason disables the background-size in css and backgroundSize in jQuery. It can only work with those properties when I delete the position property which disable the jQuery position. I tried margin/padding it didn't work either.
HTML(Wont let me add a picture so couldn't add it)
JS/jQuery
$('#ShortText').css({
left: screen.width * .4,
top: screen.height * .4,
})
CSS
#ShortText{
position:absolute;
background-color: rgba(255, 255, 255,.6);
background-size:100%;
}
My final goal is one of those slideshow images with text on them which when you hover over the text more text shows and I need the background because I don't want to set different color to every text on every picture
EDIT:
Add code & fixed jsfiddle
&more info
Your position is absolute, this is not allowing things to change. Changing 'absolute' to 'relative' should fix this. It worked for me in your jsFiddle just by changing that property.

jQuery .attr doesn't attribute width or height

The following code attributes the src to .ajax-loader which is an img but not the height or width. Am I doing something wrong?
$(".ajax-loader").attr({
src: "http://test.com/loading.gif",
height: 16,
width: 16
});
Edit: This is being loaded by Contact Form 7 which is a WordPress plugin. I don't understand because the src is changing fine. However, one thing I noticed was that the height and width attributes aren't present. I am trying to add them in. Is this why they aren't showing up?
Link to website
You could use .css():
$(".ajax-loader").attr("
"src", "http://keebs.com/wp-content/themes/keebs/images/ajax-loader.gif")
.css({
height: "16px",
width: "16px"
});
You'll need to update the CSS height and width properties: $(".ajax-loader").css({height:"16px", width:"16px"});
Use .height() and .width() to set the width and height.
$(".ajax-loader").width(16).height(16);

Categories

Resources