Using Bootstrap 5. I have a card to display brand info and button on right to navigate.
When the description content is short, the button looks good, in one line. But as the description length is increased, the button is broken in multiple lines
I want to have the button width in one-line only and width adjusted according to the inside content and the description content to be adjusted in the left over space.
Is it possible to achieve it using flex?
Codepen link https://codepen.io/anuj9196/pen/mdKjeEq
I tried setting fixed with to the button, but then the button size does not adjust according to it's inner content. Also tried putting <br> tab in the description content, but then on large screen, too much space is left blank.
Yes, add flex-shrink:0; to the Button. It will prevent it from shrinking at all.
You can use the following line of code to achieve this with flex:
//1. param flex-grow
//2. param flex-shrink
//3. param flex-basis
flex: 0 0 auto;
This will calculate the basis by the length of the text, but won't grow or shrink if other items (description) change their size.
Related
My goal is to have an Ionic 3 Popover have a "top section" and a "bottom section." I'd like the top section to take up, lets say the top 70% of the PopOver and the bottom section to take up, lets say the bottom 30% of the PopOver. I'd like to put arbitrary content in the top section and have it be scrollable if that content exceeds the vertical space allotted to the top section. The bottom section content is fixed, and should always be present regardless of the scrolling of the top section, and should never have a scrollbar associated with it.
I've made the following attempt at this behavior using stackblitz:
https://stackblitz.com/edit/ionic-4k2dbz
So, how might I change the content of components/my-popover/my-popover.html or components/my-popover/my-popover.scss to achieve the layout / behavior described above?
If real quick I would think this way:
popovers in Ionic by default take 90% of the viewport based on the
docs (max height -
https://ionicframework.com/docs/api/components/popover/PopoverController/)
we can use max-height to limit the top pane div and set its overflow
to auto
we can use min-height / max-height to fix bottom pane div and set its
overflow to hidden;
now since you need 30/70 split we need to prorate it based on 90% max
height of Popover (I used 65/25 below)
https://stackblitz.com/edit/ionic-x3pkwv
But then when tested in an ionic app across multiple devices the above, I think, it may get messed up a bit depending on screen sizes etc. So you may consider using ion-grid which is flexbox based. Here is the solution below:
https://stackblitz.com/edit/ionic-ikvjiw
I'm struggling to build an iOS-style table cell component, with title, subtitle, info text on right side, disclosure arrow (chevron) and optional icon. From left-to-right, this can be thought of as:
fixed-width icon
variable-width title/subtitle
variable-width info text
fixed-width chevron image
Without the icon, I have this, which looks pretty good:
But once I make the icon visible, it pushes the chevron off the screen:
Because both text fields are variable-width, I cannot set a width on them (instead I have flex: 0 on the left one, and flex: 1 on the right, which causes the left one to be as big as it needs to be, and the right one to resize to fill whatever remaining space there is). In general, this all works well, except that the fixed images on left and right (icon and chevron) cause the left text to start pushing the chevron off the screen (the right text is zero-width at this point, so whether it's off-screen doesn't really matter).
I've tried all manner of fixes, but the only things I've come up with require measuring the size of components. The two hacks were:
1) Set maxWidth on the left text, subtracting the icon / chevron sizes from the total container width.
2) Set paddingRight on the top-most View, to include the measure width of the icon.
I'm trying to avoid either of these, because the size of the icon/container are unknown, and I don't want to have to add an onLayout handler to measure them and recompute. Any ideas how this would be possible?
Here's a gist of where I'm at, I've replaced the chevron with a fixed-size orange view: https://gist.github.com/jd20/36456c95011b65c0280cba920365b1f6
For me it helped to simply add flex: 1 to the styling of the Text. Then it adjusts appropriately and lets everything else fit in.
You can try to give position: 'absolute' into styling & some padding according to if need be.
Is it possible in CSS only to accomplish to get a input field and button vertically aligned like in my pen:
http://codepen.io/rpkoller/pen/BhKbp/
and then manage that the button aligned to the right has a fixed width and margin to the left to the input field and that the input field is filling the rest of the space fluidly.
Getting the button to the right might work with a float but with that solution the button isn't vertical aligned in the middle anymore. :( and getting the input field fill the remaining space i haven't managed at all. :/
Best regards Ralf
You can use specifity of floatting element and layout of block elements .
<button> first in the flow, floatting before a block wrapping the input. wrapper at overflow:hidden and <input/> at width:100%;.
see test : http://codepen.io/anon/pen/Hdiyq
I'm trying to make the following sign up box fluid responsive in CSS.
Here is an example: http://cssdesk.com/aYLwW
I would like the input field width to be "flexible" and shrink depending on the page.
You can see from the example when I shrink the window, the button eventually drops down below the input field.
With this in mind, what should I set my input#iiihuu-iiihuu field width to be to allow the input field to gracefully resize without any bumpage?
Many thanks for any pointers :-D
Give a min-width:550px; to the div containing the text-box and button. Your control will not break then.
Working ex. here http://cssdesk.com/dUjxF
As the definition says min-width sets a min-width to the element, it doesn't go below that size under any circumstances.
You can change the css widths to percent based.
See here
I have one big image as a background to my webpage. The image contains a box inside the image itself. How would I place text on that background image such that it should fit in the box, and shrink or resize accordingly (in other resolutions when the background resizes)?
If you're looking to resize the "box" containing the text, you should be able to set the dimensions of the element to percentage-based width and height values with CSS.
If you want to resize the text inside the element, then you might want to consider using JavaScript (perhaps jQuery) to poll the size of the window at set intervals and adjust the text size based on the new window dimensions.
Edit: To clarify, you should be able to set the dimensions of the text box (probably a div) to be a percentage of the page. For example, the div containing the text could be 80% of the window width and 80% of its height. You can then set the margin to be "auto". This should cause the margin around the box and the dimensions to be proportional to the window width.
Example:
<style type="text/css">
div#box {
height: 80%;
width: 80%;
margin: auto;
}
</style>
<div id="box">Text goes here.</div>
This will cause the "box" div to be centered horizontally on the page, but vertical centering is a bit trickier. You'll probably want to look at this page to figure out how to center it vertically to stay within the box in the background.
As suggested by the other individual, you could also make the box background just the background of the text's container and not the entire page background. This might be a bit easier, but I think you will still need to use the percentage-based width and height attributes and auto margin to center it nicely.
For starters, you can't resize a background image. Also, resizing text will need Javascript or a page refresh.
Try making an example at http://www.jsfiddle.net so people better see what you're describing.
UPDATE
Your question is still unclear and I strongly recommend jsfiddle. But if I've interpreted correctly...you're using FancyBox, which suggests you've got some Javascript running your page. Javascript can be used to find if your text is overflowing the container, and can resize it accordingly.
To do this, get your <div> (or container element) and check its .scrollHeight and .clientHeight properties. If the scroll is less than the client, the text doesn't need to be resized. If scroll is larger than the client, you can resize with the .style.fontSize property.
An untested example of what I'm describing is like this:
myDiv = $('containerElement'); // Get container object using its ID
size = 50; // Start with 50px font size
while(myDiv.scrollHeight > myDiv.clientHeight) {
// Decrement font size until scroll is less than client
myDiv.style.fontSize = (size - 1) + 'px';
}
You'll have to do a little legwork on this to get it to work how you like. Things to note:
I used the dollar function to get an object, you can google it for more info
Your container must have defined dimensions for .clientHeight to find
You may need to try .offsetHeight instead of .clientHeight
If you're just looking to control overflow, you can use CSS:
overflow-x:hidden or scroll or auto, overflow-y is the same
white-space:nowrap will prevent auto text wrapping
But, once again, my answer is vague since it's not clear (with code) what you're asking.
The problem with your solution is that it is very unscalable, not friendly to different browsers and will cause more problems as your website expands.
Try separating the box from the other bg image and use the box image as a background for the div you have the text in.