I've been trying to use stepper in ng-zorro but faced some styling limitations. ng-step is basically a combination of a few divs when I inspect an ng_step, the HTML shows the following:
<div class="ant-steps-item-tail ng-star-inserted">...</div>
<div class="ant-steps-item-icon">...</div>
<div class="ant-steps-item-content>...</div>
what I need is something like:
<div class="ant-steps-item-tail ng-star-inserted">...</div>
<div class="container">
<div class="ant-steps-item-icon">...</div>
<div class="ant-steps-item-content>...</div>
</div>
Is there a way for me to insert this into it.
Sorry for not explaining it properly, This is the best way I could put it.
If you still couldn't understand the question, you could inspect an ng-step, that might help clear out the question I have here.
Related
I'm trying to do something fairly simple that I've done many times and I have no idea why it isn't working.
The following is simplified code for what I'm trying to do:
<div class="grid grid--uniform new-header">
<div class="grid__item small-up--one-third">
some stuff
</div>
<div class="grid__item small-up--one-third">
some stuff
</div>
<div class="grid__item small-up--one-third">
some stuff
</div>
</div>
No matter what I put as the second class after grid__item, I cannot get it to become any fraction of the size of the page. Currently, all divs are full-width regardless of me directing them to be one third.
Any ideas?
This is more of a css question than a liquid one. Correct me if I am wrong; I think your code relates mostly to Timber.
Timber is mobile first so you don't have to do small-up what you want is more like small--one-third. If the grid item is only going to be one third you can simply do: grid__item one-third
All the pages on my responsive site look fine on my Galaxy S7 except my homepage and I can't figure out why.
Here's an example of a page that looks fine:
http://edge-trainer.com/kick-in-the-butt-jumpstart.php
Here's my homepage:
http://edge-trainer.com/
I'm using the same CSS. Looking at my source code, can anyone see what the problem might be?
Thank you in advance.
Tim
The problem in your homepage is that the content-wrappers are not inside the content container.
Within your normal page you linked the dom structure is
<div id="content-container">
<div class="content-wrapper>yourcontent</div>
</div>
whereas in your home page it is
<div id="content-container">
<div class="content-wrapper>yourcontent</div>
</div>
<div class="content-wrapper>yourcontent</div>
<div class="content-wrapper>yourcontent</div>
<div class="content-wrapper>yourcontent</div>
Judging by your CSS, all of the .content-wrappers should be inside #content-container
As a sidenote, it might be worth looking into flexbox and relative sizing for the layout you're trying out, it might make your life a bit easier, just a suggestion ;)
I keep bumping into this issue where everyone keeps:
a) wanting to wrap HTML5 semantic tags with divs, and
b) wants to apply class selectors to the divs and not the semantic tags. It's as if people are afraid of slapping classes onto semantic tags for some reason.
For example, I am constantly told that this is "incorrect",
<body class="container">
<header class="row">
<div class="col-md-12"> ...
And something like this is more preferable,
<body>
<div class="container">
<div class="row">
<div class="col-md-12"> ...
And here, where the first example I have the column class in the h2 tag
<div class="row">
<h2 class="col-4 feature">Featured Work</h2>
</div>
But "the correct" way is to add yet another div tag to apply the class,
<div class="row">
<div class="col-4 feature">
<h2>Featured Work</h2>
</div>
</div>
I understand that this might be opinion-based, but I have found that when dealing with HTML5, opinions actually matter since virtually everyone is having issues and there is no other way to hammer out the details without opinions.
I recommend sticking to the
<body>
<div class="container">
<div class="row">
<div class="col-md-12"> ...
format.
If you intend to work with a lot other developers or with bootstrap templates- you will see that the container classes typically nest row class divs.
Since we are talking about markup there is no right answer, but following this convention is strongly recommended.
For consistency
For easy changes to styling & reusability with other projects- this even opens the door to drop-in replacements of css stylesheets from other projects or bootstrap templates. (I have had some surprisingly good results with this).
However, if you insist on giving non-div tags "container" and "col-X" tags, be consistent. I wouldn't recommend it though and would consider any template that follows its own convention to be an indicator of poor code quality.
This is an easy question. But what I want to know is: Is there a way to delete a div without removing its content USING bootstrap? I can also refactor the question to: Is there a way to delete a div CLASS dynamically with Bootstrap?
My code is simple:
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
GOOGLE MAP
</div>
<div class="col-md-2"></div>
</div>
</div>
I know there already exists a way to make it visible and or hide it (hidden-phone ..), but what I want to do is actually remove the container, the row and the cols and leave the google map to fill the whole width.
What I have right now is:
<div class="container hidden-phone">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="googleMap"> ... </div>
</div>
<div class="col-md-2"></div>
</div>
</div>
And then, right after that, I add the div of the google map again. But instead of hidden-phone, now:
<div class="googleMap visible-phone"> ... </div>
This way, when you switch to a phone, the container and separations of the map with the screen are none.
This is the easiest way, but it seems a little unpractical, because maybe I don't see one, but it is there, so I'm downloading the map into the client twice, I believe that is not clever.
I could always use JavaScript(jQuery) to listen to the event of resizing and remove it my self.. That is not a problem at all, but maybe bootstrap has a build-in functionality already, something like a data attribute like "data-hidden-phone-class='someClass'", or maybe a class that hides some classes when resizing like: "hidden-classes-phone" this way when the screen resizes to a phone one, boostrap would hide all the classes of that element? Or something.
I know the names for attributes and classes are not attractive, but is for the purpose of the question.
I hope I made myself clear enough, let me know if you don't understand something, thanks!
I'm having a very hard time assigning intelligent class names to my DOM elements.
I feel like the example below is something my CSS commonly devolves into:
<div class="article">
<div class="title-container">
<div class="title>Something fantastic</div>
<div class="sub-title-controls">
<div class="btn-like"></div>
<div class="btn-google-plus-one"></div>
<div class="btn-share"></div>
</div>
</div>
</div>
But then later I'll want to add a different style of "Share" button lower on the page. So I end up doing:
<div class="article">
<div class="title-container">
<div class="title>Something fantastic</div>
<div class="sub-title-controls">
<div class="btn-like"></div>
<div class="btn-google-plus-one"></div>
<div class="btn-share-tiny"></div>
</div>
</div>
</div>
<div>...More stuff...</div>
<div class="btn-share-big"></div>
Then things spiral out of control from there.
I guess what I'm looking for is: Is there any kind of Chicago Manual of Style for CSS? Like when is a <div> really better described as a <section> or <footer>? How do you intelligently name non-visual DIVs that serve as containers?
My CSS is a nightmare after 2 years of coding without structure. Just about given up and gone all inline on this particular project. :) Tips appreciated.
SMACCS is style guide for CSS, and might be exactly what you're looking for. You can buy it, or alternatively much of the content is available free on the site.
Additionally, BEM is a framework developed by the guys at Yandex, which I found useful reading and is used (somewhat) by InuitCSS, which I personally am keen on.
You should find some answers here, in this article titled: What Makes For a Semantic Class Name?.
In a nutshell, when you can, use the new HTML5 tags:
<header></header>
<article></article>
<aside></aside>
<footer></footer>
for your example, it would be better to do something like this :
<div class="btn-share"></div>
...
<div class="btn-share bigBtn"></div>
and only change the size in the bigBtn class.