I have web page where whole page is divided in two parts left and right. The partition is shown below. In the left section, I have two side by side buttons and one of the button having long text string as 'Edit Categories'. This button overflows the text and eventually collapses and stacks on top of another. I am developer but i am not really into designing. Tried using flex but seems not working. The expected behavior for this one is two buttons should be side by side in large screen and stack in medium small and extra small resolution. I also tried putting col-sm, col-md, col-xs on my divs which contains <a> but noluck.
<!-- Start Left Section -->
<div class="col-lg-3 col-md-4 col-sm-12 col-xs-12 animated fadeInLeft categories-lst">
<div class="row">
<div class="col-lg-6">
<a onclick="toggleLoader('show')" href="/Rec/EditCategories" class="btn btn-default btn-block"><span><i class="fa fa-pencil"></i>Edit Categories</span></a>
</div>
<div class="col-lg-6">
<a onclick="showNewPost();" class="btn btn-default btn-block" id="showNewPost"><span><i class="fa fa-plus"></i> New Post</span> </a>
</div>
</div>
</div>
<!-- Start Right Section-->
<div class="col-lg-9 col-md-8 col-sm-12 col-xs-12 animated fadeInRight">
</div>
To achieve expected result, use below option
a{
white-space:normal !important;
word-wrap: break-word;
}
code sample - https://codepen.io/nagasai/pen/MVRwoN
Related
I have been working on a game and, for certain things, I used absolute positioning. In particular, I need it for some moving animations where I have to slide elements around and overlap them to create an effect.
I'm trying to work on making the game good-looking on mobile, and I've been running into some problems caused by Bootstrap columns that contain those absolutely positioned elements.
This is the look I'm trying to get (aside from the badly aligned number), notice the red squared row in the middle:
The whole center part of the screen (the row with buttons, emojis, and the centered card icon underneath) is a row containing cols. This is some of its markup
<div class="col order-1 order-xl-1 col-4 col-xl-2">
<div style="display:inline-block">
<p class="backgrounded-text" style="white-space: nowrap; text-overflow: ellipsis;"><span id="turn_elem">...</span></span></p>
<p class="backgrounded-text">Carta attuale: <span id="curr_card"><img class="card_icon" /></span></p>
</div>
</div>
<div class="reaction_box order-2 order-xl-2 col col-4 col-xl-2">
<span style="padding-left:5px!important;padding-right:5px!important" class="reaction_title">Reazioni:</span>
<table>
<!-- emojis ... -->
</table>
</div>
<div class="col order-5 order-xl-3 col-12 col-xl-3">
<span>...</span><br />
<span id="hidden_card">
<img class="card_placeholder" src="..." />
</span>
<span id="card_stack" class="slide_to_right">
<img class="card_placeholder" src="..." />
</span>
<div id="stacked_card">
<img id="stacked_front" class="card_placeholder" src="..." />
</div>
<div id="hidden_uncovered_card_div">
<img id="hidden_uncovered_card" class="card_placeholder" src="..." />
</div>
</div>
<div class="col col-4 order-3 order-xl-4 col-xl-3">
<button style="width: 49%" class="btn btn-lg btn-dark" id="doubt" #click="doubt()" :disabled="playing_animation">Dubito!</button>
<button style="width: 49%" class="btn btn-lg btn-dark">
Metti giù
</button>
</div>
</div>
The img that has id hidden_card is a card to the left of the red one that is made visible and slides to the right to cover that (it uses jQuery animate to manipulate the position). On top of stacked_card, which is the main red card that's displayed in the screenshots, there's another copy of it, that is flipped with jQuery and moved to the right to overlap hidden_uncovered_card. This is pretty much how the animations work. They all depend on using position: absolute and manipulating the positioning.
For some reason, the actual look I'm getting with the above code is this:
There is some space in between the three columns on the top and the one containing the red card back, and I don't understand where it is coming from.
Removing all the position: absolute seems to fix this, but of course, then all the animations that depend on it stop working.
Is there any way to fix this positioning without removing the position: absolute? It'd be a pain to have to rewrite the code for all the animations, as it's working perfectly on desktop.
Here's a static webpage that contains the markup. You can turn it to mobile view (the screenshots were taken as iPhone 6/7/8 mode) and see for yourself.
click
The actual app (a beta version, that is) can be found here, in case you wanted to see how the animations work. If you need any additional information, just let me know.
Bootstrap is using a 12 colums grid.
Check how you use them.
You have:
<div class="col order-1 order-xl-1 col-4 col-xl-2">The two button on the left<div>
<div class="reaction_box order-2 order-xl-2 col col-4 col-xl-2">the emojis</div>
<div class="col order-5 order-xl-3 col-12 col-xl-3">the red cards</div>
<div class="col col-4 order-3 order-xl-4 col-xl-3">the three button on the right</div>
You should clean that!!!
Example:
col followed by col-4 is the same as just col-4 where col-4 overrides col.
order-1 and order-xl-1 is redondant if there is no order-md-3 (for example)
Just order-1 is enought here.
For these 4 divs, make sure you use the 12 grid spaces correctly.
So about the col and col-* usage, for mobile size, you actually have 24 spaces used out of 12.
4 spaces
4 spaces
12 spaces
4 spaces
And whent the col-xl-* applies, you have 10 spaces used out of 12. Is that on purpose?
2 spaces
2 spaces
3 spaces
3 spaces
So here is what I suggest for a start:
<div class="col-3 col-xl-2 order-1">The two button on the left<div>
<div class="reaction_box col-4 col-xl-2 order-2">the emojis</div>
<div class="col-2 col-xl-3 order-3">the red cards</div>
<div class="col-3 order-4">the three button on the right</div>
which doesn't change the xl size at all, but produces this (iphone 6/7/8 mode):
That's a start.
So the trick is to have the classe in order... All the col-* from default to the bigger specific size... And then the order-* in order too. That make the markup readable.
;)
EDIT
To have the red cards looking like on another row :
<div class="col-4 col-xl-2 order-1">The two button on the left<div>
<div class="reaction_box col-4 col-xl-2 order-2">the emojis</div>
<div class="col-10 col-xl-3 order-4 order-xl-3 sm-translateUp">the red cards</div>
<div class="col-4 order-3 order-xl-4">the three button on the right</div>
Notice the order changed and that there is an additional .sm-translateUp class which would be:
#media screen and (max-width: 576px){
.sm-translateUp{
transform: translateY(-85px);
}
}
That makes:
Now that really looks like a hack... (LOL) But since that col is trapped inside its parent .row, that is all I think of for the moment.
So have that class defined inside all necessary #media rules for each bootstrap break points:
sm: >= 576px
md: >= 768px
lg: >= 992px
xl: >= 1200px
I want to have an effect where the picture is on left side of text, but when the screen is smaller, the text is on top and img is below.
Currently, I have the former, but when the screen size reduces, the img goes on top and text is on bottom. How do I reverse this?
Here is my code (theres a div for img and one for the description text):
<div class="container productwrap shadow-lg mt-3">
<div class="row">
<div class="col-md-4 p-2 m-3 border">
<img src="../Pictures/snacks3.jpeg" alt="snacks2">
</div>
<div class="col-md-7 p-2 my-3 border rounded">
<p class="newarrival text-center pt-3 font-weight-bold">Trendy Snacks</p>
<h2 style="display: inline-block" class="p-3 ml-2 border rounded">Brown Sugar Yogourt</h2>
<span class="badge badge-success align-top m-1">NEW!</span>
<p class="lead font-weight-bold text-warning m-4">CAD $9,99</p>
<p class="m-4"><strong>Unit: </strong>2 x 100g</p>
<p class="m-4"><strong>Availability: </strong>In Stock</p>
<label for="qty" class="ml-4"><strong>Quantity:</strong>
<input type="text" id="qty" name="qty" class="small w-25 text-right" value="1">
<button class="btn btn-outline-success btn-sm" href="#" role="submit">Add to Cart</button>
</label>
<p>
<button class="btn btn-info btn-sm m-2 mr-3 rounded-pill" data-toggle="collapse" data-target="#moreinfo">More info</button>
<div id="moreinfo" class="collapse text-wrap">
This delicacy instills the careful mix of brown sugar and yogourt. Its rich nutriments will revitalize your spirit and set you ready for your day.
</div>
</p>
</div>
</div>
</div>
I have tried using float-right/left but it doesn't budge at all.
I want to have an effect where the picture is on right side of text, but when the screen is smaller, the text is on top and img is below. Currently, I have the former ...
I'm not seeing you have the former. On bigger screens, the picture is on the left side of text...
If you switch the order of the picture structure and your text structure, you achieve both:
<div class="container">
<div class="row">
<div class="col-md-7">
...
</div>
<div class="col-md-4">
<img />
</div>
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/5m2z4s90/4/
Updates:
You can use order utilities class to achieve what you want:
<div class="container">
<div class="row">
<div class="col-md-4 order-2 order-md-1">
<img />
</div>
<div class="col-md-7 order-1 order-md-2">
...
</div>
</div>
</div>
On small screens, the image is 2nd item so it will appear at the bottom. On medium break point and up, you switch it back so that the image will appear on the left of the row.
demo: https://jsfiddle.net/davidliang2008/5m2z4s90/9/
Use CSS Grid and align how you want to align in default. Then use a media query and when the view gets smaller just change the div size and order of grid layout.
A common more complex responsive design technique is to use 'Media Queries' in CSS.
To start, align the items as you like them by default. Then, choose a limit for your resizing (ex: 'width less than 600px'). Once you have that set, you can begin a media query like so:
#media (max-width: 600px) {
*selector* {
*change you want to make when screen is smaller than 600px*;
}
}
Doing this will cause the changes to the CSS rules to automatically apply whenever the width of the screen is less than 600px, but it should also revert back to the default values whenever the screen increases in size again.
Media Queries can get a lot more complex and involved than in this example, but they are incredibly useful once you get used to them. I strongly suggest reading into them some.
I am trying to align the content to the existing container above, however I am unable to successfully commit this as the container is located in a row because I wanted the file directory div on the left which pushes the container to the right of course.
Assigning a position: fixed; to the file directory div would fix the issue however it would not maintain the responsive web design which Bootstrap offers with its superior system.
As you can see the content is not in the right spot.
I have tried numerous things in css however none of these didn't feel right. For now I have tried playing with the col system of Bootstrap for a bearable outcome. Furthermore the image I provided of the website is in fact the result of this piece of code in case one wonders whether the image corresponds to the code.
<div class="container"><h2><i class="fas fa-archive" style="color: darkgoldenrod"></i> Archive Register({{ $files_total }})</h2></div>
<div class="container-fluid">
<div class="row justify-content-between">
<div class="file-list col-lg-2">
<h3 class="ml-5"><i class="fas fa-file-alt" style="color: darkgoldenrod"></i> File list:</h3>
<div class="file-list ml-5">
<p>List</p>
</div>
</div>
<div class="content col-lg-9">
content
</div>
</div>
</div>
<div class="file-list col-lg-2">
change to
<div class="file-list col-lg-3">
your col need 1 more col as it is a 12-grid column.
matching it to the right column
<div class="content col-lg-9">
This would be because you are using a container for the heading, which is based on a fixed with of the screen, and container fluid which is the full width on the screen.
You could change the heading container to something like this to align it with your content column? (Presuming you are using Bootstrap 4)
<div class="container-fluid">
<div class="row">
<div class="col-lg-9 offset-lg-9">
<h2><i class="fas fa-archive" style="color: darkgoldenrod"></i> Archive Register({{ $files_total }})</h2>
</div>
</div>
</div>
I can't seem to understand this behavior:
CodePen demo
<div class="container-fluid buy-now">
<div class="row">
<div class="col-sm-offset-3 col-sm-6 text-center">
<button type="button" class="btn btn-primary btn-lg" id="buy-now-button" >BUY NOW FOR $400</button>
<button id="make-an-offer-button" type="button" class="btn btn-lg btn-info">MAKE AN OFFER</button>
</div>
</div>
</div>
Basically, the buttons stay next to each other until I get to about 1244px width when they stack on top of each other. Then, they go BACK to horizontal at about 768px. But then, at about 620px width, they go to stacked again.
Why is there such a "jumpy" behavior at seemingly random screen resolutions? According to the definitions I've set, these buttons should stay next to each other right until 768px (and below), when they go back to stacked mode.
You can replace the sm classes in the third line with xs so that it applies to all sizes:
<div class="col-xs-offset-3 col-xs-6 text-center">
This will result in only one horizontal/vertical break.
Here it is: https://codepen.io/anon/pen/QaMxPY
--
Second solution:
Erase col-xs-offset-3 col-xs-6 from that tag, resulting in
<div class="text-center">
This will center the buttons and only stack them when the screen becomes too narrow to have them side by side.
https://codepen.io/anon/pen/QaMxPY
--
Or use a smaller offset and a wider container class:
<div class="col-xs-offset-1 col-xs-10 text-center">
https://codepen.io/anon/pen/RxZBbx
--
And you can make the buttons smaller, by applying a different class to them (btn-sm instead of btn-lg) and changing their font-sizes:
https://codepen.io/anon/pen/mpMjyx
I am using Bootstrap and I came across the following error in displaying some buttons:
The HTML code is the following:
<div class="row" style="margin-top: 20px">
<div class="col-lg-6 text-left">
<button class="btn btn-primary profile-button">Save</button>
</div>
<div class="col-lg-6 text-right">
<button class="btn btn-primary profile-button">Reset</button>
</div>
</div>
The CSS for the custom class is:
.profile-button {
min-width: 125px;
}
The error only occurs when I am resizing the browser width. The screenshot attached is when the browser has half the width of the monitor (so 540px, given my resolution). I believe the display error starts at the 768px width value. The resolution I am currently using is 1920x1080.
I've tried wrapping the row inside a container div and also inside of a div that had both container and container-fluid classes.
Just add col-xs-6 class to both div
<div class="row" style="margin-top: 20px">
<div class="col-lg-6 col-xs-6 text-left">
<button class="btn btn-primary profile-button">Save</button>
</div>
<div class="col-lg-6 col-xs-6 text-right">
<button class="btn btn-primary profile-button">Reset</button>
</div>
</div>
DEMO
Bootstrap Grid
Bootstrap puts columns one under the other on smaller devices... It's likely that your columns are becoming full width and stacking, instead of staying at half the size. This is the standard behaviour.
If the buttons must remain side by side, I would recommend using your own classes and floating them, ensuring the max-width is 50%