正文 

当前位置： 首页 > 问答 >

使用 flex css 样式时的自定义控件宽度

     2023-02-16     35

关键词：

【中文标题】使用 flex css 样式时的自定义控件宽度【英文标题】：Custom control width when flex css style used 【发布时间】：2021-12-16 06:07:46 【问题描述】：

我自定义的控件有一个文本框和文本框旁边的图标

return (
  <div className="useFlex">
    <TextInput></TextInput>
    <div>
      <Icon></Icon>
    </div>
  </div>
);

风格

.useFlex 
  display: flex;

效果很好

但问题是：当我在我的页面中使用这个自定义控件时，文本框宽度没有得到扩展并且它保持固定。

<Table >
   <tr>
      <td><MyCustomControl> </MyCustomControl></td>
   </tr>
</Table>

你能告诉我我在这里缺少什么吗？

【问题讨论】：

【参考方案1】：

尝试添加

.useFlex

   display:flex;
   flex-grow: 1;

【讨论】：

Qt 中自定义小部件的自定义样式

...布时间】：2009-06-1918:50:01【问题描述】：有没有人在Qt中使用自定义样式、自定义小部件的经验？（我使用的是Qt4.5）问题如下：我想开发一些不完全基于现有绘图图元和子控件的自定义控件。由于整个应用程序应该是可换肤的... 查看详情

带有角度材料 2 的输入的自定义样式

...正在尝试设置输入的样式，使其具有一定的宽度。我正在使用AngularMaterial2，但由于某种原因，css中的样式未应用于输入标签。Hereisaworkingplunkerofmyissue以及受影响的代码：@Component(selec 查看详情

将 CSS 样式表与 ASP.NET 自定义控件链接

】将CSS样式表与ASP.NET自定义控件链接【英文标题】：LinkingaCSSStylesheetwithanASP.NETCustomControl【发布时间】：2011-02-2723:56:19【问题描述】：我正在开发一个由表格和按钮组成的自定义控件。我还有一个外部CSS样式表，用于定义这些元... 查看详情

如何设计winform中datagridview控件的自定义按钮列

...据网格颜色dgv.GridColor=System.Drawing.Color.Red;//列标题的边框样式dgv.ColumnHeadersBorderStyle=System.Windows.Forms.DataGridViewHeaderBorderStyle.Single;//行的边框样式dgv.RowHeadersBorderStyle=System.Windows.Forms.DataGridViewHeaderBorderStyle.Single;////禁 查看详情

我们可以用angular中的自定义css覆盖选择器的默认样式吗

】我们可以用angular中的自定义css覆盖选择器的默认样式吗【英文标题】：canweoverridethedefaultstylesofselectorwithcustomcssinangular【发布时间】：2020-08-0612:53:11【问题描述】：我为控件（按钮）设置了默认样式，选择器是app-button，btninbutt... 查看详情

小程序开发（二）-页面样式

...规则适用于所有页面。采用css定义样式。小程序官方推荐使用flex布局。pages/home目录下新建home.wxss文件，文件的样式只适用于当前页面。rpx是小程序为适应不同宽度的手机而发明的长度单位，所有手机宽度都为750rpx。weui是腾讯官... 查看详情

Bootstrap cdn 覆盖了我在 react js 中的自定义 css 样式

...lesinreactjs【发布时间】：2020-10-1906:13:00【问题描述】：我使用CSS在ReactJS中设计了一个网页。对于其中一个组件，我使用Bootstrap进行样式设置。我使用了最新的引导cdn链接并将其粘贴到“index.html”文件中。当我使用该引导链接时... 查看详情

css样式学习

目录1.可解构的自适应布局(TheDeconstructedPancake)2.超级居中本文内容参考自如何用一行CSS分别实现10种现代布局？。1.可解构的自适应布局(TheDeconstructedPancake)<html> <head> <styletype=‘text/css‘> .parent{ display:flex; flex- 查看详情

sectionList 中的自定义部分样式 REACT NATIVE

...制作水平部分（特定）吗？我想让第二部分水平，我尝试使用flex:1和flexDirection:\'row\'修改renderItem中的项目样式，但 查看详情

自定义控件设计时的 ImageUrl

】自定义控件设计时的ImageUrl【英文标题】：ImageUrlonCustomControlDesignTime【发布时间】：2010-06-0715:13:08【问题描述】：我已经构建了一个带有ImageURL属性的自定义控件。在设计时，当我在ImageUrl中输入图像时，我收到以下错误消息创... 查看详情

css3属性+布局+媒体查询

...扩张(放大) flex-shrink:;数字不带单位,项目总宽度超出容器时的缩小设置       0 本身的大小,不缩小也不放大       1 平均分配,默认值 flex-basi 查看详情

css用于样式字段标签的自定义css(代码片段)

查看详情

使用 HTML 中的自定义 CSS 覆盖 CSS 文件中的媒体查询

】使用HTML中的自定义CSS覆盖CSS文件中的媒体查询【英文标题】：OverridemediaqueriesinCSSfileswithcustomCSSinHTML【发布时间】：2021-10-1102:50:47【问题描述】：我正在为我的Angular项目使用HTML模板(AdminLTE)。在其中，我尝试在我的index.html头部... 查看详情

CSS Flex - 使用 TailwindCSS 设置相同的宽度

】CSSFlex-使用TailwindCSS设置相同的宽度【英文标题】：CSSFlex-SetsamewidthwithTailwindCSS【发布时间】：2021-07-0214:59:39【问题描述】：我有以下React代码（+TailwindCSS）：<sectionclassName="flexflex-colitems-center">managers.map((manager)=>(<UserCard 查看详情

自定义checkbox样式

通过选中时添加背景图片自定义CheckBox样式效果：CSS样式： <styletype="text/css>labelwidth:10%;display:flex;display:-webkit-flex;display:-moz-flex;flex-direction:row;justify-content:center;align-items:center;labe 查看详情

Flex - 使用 CSS 样式化 TextArea

】Flex-使用CSS样式化TextArea【英文标题】：Flex-styleTextAreawithCSS【发布时间】：2012-02-2907:06:27【问题描述】：只是想知道是否可以将*.css应用于sparkTextArea？如果有，怎么做？【问题讨论】：【参考方案1】：<fx:Style>@namespaces"libra... 查看详情

一个winform下datagridview控件外观的自定义类

一、关于起因最近非常频繁的使用DataGridView控件，VS提供的Winform下DataGridView的默认样式非常难看。如果做美化处理的话，需要调整的地方非常多，且该控件的很多设置属性非常的晦涩，不是很人性化。每次进行设置都煞费脑筋，... 查看详情

在css中写when/else是什么体验(代码片段)

...提案，目前是一个4级规范让我们来看看when/else是如何使用的吧when/else语法先来看看为了实现页面响应式是如何做的，这就要用到CSS媒体查询@media(min-width:800px)/*宽度大于800px时的样式*/@media(max-width:799px)/*宽度小于799px... 查看详情